Merge pull request #583 from andrew-bierman/fix/cleaning-up-combined-…

…providers Fix/cleaning up combined providers
andrew-bierman · Jan 11, 2024 · 4cec1e3 · 4cec1e3
2 parents 6cecadd + 1445fd5
commit 4cec1e3
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 75 deletions.
diff --git a/client/provider/CombinedProvider.tsx b/client/provider/CombinedProvider.tsx
@@ -1,83 +1,17 @@
-// src/provider/CombinedProvider.tsx
-import { Provider as ReduxProvider } from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
+import React from 'react';
 import { SessionProvider } from '../context/auth';
 import { ThemeProvider } from '../context/theme';
-import { store, persistor } from '../store/store';
-
-// Additional imports from the branch
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { onlineManager } from '@tanstack/react-query';
-import NetInfo from '@react-native-community/netinfo';
-
-import { queryTrpc, getToken } from '../trpc';
-import { httpBatchLink } from '@trpc/client';
-import { api } from '~/constants/api';
-import { useEffect } from 'react';
+import { TrpcTanstackProvider } from './TrpcTanstackProvider';
+import { ReduxProvider } from './ReduxProvider';
 
 export function CombinedProvider({ children }: { children: React.ReactNode }) {
-  // Setup for React Query and TRPC
-  const [queryClient] = React.useState(() => new QueryClient());
-
-  const persister = createAsyncStoragePersister({
-    storage: AsyncStorage,
-    throttleTime: 3000,
-  });
-
-  useEffect(() => {
-    return NetInfo.addEventListener((state) => {
-      const status = !!state.isConnected;
-      onlineManager.setOnline(status);
-    });
-  }, []);
-
-  const trpcClient = queryTrpc.createClient({
-    links: [
-      httpBatchLink({
-        url: `${api}/trpc`,
-        async headers() {
-          const token = await getToken('session');
-          return {
-            authorization: token ? `Bearer ${token}` : '',
-          };
-        },
-      }),
-    ],
-  });
-
-  useEffect(() => {
-    return NetInfo.addEventListener((state) => {
-      const status = !!state.isConnected;
-      onlineManager.setOnline(status);
-    });
-  }, []);
-
   return (
-    <ReduxProvider store={store}>
-      <PersistQueryClientProvider
-        onSuccess={async () =>
-          queryClient
-            .resumePausedMutations()
-            .then(async () => queryClient.invalidateQueries())
-        }
-        persistOptions={{ persister }}
-        client={queryClient}
-      >
-        <queryTrpc.Provider client={trpcClient} queryClient={queryClient}>
-          <QueryClientProvider client={queryClient}>
-            <PersistGate loading={null} persistor={persistor}>
-              <SessionProvider>
-                <ThemeProvider>{children}</ThemeProvider>
-              </SessionProvider>
-            </PersistGate>
-            <ReactQueryDevtools initialIsOpen={false} />
-          </QueryClientProvider>
-        </queryTrpc.Provider>
-      </PersistQueryClientProvider>
+    <ReduxProvider>
+      <TrpcTanstackProvider>
+        <SessionProvider>
+          <ThemeProvider>{children}</ThemeProvider>
+        </SessionProvider>
+      </TrpcTanstackProvider>
     </ReduxProvider>
   );
 }
diff --git a/client/provider/ReduxProvider/index.tsx b/client/provider/ReduxProvider/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { store, persistor } from '../../store/store';
+
+export const ReduxProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <ReduxStoreProvider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        {children}
+      </PersistGate>
+    </ReduxStoreProvider>
+  );
+};
diff --git a/client/provider/TrpcTanstackProvider/index.tsx b/client/provider/TrpcTanstackProvider/index.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { onlineManager } from '@tanstack/react-query';
+import NetInfo from '@react-native-community/netinfo';
+import { queryTrpc, getToken } from '../../trpc';
+import { httpBatchLink } from '@trpc/client';
+import { api } from '~/constants/api';
+import { Platform } from 'react-native';
+
+export const TrpcTanstackProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [queryClient] = React.useState(() => new QueryClient());
+
+  const persister = createAsyncStoragePersister({
+    storage: AsyncStorage,
+    throttleTime: 3000,
+  });
+
+  useEffect(() => {
+    return NetInfo.addEventListener((state) => {
+      const status = !!state.isConnected;
+      onlineManager.setOnline(status);
+    });
+  }, []);
+
+  const trpcClient = queryTrpc.createClient({
+    links: [
+      httpBatchLink({
+        url: `${api}/trpc`,
+        async headers() {
+          const token = await getToken('session');
+          return {
+            authorization: token ? `Bearer ${token}` : '',
+          };
+        },
+      }),
+    ],
+  });
+
+  return (
+    <PersistQueryClientProvider
+      onSuccess={async () =>
+        queryClient
+          .resumePausedMutations()
+          .then(async () => queryClient.invalidateQueries())
+      }
+      persistOptions={{ persister }}
+      client={queryClient}
+    >
+      <queryTrpc.Provider client={trpcClient} queryClient={queryClient}>
+        <QueryClientProvider client={queryClient}>
+          {children}
+          {Platform.OS === 'web' && (
+            <ReactQueryDevtools initialIsOpen={false} />
+          )}
+        </QueryClientProvider>
+      </queryTrpc.Provider>
+    </PersistQueryClientProvider>
+  );
+};