feature/IO-1113-Online-Dark-Mode - Toggle / Local storage solution

client/src/App/App.container.jsx

@@ -2,15 +2,19 @@ import { ApolloProvider } from "@apollo/client";
 import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
+import { connect, useSelector } from "react-redux";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 import * as Sentry from "@sentry/react";
 import getTheme from "./themeProvider";
 import { CookiesProvider } from "react-cookie";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../redux/user/user.selectors.js";
+import { selectDarkMode } from "../redux/application/application.selectors";
+import { setDarkMode } from "../redux/application/application.actions";
 
 // Base Split configuration
 const config = {
@@ -32,17 +36,47 @@ function SplitClientProvider({ children }) {
   return children;
 }
 
-function AppContainer() {
-  const { t } = useTranslation();
-  const [isDarkMode, setIsDarkMode] = useState(true); // Manage dark mode state
-  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]); // Memoize theme
+const mapDispatchToProps = (dispatch) => ({
+  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode))
+});
 
-  // Set data-theme attribute on document root
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+function AppContainer({ currentUser, setDarkMode }) {
+  const { t } = useTranslation();
+  const isDarkMode = useSelector(selectDarkMode);
+  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
+
+  // Update data-theme attribute when dark mode changes
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
-    return () => document.documentElement.removeAttribute("data-theme"); // Cleanup
+    return () => document.documentElement.removeAttribute("data-theme");
   }, [isDarkMode]);
 
+  // Sync Redux darkMode with localStorage on user change
+  useEffect(() => {
+    if (currentUser?.uid) {
+      const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
+      if (savedMode !== null) {
+        setDarkMode(JSON.parse(savedMode));
+      } else {
+        setDarkMode(false); // default to light mode
+      }
+    } else {
+      setDarkMode(false);
+    }
+    // eslint-disable-next-line
+  }, [currentUser?.uid]);
+
+  // Persist darkMode to localStorage when it or user changes
+  useEffect(() => {
+    if (currentUser?.uid) {
+      localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));
+    }
+  }, [isDarkMode, currentUser?.uid]);
+
   return (
     <CookiesProvider>
       <ApolloProvider client={client}>
@@ -60,10 +94,6 @@ function AppContainer() {
           <SplitFactoryProvider config={config}>
             <SplitClientProvider>
               <App />
-              {/* Optional: Button to toggle dark mode for testing */}
-              <button onClick={() => setIsDarkMode(!isDarkMode)}>
-                {t("general.toggleDarkMode")}
-              </button>
             </SplitClientProvider>
           </SplitFactoryProvider>
         </ConfigProvider>
@@ -72,4 +102,4 @@ function AppContainer() {
   );
 }
 
-export default Sentry.withProfiler(AppContainer);
+export default Sentry.withProfiler(connect(mapStateToProps, mapDispatchToProps)(AppContainer));