Mirror navigator online flag in observable state

This commit is contained in:
Willem Dantuma 2020-07-22 08:52:41 +02:00
parent 31d01c75c5
commit 2790ae74e7
3 changed files with 42 additions and 4 deletions

View File

@ -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;
@ -254,6 +258,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
@ -287,6 +303,8 @@ export type Actions = OpenModal
| SetMenuVisible
| InitUserPackagesSuccess
| ToggleAccountMenu
| CloseAll;
| CloseAll
| Online
| Offline;

View File

@ -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();

View File

@ -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);