Merge pull request #4265 from tloncorp/lb/store-from-context

store: add provider for accessing within ui components
tloncorp · Dec 9, 2024 · 6d28e1d · 6d28e1d
2 parents ca81904 + 89f58f2
commit 6d28e1d
Show file tree

Hide file tree

Showing 10 changed files with 275 additions and 192 deletions.
diff --git a/apps/tlon-mobile/src/App.main.tsx b/apps/tlon-mobile/src/App.main.tsx
@@ -24,6 +24,7 @@ import { finishingSelfHostedLogin as selfHostedLoginStatus } from '@tloncorp/sha
 import {
   LoadingSpinner,
   PortalProvider,
+  StoreProvider,
   Text,
   View,
   usePreloadedEmojis,
@@ -127,39 +128,43 @@ export default function ConnectedApp() {
               theme={isDarkMode ? DarkTheme : DefaultTheme}
               ref={navigationContainerRef}
             >
-              <BranchProvider>
-                <PostHogProvider
-                  client={posthogAsync}
-                  autocapture={{
-                    captureTouches: false,
-                  }}
-                  options={{
-                    enable:
-                      process.env.NODE_ENV !== 'test' ||
-                      !!process.env.POST_HOG_IN_DEV,
-                  }}
-                >
-                  <GestureHandlerRootView style={{ flex: 1 }}>
-                    <SafeAreaProvider>
-                      <MigrationCheck>
-                        <QueryClientProvider client={queryClient}>
-                          <SignupProvider>
-                            <PortalProvider>
-                              <App />
-                            </PortalProvider>
+              <StoreProvider>
+                <BranchProvider>
+                  <PostHogProvider
+                    client={posthogAsync}
+                    autocapture={{
+                      captureTouches: false,
+                    }}
+                    options={{
+                      enable:
+                        process.env.NODE_ENV !== 'test' ||
+                        !!process.env.POST_HOG_IN_DEV,
+                    }}
+                  >
+                    <GestureHandlerRootView style={{ flex: 1 }}>
+                      <SafeAreaProvider>
+                        <MigrationCheck>
+                          <QueryClientProvider client={queryClient}>
+                            <SignupProvider>
+                              <PortalProvider>
+                                <App />
+                              </PortalProvider>
 
-                            {__DEV__ && (
-                              <DevTools
-                                navigationContainerRef={navigationContainerRef}
-                              />
-                            )}
-                          </SignupProvider>
-                        </QueryClientProvider>
-                      </MigrationCheck>
-                    </SafeAreaProvider>
-                  </GestureHandlerRootView>
-                </PostHogProvider>
-              </BranchProvider>
+                              {__DEV__ && (
+                                <DevTools
+                                  navigationContainerRef={
+                                    navigationContainerRef
+                                  }
+                                />
+                              )}
+                            </SignupProvider>
+                          </QueryClientProvider>
+                        </MigrationCheck>
+                      </SafeAreaProvider>
+                    </GestureHandlerRootView>
+                  </PostHogProvider>
+                </BranchProvider>
+              </StoreProvider>
             </NavigationContainer>
           </ShipProvider>
         </TamaguiProvider>

diff --git a/apps/tlon-mobile/src/fixtures/cosmos.decorator.tsx b/apps/tlon-mobile/src/fixtures/cosmos.decorator.tsx
@@ -1,10 +1,12 @@
-import { TamaguiProvider, config } from '@tloncorp/ui';
+import { StoreProvider, TamaguiProvider, config } from '@tloncorp/ui';
 import React from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 // eslint-disable-next-line
 export default ({ children }: { children: React.ReactNode }) => (
   <TamaguiProvider defaultTheme={'light'} config={config}>
-    <SafeAreaProvider>{children}</SafeAreaProvider>
+    <StoreProvider stub>
+      <SafeAreaProvider>{children}</SafeAreaProvider>
+    </StoreProvider>
   </TamaguiProvider>
 );
diff --git a/apps/tlon-web-new/src/app.tsx b/apps/tlon-web-new/src/app.tsx
@@ -18,7 +18,7 @@ import { Provider as TamaguiProvider } from '@tloncorp/app/provider';
 import { AppDataProvider } from '@tloncorp/app/provider/AppDataProvider';
 import { sync } from '@tloncorp/shared';
 import * as store from '@tloncorp/shared/store';
-import { LoadingSpinner, View } from '@tloncorp/ui';
+import { LoadingSpinner, StoreProvider, View } from '@tloncorp/ui';
 import cookies from 'browser-cookies';
 import { usePostHog } from 'posthog-js/react';
 import React, { PropsWithChildren, useEffect, useState } from 'react';
@@ -184,18 +184,20 @@ const App = React.memo(function AppComponent() {
       <MigrationCheck>
         <SafeAreaProvider>
           <TamaguiProvider defaultTheme={isDarkMode ? 'dark' : 'light'}>
-            {dbIsLoaded ? (
-              <AppRoutes isLoaded={dbIsLoaded} />
-            ) : (
-              <View
-                height="100%"
-                width="100%"
-                justifyContent="center"
-                alignItems="center"
-              >
-                <LoadingSpinner />
-              </View>
-            )}
+            <StoreProvider>
+              {dbIsLoaded ? (
+                <AppRoutes isLoaded={dbIsLoaded} />
+              ) : (
+                <View
+                  height="100%"
+                  width="100%"
+                  justifyContent="center"
+                  alignItems="center"
+                >
+                  <LoadingSpinner />
+                </View>
+              )}
+            </StoreProvider>
           </TamaguiProvider>
         </SafeAreaProvider>
       </MigrationCheck>