Address PR comments

- Remove TODO
- Refactor duplicate code into dg-common

packages/datagateway-common/src/api/retryICATErrors.ts

@@ -32,7 +32,7 @@ export const useRetryICATErrors = (): ((
 ) => boolean) => {
   const queryClient = useQueryClient();
   const opts = queryClient.getDefaultOptions();
-  // TODO: do we want to be more elegant in handling other types of retry...
+
   const retries =
     typeof opts.queries?.retry === 'number'
       ? opts.queries.retry

packages/datagateway-common/src/index.tsx

@@ -62,6 +62,7 @@ export {
 export { default as Sticky } from './sticky.component';
 export { default as DGThemeProvider } from './dgThemeProvider.component';
 export { default as Mark } from './mark.component';
+export * from './queryClientSettingsUpdater.component';
 
 export { default as HomePage } from './homePage/homePage.component';
 

packages/datagateway-common/src/queryClientSettingsUpdater.component.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import { initialState as dGCommonInitialState } from './state/reducers/dgcommon.reducer';
+import { StateType } from './state/app.types';
+import { createLocation } from 'history';
+import configureStore from 'redux-mock-store';
+import {
+  QueryClientSettingsUpdater,
+  QueryClientSettingsUpdaterRedux,
+} from './queryClientSettingsUpdater.component';
+
+describe('QueryClientSettingsUpdater', () => {
+  const renderComponent = (
+    queryRetries: number | undefined = undefined,
+    queryClient = new QueryClient()
+  ): RenderResult => {
+    function Wrapper({
+      children,
+    }: React.PropsWithChildren<unknown>): JSX.Element {
+      return (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      );
+    }
+    return render(
+      <QueryClientSettingsUpdater
+        queryClient={queryClient}
+        queryRetries={queryRetries}
+      />,
+      {
+        wrapper: Wrapper,
+      }
+    );
+  };
+
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('syncs retry prop to query client when it updates', async () => {
+    const queryClient = new QueryClient({
+      // set random other option to check it doesn't get overridden
+      defaultOptions: { queries: { staleTime: 300000 } },
+    });
+    let queryRetries = 1;
+    const { rerender } = renderComponent(queryRetries, queryClient);
+
+    expect(queryClient.getDefaultOptions()).toEqual({
+      queries: { staleTime: 300000, retry: 1 },
+    });
+
+    queryRetries = 0;
+
+    rerender(
+      <QueryClientSettingsUpdater
+        queryClient={queryClient}
+        queryRetries={queryRetries}
+      />
+    );
+
+    expect(queryClient.getDefaultOptions()).toEqual({
+      queries: { staleTime: 300000, retry: 0 },
+    });
+  });
+});
+
+describe('QueryClientSettingsUpdaterRedux', () => {
+  const initialState: StateType = {
+    dgcommon: dGCommonInitialState,
+    router: {
+      action: 'POP',
+      location: { ...createLocation('/'), query: {} },
+    },
+  };
+  const renderComponent = (
+    state: StateType = initialState,
+    queryClient = new QueryClient()
+  ): RenderResult => {
+    const mockStore = configureStore([thunk]);
+    function Wrapper({
+      children,
+    }: React.PropsWithChildren<unknown>): JSX.Element {
+      return (
+        <Provider store={mockStore(state)}>
+          <QueryClientProvider client={queryClient}>
+            {children}
+          </QueryClientProvider>
+        </Provider>
+      );
+    }
+    return render(
+      <QueryClientSettingsUpdaterRedux queryClient={queryClient} />,
+      {
+        wrapper: Wrapper,
+      }
+    );
+  };
+
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('syncs retry setting to query client when it updates', async () => {
+    const queryClient = new QueryClient({
+      // set random other option to check it doesn't get overridden
+      defaultOptions: { queries: { staleTime: 300000 } },
+    });
+    const { rerender } = renderComponent(initialState, queryClient);
+
+    initialState.dgcommon.queryRetries = 0;
+
+    rerender(<QueryClientSettingsUpdaterRedux queryClient={queryClient} />);
+
+    expect(queryClient.getDefaultOptions()).toEqual({
+      queries: { staleTime: 300000, retry: 0 },
+    });
+  });
+});

packages/datagateway-common/src/queryClientSettingsUpdater.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { QueryClient } from 'react-query';
+import { StateType } from './state/app.types';
+import { useSelector } from 'react-redux';
+
+export const QueryClientSettingsUpdater: React.FC<{
+  queryRetries: number | undefined;
+  queryClient: QueryClient;
+}> = (props) => {
+  const { queryClient, queryRetries } = props;
+
+  React.useEffect(() => {
+    if (typeof queryRetries !== 'undefined') {
+      const opts = queryClient.getDefaultOptions();
+      queryClient.setDefaultOptions({
+        ...opts,
+        queries: { ...opts.queries, retry: queryRetries },
+      });
+    }
+  }, [queryClient, queryRetries]);
+
+  return null;
+};
+
+export const QueryClientSettingsUpdaterRedux: React.FC<{
+  queryClient: QueryClient;
+}> = (props) => {
+  const { queryClient } = props;
+  const queryRetries = useSelector(
+    (state: StateType) => state.dgcommon.queryRetries
+  );
+
+  return (
+    <QueryClientSettingsUpdater
+      queryClient={queryClient}
+      queryRetries={queryRetries}
+    />
+  );
+};

packages/datagateway-dataview/src/App.test.tsx

@@ -1,22 +1,9 @@
 import * as React from 'react';
-import App, { QueryClientSettingUpdater } from './App';
+import App from './App';
 import log from 'loglevel';
-import {
-  render,
-  screen,
-  waitFor,
-  type RenderResult,
-} from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import PageContainer from './page/pageContainer.component';
 import { configureApp, settingsLoaded } from './state/actions';
-import { StateType } from './state/app.types';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { dGCommonInitialState } from 'datagateway-common';
-import { initialState as dgDataViewInitialState } from './state/reducers/dgdataview.reducer';
-import { createLocation } from 'history';
 
 jest
   .mock('loglevel')
@@ -92,54 +79,3 @@ describe('App', () => {
     expect(await screen.findByText('app.error')).toBeInTheDocument();
   });
 });
-
-describe('QueryClientSettingUpdater', () => {
-  const initialState: StateType = {
-    dgcommon: dGCommonInitialState,
-    dgdataview: dgDataViewInitialState,
-    router: {
-      action: 'POP',
-      location: { ...createLocation('/'), query: {} },
-    },
-  };
-  const renderComponent = (
-    state: StateType = initialState,
-    queryClient = new QueryClient()
-  ): RenderResult => {
-    const mockStore = configureStore([thunk]);
-    function Wrapper({
-      children,
-    }: React.PropsWithChildren<unknown>): JSX.Element {
-      return (
-        <Provider store={mockStore(state)}>
-          <QueryClientProvider client={queryClient}>
-            {children}
-          </QueryClientProvider>
-        </Provider>
-      );
-    }
-    return render(<QueryClientSettingUpdater queryClient={queryClient} />, {
-      wrapper: Wrapper,
-    });
-  };
-
-  beforeEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('syncs retry setting to query client when it updates', async () => {
-    const queryClient = new QueryClient({
-      // set random other option to check it doesn't get overridden
-      defaultOptions: { queries: { staleTime: 300000 } },
-    });
-    const { rerender } = renderComponent(initialState, queryClient);
-
-    initialState.dgcommon.queryRetries = 0;
-
-    rerender(<QueryClientSettingUpdater queryClient={queryClient} />);
-
-    expect(queryClient.getDefaultOptions()).toEqual({
-      queries: { staleTime: 300000, retry: 0 },
-    });
-  });
-});

packages/datagateway-dataview/src/App.tsx

@@ -7,6 +7,7 @@ import {
   Preloader,
   BroadcastSignOutType,
   RequestPluginRerenderType,
+  QueryClientSettingsUpdaterRedux,
 } from 'datagateway-common';
 import {
   createBrowserHistory,
@@ -17,7 +18,7 @@ import {
 import log from 'loglevel';
 import React from 'react';
 import { Translation } from 'react-i18next';
-import { batch, connect, Provider, useSelector } from 'react-redux';
+import { batch, connect, Provider } from 'react-redux';
 import { AnyAction, applyMiddleware, compose, createStore, Store } from 'redux';
 import { createLogger } from 'redux-logger';
 import thunk, { ThunkDispatch } from 'redux-thunk';
@@ -106,27 +107,6 @@ const queryClient = new QueryClient({
   },
 });
 
-export const QueryClientSettingUpdater: React.FC<{
-  queryClient: QueryClient;
-}> = (props) => {
-  const { queryClient } = props;
-  const queryRetries = useSelector(
-    (state: StateType) => state.dgcommon.queryRetries
-  );
-
-  React.useEffect(() => {
-    if (typeof queryRetries !== 'undefined') {
-      const opts = queryClient.getDefaultOptions();
-      queryClient.setDefaultOptions({
-        ...opts,
-        queries: { ...opts.queries, retry: queryRetries },
-      });
-    }
-  }, [queryClient, queryRetries]);
-
-  return null;
-};
-
 document.addEventListener(MicroFrontendId, (e) => {
   const action = (e as CustomEvent).detail;
   if (action.type === BroadcastSignOutType) {
@@ -205,7 +185,7 @@ class App extends React.Component<unknown, { hasError: boolean }> {
           <Provider store={this.store}>
             <ConnectedRouter history={history}>
               <QueryClientProvider client={queryClient}>
-                <QueryClientSettingUpdater queryClient={queryClient} />
+                <QueryClientSettingsUpdaterRedux queryClient={queryClient} />
                 <DGThemeProvider>
                   <ConnectedPreloader>
                     <React.Suspense

packages/datagateway-download/src/App.test.tsx

@@ -2,7 +2,7 @@ import { RenderResult, render } from '@testing-library/react';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
-import App, { ErrorFallback, QueryClientSettingUpdater } from './App';
+import App, { ErrorFallback, QueryClientSettingsUpdaterContext } from './App';
 import { flushPromises } from './setupTests';
 import { mockedSettings } from './testData';
 import { QueryClient, QueryClientProvider } from 'react-query';
@@ -32,7 +32,7 @@ describe('ErrorFallback', () => {
   });
 });
 
-describe('QueryClientSettingUpdater', () => {
+describe('QueryClientSettingUpdaterContext', () => {
   let settings = mockedSettings;
   const renderComponent = (queryClient = new QueryClient()): RenderResult => {
     function Wrapper({
@@ -46,9 +46,12 @@ describe('QueryClientSettingUpdater', () => {
         </DownloadSettingsContext.Provider>
       );
     }
-    return render(<QueryClientSettingUpdater queryClient={queryClient} />, {
-      wrapper: Wrapper,
-    });
+    return render(
+      <QueryClientSettingsUpdaterContext queryClient={queryClient} />,
+      {
+        wrapper: Wrapper,
+      }
+    );
   };
 
   beforeEach(() => {
@@ -65,7 +68,7 @@ describe('QueryClientSettingUpdater', () => {
 
     settings.queryRetries = 0;
 
-    rerender(<QueryClientSettingUpdater queryClient={queryClient} />);
+    rerender(<QueryClientSettingsUpdaterContext queryClient={queryClient} />);
 
     expect(queryClient.getDefaultOptions()).toEqual({
       queries: { staleTime: 300000, retry: 0 },