[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">
+            <AnchorToTab href="https://github.com/files-ui">
               <IconButton
                 style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
-              onClick={handleGoGitRepo}
+                //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}>
+  <UserProvider valorInicial={initialUserValue}>
     <MainRouter />
-  </ThemeProvider>
+  </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
@@ -126,10 +139,11 @@ function NavBarTemplate(props) {
           </Typography>
           <Box style={{ flexGrow: 1 }} />
           <Stack direction="row" spacing={1}>
+            <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}
+                  //onClick={handleGoGitRepo}
                   color="secondary"
                   aria-label="upload picture"
                   component="label"
@@ -137,6 +151,7 @@ function NavBarTemplate(props) {
                   <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({
+export const MUItheme = (modeLight = "light") =>
+  createTheme({
     palette: {
+      mode: modeLight,
       primary: {
         // light: will be calculated from palette.primary.main,
         main: "#042354",