chore: reorganize client files for docker

client/src/hooks/ThemeContext.js

@@ -0,0 +1,46 @@
+//ThemeContext.js
+// source: https://plainenglish.io/blog/light-and-dark-mode-in-react-web-application-with-tailwind-css-89674496b942
+
+import React, { createContext, useState, useEffect } from 'react';
+
+const getInitialTheme = () => {
+  if (typeof window !== 'undefined' && window.localStorage) {
+    const storedPrefs = window.localStorage.getItem('color-theme');
+    if (typeof storedPrefs === 'string') {
+      return storedPrefs;
+    }
+
+    const userMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    if (userMedia.matches) {
+      return 'dark';
+    }
+  }
+
+  return 'light'; // light theme as the default;
+};
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({ initialTheme, children }) => {
+  const [theme, setTheme] = useState(getInitialTheme);
+
+  const rawSetTheme = (rawTheme) => {
+    const root = window.document.documentElement;
+    const isDark = rawTheme === 'dark';
+
+    root.classList.remove(isDark ? 'light' : 'dark');
+    root.classList.add(rawTheme);
+
+    localStorage.setItem('color-theme', rawTheme);
+  };
+
+  if (initialTheme) {
+    rawSetTheme(initialTheme);
+  }
+
+  useEffect(() => {
+    rawSetTheme(theme);
+  }, [theme]);
+
+  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
+};

client/src/hooks/useDidMountEffect.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+const useDidMountEffect = (func, deps) => {
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (didMount.current) {
+      func();
+    } else {
+      didMount.current = true;
+    }
+
+    return func;
+  }, deps);
+};
+
+export default useDidMountEffect;

client/src/hooks/useDocumentTitle.js

@@ -0,0 +1,20 @@
+// useDocumentTitle.js
+import { useRef, useEffect } from 'react';
+
+function useDocumentTitle(title, prevailOnUnmount = false) {
+  const defaultTitle = useRef(document.title);
+
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
+
+  // useEffect(
+  //   () => () => {
+  //     if (!prevailOnUnmount) {
+  //       document.title = defaultTitle.current;
+  //     }
+  //   }, []
+  // );
+}
+
+export default useDocumentTitle;