diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 2f61913d..ff4ed6fc 100644 --- a/frontend/src/App.tsx +++ b/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 { AppContext, useAppStore } from './contexts/AppContext'; +import { CssBaseline } from '@mui/material'; 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 { FederationContext, useFederationStore } from './contexts/FederationContext'; +import { AppContextProvider } from './contexts/AppContext'; +import { GarageContextProvider } from './contexts/GarageContext'; +import { FederationContextProvider } from './contexts/FederationContext'; const App = (): JSX.Element => { - const appStore = useAppStore(); - const garageStore = useGarageStore(); - const federationStore = useFederationStore(); - return ( - - - - - - {window.NativeRobosats === undefined ? : } -
- - - - + + + + + {window.NativeRobosats === undefined ? : } +
+ + + diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx index e0b94f12..9306a24a 100644 --- a/frontend/src/basic/NavBar/NavBar.tsx +++ b/frontend/src/basic/NavBar/NavBar.tsx @@ -25,8 +25,6 @@ const NavBar = (): JSX.Element => { useContext(AppContext); const { garage, orderUpdatedAt, robotUpdatedAt } = useContext(GarageContext); - console.log('On NavBar "page" is:', page); - const navigate = useNavigate(); const location = useLocation(); const smallBar = windowSize?.width < 50; diff --git a/frontend/src/contexts/AppContext.ts b/frontend/src/contexts/AppContext.tsx similarity index 87% rename from frontend/src/contexts/AppContext.ts rename to frontend/src/contexts/AppContext.tsx index 0a14402a..5b50cb17 100644 --- a/frontend/src/contexts/AppContext.ts +++ b/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(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 { - theme, - torStatus, - settings, - setSettings, - page, - setPage, - slideDirection, - setSlideDirection, - navbarHeight, - open, - setOpen, - windowSize, - clientVersion, - acknowledgedWarning, - setAcknowledgedWarning, - hostUrl, - origin, - fav, - setFav, - }; + return ( + + {children} + + ); }; diff --git a/frontend/src/contexts/FederationContext.ts b/frontend/src/contexts/FederationContext.tsx similarity index 91% rename from frontend/src/contexts/FederationContext.ts rename to frontend/src/contexts/FederationContext.tsx index 43aa84c2..5e433655 100644 --- a/frontend/src/contexts/FederationContext.ts +++ b/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(initialFederationContext); -export const useFederationStore = (): UseFederationStoreType => { +export const FederationContextProvider = ({ + children, +}: FederationContextProviderProps): JSX.Element => { const { settings, page, origin, hostUrl, open, torStatus } = useContext(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)); @@ -165,13 +170,19 @@ export const useFederationStore = (): UseFederationStoreType => { void federation.fetchRobot(garage, slot.token); // create new robot with existing token and keys (on network and coordinator change) } } - }, [open.profile, hostUrl, robotUpdatedAt]); + }, [open.profile, hostUrl]); - return { - federation, - sortedCoordinators, - setDelay, - coordinatorUpdatedAt, - federationUpdatedAt, - }; + return ( + + {children} + + ); }; diff --git a/frontend/src/contexts/GarageContext.ts b/frontend/src/contexts/GarageContext.tsx similarity index 73% rename from frontend/src/contexts/GarageContext.ts rename to frontend/src/contexts/GarageContext.tsx index 6c1c4db5..6f6ae270 100644 --- a/frontend/src/contexts/GarageContext.ts +++ b/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(initialGarageContext); -export const useGarageStore = (): UseGarageStoreType => { +export const GarageContextProvider = ({ children }: GarageContextProviderProps): JSX.Element => { // All garage data structured const [garage] = useState(initialGarageContext.garage); const [maker, setMaker] = useState(initialGarageContext.maker); @@ -52,13 +63,19 @@ export const useGarageStore = (): UseGarageStoreType => { } }, [systemClient.loading]); - return { - garage, - maker, - setMaker, - badOrder, - setBadOrder, - robotUpdatedAt, - orderUpdatedAt, - }; + return ( + + {children} + + ); };