From 5725c7e7ee60b85b106941112d0c9f836a0d9b94 Mon Sep 17 00:00:00 2001 From: Radoslaw Szwajkowski Date: Fri, 7 Oct 2022 11:35:21 +0200 Subject: [PATCH] Add withQueryClient HOC Remove code duplication in the page wrappers. Signed-off-by: Radoslaw Szwajkowski --- src/extensions/HostsPageWrapper.tsx | 24 ++-------------- src/extensions/MappingsWrapper.tsx | 24 ++-------------- src/extensions/PlanWizardWrapper.tsx | 24 ++-------------- src/extensions/PlansWrapper.tsx | 30 ++++++-------------- src/extensions/ProvidersWrapper.tsx | 24 ++-------------- src/extensions/QueryClientHoc.tsx | 26 +++++++++++++++++ src/extensions/VMMigrationDetailsWrapper.tsx | 28 +++++------------- 7 files changed, 53 insertions(+), 127 deletions(-) create mode 100644 src/extensions/QueryClientHoc.tsx diff --git a/src/extensions/HostsPageWrapper.tsx b/src/extensions/HostsPageWrapper.tsx index e2e26cdbf..88686a7fb 100644 --- a/src/extensions/HostsPageWrapper.tsx +++ b/src/extensions/HostsPageWrapper.tsx @@ -1,25 +1,7 @@ -import * as React from 'react'; -import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'; -import { ReactQueryDevtools } from 'react-query/devtools'; - import { HostsPage } from '@app/Providers/HostsPage'; -const queryCache = new QueryCache(); -const queryClient = new QueryClient({ - queryCache, - defaultOptions: { - queries: { - refetchOnMount: false, - refetchOnWindowFocus: false, - }, - }, -}); +import withQueryClient from './QueryClientHoc'; -const App: React.FunctionComponent = () => ( - - - {process.env.NODE_ENV !== 'test' ? : null} - -); +const Page = withQueryClient(HostsPage); -export default App; +export default Page; diff --git a/src/extensions/MappingsWrapper.tsx b/src/extensions/MappingsWrapper.tsx index f91f36f4d..a2cd7e21f 100644 --- a/src/extensions/MappingsWrapper.tsx +++ b/src/extensions/MappingsWrapper.tsx @@ -1,25 +1,7 @@ -import * as React from 'react'; -import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'; -import { ReactQueryDevtools } from 'react-query/devtools'; - import { MappingsPage } from '@app/Mappings/MappingsPage'; -const queryCache = new QueryCache(); -const queryClient = new QueryClient({ - queryCache, - defaultOptions: { - queries: { - refetchOnMount: false, - refetchOnWindowFocus: false, - }, - }, -}); +import withQueryClient from './QueryClientHoc'; -const App: React.FunctionComponent = () => ( - - - {process.env.NODE_ENV !== 'test' ? : null} - -); +const Page = withQueryClient(MappingsPage); -export default App; +export default Page; diff --git a/src/extensions/PlanWizardWrapper.tsx b/src/extensions/PlanWizardWrapper.tsx index f275e368e..c1210a5bc 100644 --- a/src/extensions/PlanWizardWrapper.tsx +++ b/src/extensions/PlanWizardWrapper.tsx @@ -1,25 +1,7 @@ -import * as React from 'react'; -import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'; -import { ReactQueryDevtools } from 'react-query/devtools'; - import { PlanWizard } from '@app/Plans/components/Wizard/PlanWizard'; -const queryCache = new QueryCache(); -const queryClient = new QueryClient({ - queryCache, - defaultOptions: { - queries: { - refetchOnMount: false, - refetchOnWindowFocus: false, - }, - }, -}); +import withQueryClient from './QueryClientHoc'; -const App: React.FunctionComponent = () => ( - - - {process.env.NODE_ENV !== 'test' ? : null} - -); +const Page = withQueryClient(PlanWizard); -export default App; +export default Page; diff --git a/src/extensions/PlansWrapper.tsx b/src/extensions/PlansWrapper.tsx index 7553dfe09..74ae5c632 100644 --- a/src/extensions/PlansWrapper.tsx +++ b/src/extensions/PlansWrapper.tsx @@ -1,28 +1,14 @@ -import * as React from 'react'; -import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'; -import { ReactQueryDevtools } from 'react-query/devtools'; +import React from 'react'; import { MustGatherContextProvider } from '@app/common/context'; import { PlansPage } from '@app/Plans/PlansPage'; -const queryCache = new QueryCache(); -const queryClient = new QueryClient({ - queryCache, - defaultOptions: { - queries: { - refetchOnMount: false, - refetchOnWindowFocus: false, - }, - }, -}); +import withQueryClient from './QueryClientHoc'; -const App: React.FunctionComponent = () => ( - - - - - {process.env.NODE_ENV !== 'test' ? : null} - -); +const Page = withQueryClient(() => ( + + + +)); -export default App; +export default Page; diff --git a/src/extensions/ProvidersWrapper.tsx b/src/extensions/ProvidersWrapper.tsx index 31c264c70..4e0a8c5d2 100644 --- a/src/extensions/ProvidersWrapper.tsx +++ b/src/extensions/ProvidersWrapper.tsx @@ -1,25 +1,7 @@ -import * as React from 'react'; -import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'; -import { ReactQueryDevtools } from 'react-query/devtools'; - import { ProvidersPage } from '@app/Providers/ProvidersPage'; -const queryCache = new QueryCache(); -const queryClient = new QueryClient({ - queryCache, - defaultOptions: { - queries: { - refetchOnMount: false, - refetchOnWindowFocus: false, - }, - }, -}); +import withQueryClient from './QueryClientHoc'; -const App: React.FunctionComponent = () => ( - - - {process.env.NODE_ENV !== 'test' ? : null} - -); +const Page = withQueryClient(ProvidersPage); -export default App; +export default Page; diff --git a/src/extensions/QueryClientHoc.tsx b/src/extensions/QueryClientHoc.tsx new file mode 100644 index 000000000..9994f2630 --- /dev/null +++ b/src/extensions/QueryClientHoc.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'; +import { ReactQueryDevtools } from 'react-query/devtools'; + +const queryCache = new QueryCache(); +const queryClient = new QueryClient({ + queryCache, + defaultOptions: { + queries: { + refetchOnMount: false, + refetchOnWindowFocus: false, + }, + }, +}); + +const withQueryClient = (Component) => + function QueryClientHoc(props) { + return ( + + + {process.env.NODE_ENV !== 'test' ? : null} + + ); + }; + +export default withQueryClient; diff --git a/src/extensions/VMMigrationDetailsWrapper.tsx b/src/extensions/VMMigrationDetailsWrapper.tsx index 34d0202bf..18fea180e 100644 --- a/src/extensions/VMMigrationDetailsWrapper.tsx +++ b/src/extensions/VMMigrationDetailsWrapper.tsx @@ -1,6 +1,4 @@ import * as React from 'react'; -import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'; -import { ReactQueryDevtools } from 'react-query/devtools'; import { MustGatherContextProvider } from '@app/common/context'; import { @@ -8,24 +6,12 @@ import { VMMigrationDetailsProps, } from '@app/Plans/components/VMMigrationDetails'; -const queryCache = new QueryCache(); -const queryClient = new QueryClient({ - queryCache, - defaultOptions: { - queries: { - refetchOnMount: false, - refetchOnWindowFocus: false, - }, - }, -}); +import withQueryClient from './QueryClientHoc'; -const App: React.FunctionComponent = (props: VMMigrationDetailsProps) => ( - - - - {process.env.NODE_ENV !== 'test' ? : null} - - -); +const Page = withQueryClient((props: VMMigrationDetailsProps) => ( + + + +)); -export default App; +export default Page;