diff --git a/src/components/MainPage/MainNavBar.jsx b/src/components/MainPage/MainNavBar.jsx
index affa1adbcb748b40c0c04ce078de202cee660c39..d04521603e058d95a8570b418661f34bf202777d 100644
--- a/src/components/MainPage/MainNavBar.jsx
+++ b/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}
diff --git a/src/globals/contexts/UserContext.ts b/src/globals/contexts/UserContext.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b8e7421dd75e9477da2a2fbaa3d142db3e4c0496
--- /dev/null
+++ b/src/globals/contexts/UserContext.ts
@@ -0,0 +1,8 @@
+import * as React from "react";
+import { initialUserValue } from "../initialValues/userInitialValue";
+import { UserFilesUi } from "../types/UserFilesUi";
+
+
+export const UserContext=
+ React.createContext({});
+
diff --git a/src/globals/initialValues/userInitialValue.ts b/src/globals/initialValues/userInitialValue.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9e15e380da56fe636f94ead879c7807661a5c844
--- /dev/null
+++ b/src/globals/initialValues/userInitialValue.ts
@@ -0,0 +1,6 @@
+import { UserFilesUi } from "../types/UserFilesUi";
+
+export const initialUserValue:UserFilesUi={
+ id:undefined,
+ darkMode:false,
+}
diff --git a/src/globals/providers/UserProvider.tsx b/src/globals/providers/UserProvider.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f065bfcc9f8da44475171269eca903b5e851ee7f
--- /dev/null
+++ b/src/globals/providers/UserProvider.tsx
@@ -0,0 +1,29 @@
+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>
+ );
+};
diff --git a/src/globals/reducers/userReducer.ts b/src/globals/reducers/userReducer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86c9d6ab8c9b1839a33eebe1ac94be54b7ed45ee
--- /dev/null
+++ b/src/globals/reducers/userReducer.ts
@@ -0,0 +1,29 @@
+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 {};
+ }
+};
diff --git a/src/globals/types/UserFilesUi.ts b/src/globals/types/UserFilesUi.ts
new file mode 100644
index 0000000000000000000000000000000000000000..98523707d081e934fb54a08ad09ca6b235e47be4
--- /dev/null
+++ b/src/globals/types/UserFilesUi.ts
@@ -0,0 +1,4 @@
+export type UserFilesUi={
+ id?:string;
+ darkMode?:boolean,
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 1c6299df607faf3edb0fde9dc2464aa195ea0957..c1c6265b9698acde1b59ba29ce83040ac5a8f533 100644
--- a/src/index.js
+++ b/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
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index d2f99b764bd4fc66319c4eb4a994b6352081e2f6..96f008408399820e538b8ea5614f7f540e193a75 100644
--- a/src/pages/MainPage.jsx
+++ b/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 (
diff --git a/src/templates/NavBarTemplate.jsx b/src/templates/NavBarTemplate.jsx
index 968fbfb48e32c9d694489b16e2c31d23819123bf..c1ab7ebde89e2d77e9d78e8e09a58b51f18c7da9 100644
--- a/src/templates/NavBarTemplate.jsx
+++ b/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}
diff --git a/src/theme/mainTheme.js b/src/theme/mainTheme.js
index ee432ee8e784b2ee921fd18b94cb7c742cb90c9e..7283c812afd6f3229667610dbc5a1930ab101964 100644
--- a/src/theme/mainTheme.js
+++ b/src/theme/mainTheme.js
@@ -1,21 +1,23 @@
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'],
- },
-});
+ });