Check token when going online

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

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/effects/app-common.effects.ts

@@ -162,6 +162,25 @@ export class AppCommonEffects {
       return null;
     }));
 
+    @Effect({ dispatch: false })
+    online$: Observable<Action> = this.actions$.pipe(
+      ofType(appCommonActions.ONLINE),
+      map((action) => {
+        console.debug("Online: Check token");
+        if(!this.oauthService$.hasValidAccessToken()) {
+          console.debug("No valid token, try to refresh");
+          if(this.oauthService$.getRefreshToken() != null ) {
+            console.debug("We have a refresh token");
+            this.oauthService$.refreshToken().then(() => {              
+              this.store$.dispatch(new appCommonActions.InitUser());
+            });
+          }
+        }
+        return null;
+      }));
+
+
+
   constructor(private actions$: Actions, private store$: Store<appCommonReducers.State>, private oauthService$: OAuthService, private itemService$: ItemService, private folderService$:FolderService, private userService$: UserService, private router$: Router, private stateSerializerService$:StateSerializerService) {
     store$.dispatch(new appCommonActions.LoadItemTypes());
   }

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