Skip to content

Commit

Permalink
Add withQueryClient HOC
Browse files Browse the repository at this point in the history
Remove code duplication in the page wrappers.

Signed-off-by: Radoslaw Szwajkowski <[email protected]>
  • Loading branch information
rszwajko committed Oct 7, 2022
1 parent a2b6992 commit 5725c7e
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 127 deletions.
24 changes: 3 additions & 21 deletions src/extensions/HostsPageWrapper.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => (
<QueryClientProvider client={queryClient}>
<HostsPage />
{process.env.NODE_ENV !== 'test' ? <ReactQueryDevtools /> : null}
</QueryClientProvider>
);
const Page = withQueryClient(HostsPage);

export default App;
export default Page;
24 changes: 3 additions & 21 deletions src/extensions/MappingsWrapper.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => (
<QueryClientProvider client={queryClient}>
<MappingsPage />
{process.env.NODE_ENV !== 'test' ? <ReactQueryDevtools /> : null}
</QueryClientProvider>
);
const Page = withQueryClient(MappingsPage);

export default App;
export default Page;
24 changes: 3 additions & 21 deletions src/extensions/PlanWizardWrapper.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => (
<QueryClientProvider client={queryClient}>
<PlanWizard />
{process.env.NODE_ENV !== 'test' ? <ReactQueryDevtools /> : null}
</QueryClientProvider>
);
const Page = withQueryClient(PlanWizard);

export default App;
export default Page;
30 changes: 8 additions & 22 deletions src/extensions/PlansWrapper.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => (
<QueryClientProvider client={queryClient}>
<MustGatherContextProvider>
<PlansPage />
</MustGatherContextProvider>
{process.env.NODE_ENV !== 'test' ? <ReactQueryDevtools /> : null}
</QueryClientProvider>
);
const Page = withQueryClient(() => (
<MustGatherContextProvider>
<PlansPage />
</MustGatherContextProvider>
));

export default App;
export default Page;
24 changes: 3 additions & 21 deletions src/extensions/ProvidersWrapper.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => (
<QueryClientProvider client={queryClient}>
<ProvidersPage />
{process.env.NODE_ENV !== 'test' ? <ReactQueryDevtools /> : null}
</QueryClientProvider>
);
const Page = withQueryClient(ProvidersPage);

export default App;
export default Page;
26 changes: 26 additions & 0 deletions src/extensions/QueryClientHoc.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<QueryClientProvider client={queryClient}>
<Component {...props} />
{process.env.NODE_ENV !== 'test' ? <ReactQueryDevtools /> : null}
</QueryClientProvider>
);
};

export default withQueryClient;
28 changes: 7 additions & 21 deletions src/extensions/VMMigrationDetailsWrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,17 @@
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 {
VMMigrationDetails,
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) => (
<QueryClientProvider client={queryClient}>
<MustGatherContextProvider>
<VMMigrationDetails match={props.match} />
{process.env.NODE_ENV !== 'test' ? <ReactQueryDevtools /> : null}
</MustGatherContextProvider>
</QueryClientProvider>
);
const Page = withQueryClient((props: VMMigrationDetailsProps) => (
<MustGatherContextProvider>
<VMMigrationDetails match={props.match} />
</MustGatherContextProvider>
));

export default App;
export default Page;

0 comments on commit 5725c7e

Please sign in to comment.