prepare later theme toggle

src/App.tsx

@@ -3,21 +3,26 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Auth, Login, Logout, NavBar, Overview } from './components';
 import { AuthProvider, TimeProvider } from './contexts';
 import './App.css';
+import { Airport } from './components/airport';
+import { ThemeProvider } from './contexts/themecontext';
 
 const App: React.FC = () => (
   <>
     <BrowserRouter>
-      <TimeProvider>
+      <ThemeProvider>
-        <AuthProvider>
+        <TimeProvider>
-          <NavBar />
+          <AuthProvider>
-          <Routes>
+            <NavBar />
-            <Route index element={<Login />} />
+            <Routes>
-            <Route path='/auth' element={<Auth />} />
+              <Route index element={<Login />} />
-            <Route path='/overview' element={<Overview />} />
+              <Route path='/admin/airports' element={<Airport />} />
-            <Route path='/logout' element={<Logout />} />
+              <Route path='/auth' element={<Auth />} />
-          </Routes>
+              <Route path='/overview' element={<Overview />} />
-        </AuthProvider>
+              <Route path='/logout' element={<Logout />} />
-      </TimeProvider>
+            </Routes>
+          </AuthProvider>
+        </TimeProvider>
+      </ThemeProvider>
     </BrowserRouter>
   </>
 );

src/contexts/themecontext.tsx

@@ -0,0 +1,40 @@
+import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import { Session } from '../services';
+
+// TODO dynamic theming
+import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css';
+import 'primereact/resources/primereact.min.css';
+import "primeicons/primeicons.css";
+import "primeflex/primeflex.css" 
+
+const ThemeContext = React.createContext<{
+  darkMode: boolean;
+  setDarkMode: Dispatch<SetStateAction<boolean>>;
+}>({ darkMode: false, setDarkMode: () => false });
+
+export const ThemeProvider = ({ children }: { children: any }) => {
+  const [darkMode, setDarkMode] = useState<boolean>(Session.theme() === 'dark');
+  const refDarkMode = useRef<boolean>();
+  refDarkMode.current = darkMode;
+
+  //useEffect(() => {
+  //  Session.setTheme(refDarkMode.current ? 'dark' : 'light');
+  //  window.location.reload();
+  //}, [darkMode]);
+
+  //if (darkMode) {
+  //  import('primereact/resources/themes/bootstrap4-dark-blue/theme.css');
+  //} else {
+  //  import('primereact/resources/themes/bootstrap4-light-blue/theme.css');
+  //}
+
+  return (
+    <>
+      <ThemeContext.Provider value={{ darkMode, setDarkMode }}>
+        {children}
+      </ThemeContext.Provider>
+    </>
+  );
+};
+
+export default ThemeContext;

src/index.tsx

@@ -4,12 +4,6 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-import 'primereact/resources/themes/lara-light-blue/theme.css';
-import 'primereact/resources/primereact.min.css';
-import "primeicons/primeicons.css";
-import "primeflex/primeflex.css" 
-
-
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );