fix: refetch data on reconnect

Author: jmattheis

ui/src/CurrentUser.ts

@@ -12,6 +12,7 @@ export class CurrentUser {
     private reconnectTimeoutId: number | null = null;
     private reconnectTime = 7500;
     public loggedIn = false;
+    public refreshKey = 0;
     public authenticating = true;
     public user: IUser = {name: 'unknown', admin: false, id: -1};
     public connectionErrorMessage: string | null = null;
@@ -22,6 +23,7 @@ export class CurrentUser {
             authenticating: observable,
             user: observable,
             connectionErrorMessage: observable,
+            refreshKey: observable,
         });
     }
 

ui/src/layout/Layout.tsx

@@ -58,6 +58,7 @@ const Layout = observer(() => {
             logout,
             tryReconnect,
             connectionErrorMessage,
+            refreshKey,
         },
     } = useStores();
     const {classes} = useStyles();
@@ -84,7 +85,9 @@ const Layout = observer(() => {
         <StyledEngineProvider injectFirst>
             <ThemeProvider theme={theme}>
                 <HashRouter>
-                    <div>
+                    {/* This forces all components to fully rerender including useEffects.
+                        The refreshKey is updated when store data was cleaned and pages should refetch their data. */}
+                    <div key={refreshKey}>
                         {!connectionErrorMessage ? null : (
                             <ConnectionErrorBanner
                                 height={64}

ui/src/reactions.ts

@@ -40,6 +40,7 @@ export const registerReactions = (stores: StoreMapping) => {
             if (!connectionErrorMessage) {
                 clearAll();
                 loadAll();
+                stores.currentUser.refreshKey++;
             }
         }
     );