[WIP][FEAT]: Add darkmode in the rest of pages with context, also keeping...

[WIP][FEAT]: Add darkmode in the rest of pages with context, also keeping track of the darkmode selection. Missing to refactor some custom components to work well in darkmode

src/components/MainPage/MainNavBar.jsx

@@ -5,6 +5,7 @@ import { IconButton, Tooltip } from "@mui/material";
 //import { useNavigate } from "react-router";
 import logo_text_blue from "../../static/files-ui-logo-text-med.png";
 import logo_text_blue_dark from "../../static/files-ui-logo-text-med-dark.png";
+import AnchorToTab from "../util-components/AnchorToTab";
 
 const MainNavBar = ({
   darkModeOn,
@@ -12,9 +13,9 @@ const MainNavBar = ({
   logo_blue_dark,
   handleDarkMode,
 }) => {
-  const handleGoGitRepo = () => {
+  /*   const handleGoGitRepo = () => {
     window.open("https://github.com/files-ui", "_blank");
-  };
+  }; */
 
   return (
     <nav className="filesui-nav">
@@ -38,15 +39,17 @@ const MainNavBar = ({
 
         <div className="right-part">
           <Tooltip title="Go to Files-ui GitHub repo">
-            <IconButton
-              style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
-              onClick={handleGoGitRepo}
-              color="secondary"
-              aria-label="upload picture"
-              component="label"
-            >
-              <GitHubIcon /* htmlColor="white" */ />
-            </IconButton>
+            <AnchorToTab href="https://github.com/files-ui">
+              <IconButton
+                style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
+                //onClick={handleGoGitRepo}
+                color="secondary"
+                aria-label="upload picture"
+                component="label"
+              >
+                <GitHubIcon /* htmlColor="white" */ />
+              </IconButton>
+            </AnchorToTab>
           </Tooltip>
           <DarkModeLightModeButton
             darkModeOn={darkModeOn}

src/globals/contexts/UserContext.ts

+import * as React from "react";
+import { initialUserValue } from "../initialValues/userInitialValue";
+import { UserFilesUi } from "../types/UserFilesUi";
+
+
+export const UserContext=
+    React.createContext({});
+

src/globals/initialValues/userInitialValue.ts

+import { UserFilesUi } from "../types/UserFilesUi";
+
+export const initialUserValue:UserFilesUi={
+    id:undefined,
+    darkMode:false,
+}

src/globals/providers/UserProvider.tsx

+import { UserContext } from "../contexts/UserContext";
+import * as React from "react";
+import { UserFilesUi } from "../types/UserFilesUi";
+import { FilesUIAction, userInitializer, userReducer } from "../reducers/userReducer";
+import { ThemeProvider } from "@emotion/react";
+import { MUItheme } from "../../theme/mainTheme";
+
+export const UserProvider = (props: {
+  children: React.ReactNode;
+  valorInicial: UserFilesUi;
+}) => {
+  const { children, valorInicial } = props;
+
+  const [usuario, dispatch]: [UserFilesUi, React.Dispatch<FilesUIAction>] =
+    React.useReducer(userReducer, valorInicial, userInitializer);
+
+  React.useEffect(() => {
+    localStorage.setItem("filesuiuser", JSON.stringify(usuario));
+    console.log("filesuiuser", usuario);
+  }, [usuario]);
+
+  return (
+    <UserContext.Provider value={[usuario, dispatch]}>
+      <ThemeProvider theme={MUItheme(usuario.darkMode ? "dark" : "light")}>
+        {children}
+      </ThemeProvider>
+    </UserContext.Provider>
+  );
+};

src/globals/reducers/userReducer.ts

+import { UserFilesUi } from "../types/UserFilesUi";
+export interface FilesUIAction {
+  type?: string; payload?: UserFilesUi;
+}
+
+export const userReducer = (state: UserFilesUi, action: FilesUIAction): UserFilesUi => {
+  const { type = "", payload = {} } = action;
+  console.log("userReducer", state, action);
+  switch (type) {
+    case "INICIARSESION":
+      return { ...state, ...payload };
+    case "TURNONLIGHT":
+      return { ...state, darkMode: false };
+    case "TURNOFFLIGHT":
+      return { ...state, darkMode: true };
+    default:
+      return state;
+  }
+};
+
+export const userInitializer = () => {
+  const usuarioEncontrado = localStorage.getItem("filesuiuser");
+
+  if (usuarioEncontrado !== "udefined" && usuarioEncontrado !== null) {
+    return JSON.parse(usuarioEncontrado);
+  } else {
+    return {};
+  }
+};

src/globals/types/UserFilesUi.ts

+export type UserFilesUi={
+    id?:string;
+    darkMode?:boolean,
+}
\ No newline at end of file

src/index.js

@@ -3,18 +3,19 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 //import MainPage from "./pages/MainPage";
-import { ThemeProvider } from "@mui/material/styles";
-import { MUItheme } from "./theme/mainTheme";
+/* import { ThemeProvider } from "@mui/material/styles";
+import { MUItheme } from "./theme/mainTheme"; */
 
 import MainRouter from "./routes/MainRouter";
+import { UserProvider } from "./globals/providers/UserProvider";
+import { initialUserValue } from "./globals/initialValues/userInitialValue";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
-
 root.render(
-  <ThemeProvider theme={MUItheme}>
-    <MainRouter  />
-  </ThemeProvider>
+  <UserProvider valorInicial={initialUserValue}>
+    <MainRouter />
+  </UserProvider>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/MainPage.jsx

@@ -12,12 +12,19 @@ import { Divider } from "@mui/material";
 import ExtraComponentsMainPage from "../components/MainPage/SecondaryRight/ExtraComponentsMainPage";
 import ExtraComponentsMainPageInputButton from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton";
 import ExtraComponentsMainPageAvatar from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar";
+import { UserContext } from "../globals/contexts/UserContext";
 
 const MainPage = ({ darkMode }) => {
-  const [darkModeOn, setDarkModeOn] = React.useState(false);
+  const [usuario, dispatch] = React.useContext(UserContext);
+
+  // const [darkModeOn, setDarkModeOn] = React.useState(false);
+  const darkModeOn = usuario.darkMode;
+  console.log("userReducer darkModeOn", darkModeOn);
 
   const handleDarkMode = () => {
-    setDarkModeOn((darkModeOn) => !darkModeOn);
+    // setDarkModeOn((darkModeOn) => !darkModeOn);
+    if (!darkModeOn) dispatch({ type: "TURNOFFLIGHT" });
+    else dispatch({ type: "TURNONLIGHT" });
   };
 
   return (

src/templates/NavBarTemplate.jsx

@@ -15,6 +15,8 @@ import DarkModeLightModeButton from "../components/MainPage/DarkModeLightModeBut
 import MainMenuSideBar from "../components/MainMenu/MainMenuSideBar";
 import logo_text_blue from "../static/files-ui-logo-text-med.png";
 import logo_text_blue_dark from "../static/files-ui-logo-text-med-dark.png";
+import { UserContext } from "../globals/contexts/UserContext";
+import AnchorToTab from "../components/util-components/AnchorToTab";
 
 const drawerWidth = 280;
 const StyledImage = styled("img")(({ theme }) => ({
@@ -27,23 +29,34 @@ const StyledImage = styled("img")(({ theme }) => ({
   },
 }));
 function NavBarTemplate(props) {
+  const [usuario, dispatch] = React.useContext(UserContext);
+  const darkModeOn = usuario.darkMode;
   //const navigate = useNavigateToTop();
-  const { window, children, darkModeOn, handleDarkMode, selectedIndex } = props;
+  const {
+    window,
+    children,
+    /* darkModeOn, */ /* handleDarkMode, */ selectedIndex,
+  } = props;
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
   //const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const handleDarkMode = () => {
+    // setDarkModeOn((darkModeOn) => !darkModeOn);
+    if (!darkModeOn) dispatch({ type: "TURNOFFLIGHT" });
+    else dispatch({ type: "TURNONLIGHT" });
+  };
 
   const handleGoGitRepo = () => {
+    alert("HAAA");
     window.open("https://github.com/files-ui", "_blank");
   };
+
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };
 
   const drawer = (
-    <div 
-   
-    >
+    <div>
       <Toolbar>
         <a href="/" style={{ textDecoration: "none" }}>
           <Stack
@@ -90,7 +103,7 @@ function NavBarTemplate(props) {
     <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" } }}>
       <CssBaseline />
       <AppBar
-       className="section-container"
+        className="section-container"
         position="fixed"
         sx={{
           width: { sm: `calc(100% - ${drawerWidth}px)` },
@@ -126,17 +139,19 @@ function NavBarTemplate(props) {
           </Typography>
           <Box style={{ flexGrow: 1 }} />
           <Stack direction="row" spacing={1}>
-            <Tooltip title="Go to Files-ui GitHub repo">
-              <IconButton
-                style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
-                onClick={handleGoGitRepo}
-                color="secondary"
-                aria-label="upload picture"
-                component="label"
-              >
-                <GitHubIcon /* htmlColor="white" */ />
-              </IconButton>
-            </Tooltip>
+            <AnchorToTab href="https://github.com/files-ui">
+              <Tooltip title="Go to Files-ui GitHub repo">
+                <IconButton
+                  style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
+                  //onClick={handleGoGitRepo}
+                  color="secondary"
+                  aria-label="upload picture"
+                  component="label"
+                >
+                  <GitHubIcon /* htmlColor="white" */ />
+                </IconButton>
+              </Tooltip>
+            </AnchorToTab>
             <DarkModeLightModeButton
               darkModeOn={darkModeOn}
               onChangeDarkMode={handleDarkMode}

src/theme/mainTheme.js

 import { createTheme } from "@mui/material/styles";
 
-export const MUItheme = createTheme({
-  palette: {
-    primary: {
-      // light: will be calculated from palette.primary.main,
-      main: "#042354",
-      // dark: will be calculated from palette.primary.main,
-      // contrastText: will be calculated to contrast with palette.primary.main
+export const MUItheme = (modeLight = "light") =>
+  createTheme({
+    palette: {
+      mode: modeLight,
+      primary: {
+        // light: will be calculated from palette.primary.main,
+        main: "#042354",
+        // dark: will be calculated from palette.primary.main,
+        // contrastText: will be calculated to contrast with palette.primary.main
+      },
+      secondary: {
+        light: "#0066ff",
+        main: "#55b4f2",
+        // dark: will be calculated from palette.secondary.main,
+        //contrastText: '#ffcc00',
+      },
     },
-    secondary: {
-      light: "#0066ff",
-      main: "#55b4f2",
-      // dark: will be calculated from palette.secondary.main,
-      //contrastText: '#ffcc00',
+    typography: {
+      fontFamily: ['"Poppins", sans-serif'],
     },
-  },
-  typography: {
-    fontFamily: ['"Poppins", sans-serif'],
-  },
-});
+  });