Mirror navigator online flag in observable state

projects/common/src/fm/actions/app-common.actions.ts

@@ -58,6 +58,10 @@ export const TOGGLEACCOUNTMENU = '[AppCommon] ToggleAccountMenu';
 
 export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';
 
+export const ONLINE = '[AppCommon] Online';
+
+export const OFFLINE = '[AppCommon] Offline';
+
 export class InitUser implements Action {
   readonly type = INITUSER;
 
@@ -255,6 +259,18 @@ export class SetMenuVisible implements Action {
   constructor(public visible:boolean) { }
 }
 
+export class Online implements Action {
+  readonly type = ONLINE;
+
+  constructor() { }
+}
+
+export class Offline implements Action {
+  readonly type = OFFLINE;
+
+  constructor() { }
+}
+  
 
 export type Actions = OpenModal
   | InitRoot
@@ -287,6 +303,8 @@ export type Actions = OpenModal
   | SetMenuVisible
   | InitUserPackagesSuccess
   | ToggleAccountMenu
-  | CloseAll;
+  | CloseAll
+  | Online
+  | Offline;
 
 

projects/common/src/fm/components/app/app.component.ts

@@ -98,13 +98,23 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   @HostListener('document:keyup', ['$event'])
-  keyUp(event: KeyboardEvent) {
+  onKeyUp(event: KeyboardEvent) {
     let x = event.keyCode;
     if (x === 27) {
       this.store.dispatch(new commonActions.Escape(true,false));
     }    
   }
 
+  @HostListener('window:online', ['$event'])
+  onOnline(event: Event) {   
+      this.store.dispatch(new commonActions.Online());
+  }
+
+  @HostListener('window:offline', ['$event'])
+  onOffline(event: Event) {   
+      this.store.dispatch(new commonActions.Offline());
+  }
+
   ngOnDestroy() {
     // Subscription clean-up
     if(this.routerSub$) this.routerSub$.unsubscribe();

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -18,7 +18,8 @@ export interface State {
   routeLoading:boolean,
   menuVisible: boolean,
   userPackages: IPackages,
-  accountMenuVisible: boolean
+  accountMenuVisible: boolean,
+  isOnline: boolean
 }
 
 export const initialState: State = {
@@ -31,7 +32,8 @@ export const initialState: State = {
   routeLoading: false,
   menuVisible: false,
   userPackages: {},
-  accountMenuVisible: false
+  accountMenuVisible: false,
+  isOnline: window.navigator.onLine
 }
 
 export function reducer(state = initialState, action: appCommonActions.Actions ): State {
@@ -112,6 +114,12 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
     case appCommonActions.CLOSEALL: {
       return tassign(state,{accountMenuVisible:false,menuVisible:false });
     }
+    case appCommonActions.ONLINE:{
+      return tassign(state,{isOnline:true});
+    }
+    case appCommonActions.OFFLINE:{
+      return tassign(state,{isOnline:false});
+    }
     default: {
       return state;
     }
@@ -128,6 +136,7 @@ export const getMenuVisible = (state: State) => state.menuVisible;
 export const getUser = (state: State) => state.user;
 export const getUserPackages = (state: State) => state.userPackages;
 export const getAccountMenuVisible = (state: State) => state.accountMenuVisible;
+export const getIsOnline = (state: State) => state.isOnline;
 
 export const selectAppCommonState = createFeatureSelector<State>(MODULE_NAME);
 
@@ -141,4 +150,5 @@ export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuV
 export const SelectGetUser = createSelector(selectAppCommonState,getUser);
 export const SelectGetUserPackages = createSelector(selectAppCommonState,getUserPackages);
 export const SelectGetAccountMenuVisible = createSelector(selectAppCommonState,getAccountMenuVisible);
+export const SelectGetIsOnline = createSelector(selectAppCommonState,getIsOnline);