Fix Contexts

frontend/src/App.tsx

@@ -1,8 +1,7 @@
 import React, { StrictMode, Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import Main from './basic/Main';
-import { CssBaseline, ThemeProvider } from '@mui/material';
+import { CssBaseline } from '@mui/material';
-import { AppContext, useAppStore } from './contexts/AppContext';
 import HostAlert from './components/HostAlert';
 import TorConnectionBadge from './components/TorConnection';
 
@@ -11,30 +10,25 @@ import i18n from './i18n/Web';
 
 import { systemClient } from './services/System';
 import ErrorBoundary from './components/ErrorBoundary';
-import { GarageContext, useGarageStore } from './contexts/GarageContext';
+import { AppContextProvider } from './contexts/AppContext';
-import { FederationContext, useFederationStore } from './contexts/FederationContext';
+import { GarageContextProvider } from './contexts/GarageContext';
+import { FederationContextProvider } from './contexts/FederationContext';
 
 const App = (): JSX.Element => {
-  const appStore = useAppStore();
-  const garageStore = useGarageStore();
-  const federationStore = useFederationStore();
-
   return (
     <StrictMode>
       <ErrorBoundary>
         <Suspense fallback='loading'>
           <I18nextProvider i18n={i18n}>
-            <AppContext.Provider value={appStore}>
+            <AppContextProvider>
-              <GarageContext.Provider value={garageStore}>
+              <GarageContextProvider>
-                <FederationContext.Provider value={federationStore}>
+                <FederationContextProvider>
-                  <ThemeProvider theme={appStore.theme}>
+                  <CssBaseline />
-                    <CssBaseline />
+                  {window.NativeRobosats === undefined ? <HostAlert /> : <TorConnectionBadge />}
-                    {window.NativeRobosats === undefined ? <HostAlert /> : <TorConnectionBadge />}
+                  <Main />
-                    <Main />
+                </FederationContextProvider>
-                  </ThemeProvider>
+              </GarageContextProvider>
-                </FederationContext.Provider>
+            </AppContextProvider>
-              </GarageContext.Provider>
-            </AppContext.Provider>
           </I18nextProvider>
         </Suspense>
       </ErrorBoundary>

frontend/src/basic/NavBar/NavBar.tsx

@@ -25,8 +25,6 @@ const NavBar = (): JSX.Element => {
     useContext<UseAppStoreType>(AppContext);
   const { garage, orderUpdatedAt, robotUpdatedAt } = useContext<UseGarageStoreType>(GarageContext);
 
-  console.log('On NavBar "page" is:', page);
-
   const navigate = useNavigate();
   const location = useLocation();
   const smallBar = windowSize?.width < 50;

frontend/src/contexts/AppContext.tsx

@@ -1,6 +1,14 @@
-import { createContext, type Dispatch, useEffect, useState, type SetStateAction } from 'react';
+import React, {
+  createContext,
+  type Dispatch,
+  useEffect,
+  useState,
+  type SetStateAction,
+  ReactNode,
+} from 'react';
 import { type Page } from '../basic/NavBar';
 import { type OpenDialogs } from '../basic/MainDialogs';
+import { ThemeProvider } from '@mui/material';
 
 import { Settings, type Version, type Origin, type Favorites } from '../models';
 
@@ -95,6 +103,10 @@ export interface WindowSize {
   height: number;
 }
 
+export interface AppContextProviderProps {
+  children: ReactNode;
+}
+
 export interface UseAppStoreType {
   theme?: Theme;
   torStatus: TorStatus;
@@ -148,7 +160,7 @@ export const initialAppContext: UseAppStoreType = {
 
 export const AppContext = createContext<UseAppStoreType>(initialAppContext);
 
-export const useAppStore = (): UseAppStoreType => {
+export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.Element => {
   // State provided right at the top level of the app. A chaotic bucket of everything.
   // Contains app-wide state and functions. Triggers re-renders on the full tree often.
 
@@ -176,8 +188,6 @@ export const useAppStore = (): UseAppStoreType => {
     initialAppContext.acknowledgedWarning,
   );
 
-  console.log('On AppContext "page" is:', page);
-
   useEffect(() => {
     setTheme(makeTheme(settings));
   }, [settings.fontSize, settings.mode, settings.lightQRs]);
@@ -218,25 +228,31 @@ export const useAppStore = (): UseAppStoreType => {
     setWindowSize(getWindowSize(theme.typography.fontSize));
   };
 
-  return {
+  return (
-    theme,
+    <AppContext.Provider
-    torStatus,
+      value={{
-    settings,
+        theme,
-    setSettings,
+        torStatus,
-    page,
+        settings,
-    setPage,
+        setSettings,
-    slideDirection,
+        page,
-    setSlideDirection,
+        setPage,
-    navbarHeight,
+        slideDirection,
-    open,
+        setSlideDirection,
-    setOpen,
+        navbarHeight,
-    windowSize,
+        open,
-    clientVersion,
+        setOpen,
-    acknowledgedWarning,
+        windowSize,
-    setAcknowledgedWarning,
+        clientVersion,
-    hostUrl,
+        acknowledgedWarning,
-    origin,
+        setAcknowledgedWarning,
-    fav,
+        hostUrl,
-    setFav,
+        origin,
-  };
+        fav,
+        setFav,
+      }}
+    >
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </AppContext.Provider>
+  );
 };

frontend/src/contexts/FederationContext.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   createContext,
   type Dispatch,
   useEffect,
@@ -6,6 +6,7 @@ import {
   type SetStateAction,
   useMemo,
   useContext,
+  ReactNode,
 } from 'react';
 
 import { type Coordinator, type Order, Federation } from '../models';
@@ -47,6 +48,10 @@ export interface fetchRobotProps {
   isRefresh?: boolean;
 }
 
+export interface FederationContextProviderProps {
+  children: ReactNode;
+}
+
 export interface UseFederationStoreType {
   federation: Federation;
   sortedCoordinators: string[];
@@ -65,7 +70,9 @@ export const initialFederationContext: UseFederationStoreType = {
 
 export const FederationContext = createContext<UseFederationStoreType>(initialFederationContext);
 
-export const useFederationStore = (): UseFederationStoreType => {
+export const FederationContextProvider = ({
+  children,
+}: FederationContextProviderProps): JSX.Element => {
   const { settings, page, origin, hostUrl, open, torStatus } =
     useContext<UseAppStoreType>(AppContext);
   const { setMaker, garage, setBadOrder, robotUpdatedAt } =
@@ -101,7 +108,6 @@ export const useFederationStore = (): UseFederationStoreType => {
     setFederation(newFed);
   }, [settings.network, torStatus]);
 
-  console.log('On FederationContext "page" is:', page);
   const onOrderReceived = (order: Order): void => {
     let newDelay = defaultDelay;
     if (order?.bad_request) {
@@ -121,7 +127,6 @@ export const useFederationStore = (): UseFederationStoreType => {
       garage.updateOrder(order);
       setBadOrder(undefined);
     }
-    console.log('page:', page, 'Why remains as initial page?');
     console.log('setting delay!', newDelay);
     setDelay(newDelay);
     setTimer(setTimeout(fetchCurrentOrder, newDelay));
@@ -167,11 +172,17 @@ export const useFederationStore = (): UseFederationStoreType => {
     }
   }, [open.profile, hostUrl, robotUpdatedAt]);
 
-  return {
+  return (
-    federation,
+    <FederationContext.Provider
-    sortedCoordinators,
+      value={{
-    setDelay,
+        federation,
-    coordinatorUpdatedAt,
+        sortedCoordinators,
-    federationUpdatedAt,
+        setDelay,
-  };
+        coordinatorUpdatedAt,
+        federationUpdatedAt,
+      }}
+    >
+      {children}
+    </FederationContext.Provider>
+  );
 };

frontend/src/contexts/GarageContext.tsx

@@ -1,8 +1,19 @@
-import { createContext, type Dispatch, useState, type SetStateAction, useEffect } from 'react';
+import React, {
+  createContext,
+  type Dispatch,
+  useState,
+  type SetStateAction,
+  useEffect,
+  ReactNode,
+} from 'react';
 
 import { defaultMaker, type Maker, Garage } from '../models';
 import { systemClient } from '../services/System';
 
+export interface GarageContextProviderProps {
+  children: ReactNode;
+}
+
 export interface UseGarageStoreType {
   garage: Garage;
   maker: Maker;
@@ -25,7 +36,7 @@ export const initialGarageContext: UseGarageStoreType = {
 
 export const GarageContext = createContext<UseGarageStoreType>(initialGarageContext);
 
-export const useGarageStore = (): UseGarageStoreType => {
+export const GarageContextProvider = ({ children }: GarageContextProviderProps): JSX.Element => {
   // All garage data structured
   const [garage] = useState<Garage>(initialGarageContext.garage);
   const [maker, setMaker] = useState<Maker>(initialGarageContext.maker);
@@ -52,13 +63,19 @@ export const useGarageStore = (): UseGarageStoreType => {
     }
   }, [systemClient.loading]);
 
-  return {
+  return (
-    garage,
+    <GarageContext.Provider
-    maker,
+      value={{
-    setMaker,
+        garage,
-    badOrder,
+        maker,
-    setBadOrder,
+        setMaker,
-    robotUpdatedAt,
+        badOrder,
-    orderUpdatedAt,
+        setBadOrder,
-  };
+        robotUpdatedAt,
+        orderUpdatedAt,
+      }}
+    >
+      {children}
+    </GarageContext.Provider>
+  );
 };