routing from root component

app/client/web/src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Root } from './root/Root'
 import { Access } from './access/Access'
+import { Node } from './node/Node'
 import { Session } from './session/Session'
 import { useColorScheme } from '@mantine/hooks'
 import { createTheme, MantineProvider, virtualColor } from '@mantine/core'
@@ -57,9 +58,15 @@ const theme = createTheme({
 })
 
 const router = createBrowserRouter([
-  { path: '/', element: <Root /> },
-  { path: 'access', element: <Access /> },
-  { path: 'session', element: <Session /> },
+  {
+    element: <Root />,
+    children: [
+      { path: '/', element: <></> },
+      { path: 'access', element: <Access /> },
+      { path: 'session', element: <Session /> },
+      { path: 'node', element: <Node /> },
+    ],
+  }
 ])
 
 export function App() {
@@ -67,7 +74,7 @@ export function App() {
   const defaultScheme = useColorScheme('light', {
     getInitialValueInEffect: false,
   })
-  const scheme = selectedScheme ? selectedScheme : defaultScheme
+  const scheme = selectedScheme === 'light' ? 'light' : selectedScheme === 'dark' ? 'dark' : defaultScheme
 
   return (
     <MantineProvider forceColorScheme={scheme} theme={theme}>

app/client/web/src/context/useAppContext.hook.ts

@@ -18,7 +18,6 @@ export function useAppContext() {
     const sdk = new DatabagSDK(null)
     const store = new SessionStore()
     const session: Session | null = await sdk.initOnlineStore(store)
-    console.log(session)
     if (session) {
       updateState({ sdk, session })
     } else {

app/client/web/src/node/Node.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export function Node() {
+  return (
+    <div>
+      <span>Node</span>
+    </div>
+  )
+}

app/client/web/src/root/Root.tsx

@@ -1,33 +1,12 @@
 import React from 'react'
 import { TextInput, Button } from '@mantine/core'
-import { useMantineTheme } from '@mantine/core'
+import { useRoot } from './useRoot.hook'
+import { Outlet } from 'react-router-dom'
 
 export function Root() {
-  const theme = useMantineTheme()
-
-  const press = () => {
-    console.log('PRESSED')
-  }
+  const { state, actions } = useRoot()
 
   return (
-    <div>
-      <span>ROOT</span>
-      <Button variant="danger" onClick={press}>
-        Download
-      </Button>
-      <TextInput
-        color="lime.4"
-        label="Input label"
-        description="Input description"
-        placeholder="Input placeholder"
-      />
-      <div
-        style={{
-          width: 100,
-          height: 100,
-          backgroundColor: theme.colors.surface[8],
-        }}
-      />
-    </div>
+    <Outlet />
   )
 }

app/client/web/src/root/useRoot.hook.ts

@@ -0,0 +1,45 @@
+import { useState, useContext, useEffect } from 'react'
+import { AppContext } from '../context/AppContext'
+import { ContextType } from '../context/ContextType'
+import { useLocation, useNavigate } from "react-router-dom";
+
+export function useRoot() {
+  const app = useContext(AppContext) as ContextType
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [ state, setState ] = useState({
+    pathname: '',
+  })
+
+  const updateState = (value: any) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+
+  useEffect(() => {
+    const { pathname } = location;
+    updateState({ pathname });
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (state.pathname === '/session' && !app.state.session) {
+      navigate('/');
+    }
+    else if (state.pathname === '/node' && !app.state.node) {
+      navigate('/');
+    }
+    else if (state.pathname === '/' && !app.state.session && !app.state.node) {
+      navigate('/access');
+    }
+    else if (state.pathname !== '/node' && app.state.node) {
+      navigate('/node');
+    }
+    else if (state.pathname !== '/session' && app.state.session) {
+      navigate('/session');
+    }
+  }, [state.pathname, app.state.session, app.state.node]);
+
+  const actions = {};
+
+  return { state, actions };  
+}
+