add dark mode toggle (#7)

Co-authored-by: lukqw <[email protected]>

packages/frontend/src/Routes.tsx

@@ -7,20 +7,29 @@ import ShowNote from "./content/ShowNote";
 import NotFound from "./content/NotFound";
 
 import { BASE_URL } from "./config";
+import { useThemeContext } from "./hooks/useThemeContext";
 
-const   Routes = () => (
-  <div className="mt-md-4 d-flex flex-column justify-content-center">
-    <Suspense fallback={<div>Loading...</div>}>
-      <BrowserRouter basename={BASE_URL}>
-        <RouterRoutes>
-          <Route path="/" element={<ListNotes/>} />
-          <Route path="/note/new" element={<CreateNote/>} />
-          <Route path="/notes/:noteId" element={<ShowNote/>} />
-          <Route element={<NotFound/>} />
-        </RouterRoutes>
-      </BrowserRouter>
-    </Suspense>
-  </div>
-);
+const   Routes = () => {
+  const { darkMode } = useThemeContext();
+
+  return (
+    <div className={`${darkMode ? 'bg-dark' : ''}`} style={{ height: "100%", overflowY: 'hidden', minHeight: '100vh' }}>
+      <div className="container" >
+        <div className="mt-md-4 d-flex flex-column justify-content-center">
+          <Suspense fallback={<div>Loading...</div>}>
+            <BrowserRouter basename={BASE_URL}>
+              <RouterRoutes>
+                <Route path="/" element={<ListNotes/>} />
+                <Route path="/note/new" element={<CreateNote/>} />
+                <Route path="/notes/:noteId" element={<ShowNote/>} />
+                <Route element={<NotFound/>} />
+              </RouterRoutes>
+            </BrowserRouter>
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  );
+}
 
 export { Routes };

packages/frontend/src/components/PageContainer.tsx

@@ -1,14 +1,20 @@
 import React from "react";
 import { Card } from "react-bootstrap";
+import { ThemeSwitch } from "../content/ThemeSwitch";
 
 const PageContainer = (props: {
   header: React.ReactNode;
   children: React.ReactNode;
-}) => (
-  <Card>
-    <Card.Header>{props.header}</Card.Header>
-    <Card.Body>{props.children}</Card.Body>
-  </Card>
-);
+}) => {
+  return (
+    <>
+    <Card>
+      <Card.Header>{props.header}</Card.Header>
+      <Card.Body>{props.children}</Card.Body>
+    </Card>
+    <ThemeSwitch />
+    </>
+  )
+};
 
 export { PageContainer };

packages/frontend/src/content/ThemeSwitch.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { useThemeContext } from "../hooks/useThemeContext";
+import { Form } from "react-bootstrap";
+
+
+export const ThemeSwitch = () => {
+  const { darkMode, setDarkMode } = useThemeContext();
+
+  const toggleTheme = () => {
+    setDarkMode(!darkMode);
+  };
+
+  return (
+    <Form style={{paddingTop: '1rem', display: 'flex', justifyContent: 'flex-end'}}>
+      <Form.Check // prettier-ignore
+        type="switch"
+        onClick={toggleTheme}
+        id="custom-switch"
+        defaultChecked={darkMode}
+        style={{color: darkMode ? 'white' : ''}}
+        label="Dark Mode"
+      />
+    </Form>
+  );
+}

packages/frontend/src/hooks/usePersistedState.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+
+// to store the state to local storage
+export default function usePersistedState(key: string, defaultValue: any) {
+  const [state, setState] = useState(() => {
+    return JSON.parse(localStorage.getItem(key) ?? '{}') || defaultValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(state));
+  }, [key, state]);
+
+  return [state, setState];
+}

packages/frontend/src/hooks/useThemeContext.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { createContext, useContext, ReactElement } from "react";
+import usePersistedState from "./usePersistedState";
+
+type ThemeContextValue = {
+  darkMode: boolean;
+  setDarkMode: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+// register the context
+const ThemeContext = createContext<ThemeContextValue>(undefined as any);
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const ThemeProvider = ({ children }: Props): ReactElement => {
+  /** usePersistedState for storing state in local store */
+  const [darkMode, setDarkMode] = usePersistedState("darkmode", false);
+
+  return (
+    <ThemeContext.Provider value={{ darkMode, setDarkMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+// export a custom hook to use this specific context
+export const useThemeContext = (): ThemeContextValue => {
+  return useContext(ThemeContext);
+}
+

packages/frontend/src/index.tsx

@@ -1,8 +1,9 @@
 import { Buffer } from "buffer";
 import process from "process";
 import React from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 import { Routes } from "./Routes";
+import { ThemeProvider } from "./hooks/useThemeContext";
 
 // Polyfills required for MicrophoneStream
 if (typeof (window as any).global === "undefined") {
@@ -15,11 +16,10 @@ if (typeof (window as any).process === "undefined") {
   (window as any).process = process;
 }
 
-const container = document.getElementById("root");
-// @ts-ignore
-const root = createRoot(container);
-root.render(
-  <div className="container" style={{ height: "100vh" }}>
-    <Routes />
-  </div>
+
+ReactDOM.render(
+    <ThemeProvider>
+      <Routes />
+    </ThemeProvider>,
+    document.getElementById("root")
 );