Merge pull request #1315 from ral-facilities/feature/force-refresh-af…

…ter-maintenance-#1312

Check for maintenance state every 5 minutes and force refresh if changed

src/App.test.tsx

@@ -45,7 +45,7 @@ describe('App', () => {
     expect(screen.getByText('Loading...')).toBeInTheDocument();
   });
 
-  it('loadMaintenanceState dispatched when maintenance changes', async () => {
+  it('should dispatch loadMaintenanceState and force refresh the page when maintenance changes', async () => {
     // mock so token verify succeeds
     (axios.post as jest.Mock).mockImplementation(() =>
       Promise.resolve({
@@ -54,6 +54,11 @@ describe('App', () => {
     );
     window.matchMedia = jest.fn().mockReturnValue({ matches: true });
 
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+
     jest.useFakeTimers();
 
     render(<AppSansHoc t={jest.fn()} i18n={{}} tReady={true} />);
@@ -98,5 +103,26 @@ describe('App', () => {
 
     expect(screen.getByText('Maintenance')).toBeInTheDocument();
     expect(screen.getByText('test message')).toBeInTheDocument();
+
+    // should not refresh page when maintenance state changes from false to true
+    expect(window.location.reload).not.toHaveBeenCalled();
+
+    (axios.get as jest.Mock).mockImplementation(() =>
+      Promise.resolve({
+        data: {
+          show: false,
+          message: 'test message',
+        },
+      })
+    );
+
+    jest.runOnlyPendingTimers();
+
+    await act(async () => {
+      await flushPromises();
+    });
+
+    // should refresh page when maintenance state changes from true to false
+    expect(window.location.reload).toHaveBeenCalled();
   });
 });

src/App.tsx

@@ -70,7 +70,7 @@ const toastrConfig = (): React.ReactElement => (
 class App extends React.Component<WithTranslation> {
   public componentDidMount(): void {
     // Check for changes in maintenance state. Ensures that state changes are
-    // loaded when a user does not reload the site for longer than an hour.
+    // loaded when a user does not reload the site for longer than 5 minutes.
     setInterval(() => {
       const provider = getState().scigateway.authorisation.provider;
       if (provider.fetchMaintenanceState) {
@@ -81,10 +81,14 @@ class App extends React.Component<WithTranslation> {
             storedMaintenanceState.message !== fetchedMaintenanceState.message
           ) {
             dispatch(loadMaintenanceState(fetchedMaintenanceState));
+
+            // Reload the page if maintenance state changes from true to false
+            if (storedMaintenanceState.show && !fetchedMaintenanceState.show)
+              window.location.reload();
           }
         });
       }
-    }, 1000 * 60 * 60);
+    }, 1000 * 60 * 5);
   }
 
   public render(): React.ReactElement {