Skip to content

Commit 18852b3

Browse files
JinSSJ3JinSSJ3
committed
[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
1 parent 9bddc30 commit 18852b3

File tree

10 files changed

+156
-52
lines changed

10 files changed

+156
-52
lines changed

‎src/components/MainPage/MainNavBar.jsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@ import { IconButton, Tooltip } from "@mui/material";
55
//import { useNavigate } from "react-router";
66
import logo_text_blue from "../../static/files-ui-logo-text-med.png";
77
import logo_text_blue_dark from "../../static/files-ui-logo-text-med-dark.png";
8+
import AnchorToTab from "../util-components/AnchorToTab";
89

910
const MainNavBar = ({
1011
darkModeOn,
1112
logo_blue,
1213
logo_blue_dark,
1314
handleDarkMode,
1415
}) => {
15-
const handleGoGitRepo = () => {
16+
/* const handleGoGitRepo = () => {
1617
window.open("https://github.com/files-ui", "_blank");
17-
};
18+
}; */
1819

1920
return (
2021
<nav className="filesui-nav">
@@ -38,15 +39,17 @@ const MainNavBar = ({
3839

3940
<div className="right-part">
4041
<Tooltip title="Go to Files-ui GitHub repo">
41-
<IconButton
42-
style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
43-
onClick={handleGoGitRepo}
44-
color="secondary"
45-
aria-label="upload picture"
46-
component="label"
47-
>
48-
<GitHubIcon /* htmlColor="white" */ />
49-
</IconButton>
42+
<AnchorToTab href="https://github.com/files-ui">
43+
<IconButton
44+
style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
45+
//onClick={handleGoGitRepo}
46+
color="secondary"
47+
aria-label="upload picture"
48+
component="label"
49+
>
50+
<GitHubIcon /* htmlColor="white" */ />
51+
</IconButton>
52+
</AnchorToTab>
5053
</Tooltip>
5154
<DarkModeLightModeButton
5255
darkModeOn={darkModeOn}

‎src/globals/contexts/UserContext.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as React from "react";
2+
import { initialUserValue } from "../initialValues/userInitialValue";
3+
import { UserFilesUi } from "../types/UserFilesUi";
4+
5+
6+
export const UserContext=
7+
React.createContext({});
8+

‎src/globals/initialValues/userInitialValue.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { UserFilesUi } from "../types/UserFilesUi";
2+
3+
export const initialUserValue:UserFilesUi={
4+
id:undefined,
5+
darkMode:false,
6+
}

‎src/globals/providers/UserProvider.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { UserContext } from "../contexts/UserContext";
2+
import * as React from "react";
3+
import { UserFilesUi } from "../types/UserFilesUi";
4+
import { FilesUIAction, userInitializer, userReducer } from "../reducers/userReducer";
5+
import { ThemeProvider } from "@emotion/react";
6+
import { MUItheme } from "../../theme/mainTheme";
7+
8+
export const UserProvider = (props: {
9+
children: React.ReactNode;
10+
valorInicial: UserFilesUi;
11+
}) => {
12+
const { children, valorInicial } = props;
13+
14+
const [usuario, dispatch]: [UserFilesUi, React.Dispatch<FilesUIAction>] =
15+
React.useReducer(userReducer, valorInicial, userInitializer);
16+
17+
React.useEffect(() => {
18+
localStorage.setItem("filesuiuser", JSON.stringify(usuario));
19+
console.log("filesuiuser", usuario);
20+
}, [usuario]);
21+
22+
return (
23+
<UserContext.Provider value={[usuario, dispatch]}>
24+
<ThemeProvider theme={MUItheme(usuario.darkMode ? "dark" : "light")}>
25+
{children}
26+
</ThemeProvider>
27+
</UserContext.Provider>
28+
);
29+
};

‎src/globals/reducers/userReducer.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { UserFilesUi } from "../types/UserFilesUi";
2+
export interface FilesUIAction {
3+
type?: string; payload?: UserFilesUi;
4+
}
5+
6+
export const userReducer = (state: UserFilesUi, action: FilesUIAction): UserFilesUi => {
7+
const { type = "", payload = {} } = action;
8+
console.log("userReducer", state, action);
9+
switch (type) {
10+
case "INICIARSESION":
11+
return { ...state, ...payload };
12+
case "TURNONLIGHT":
13+
return { ...state, darkMode: false };
14+
case "TURNOFFLIGHT":
15+
return { ...state, darkMode: true };
16+
default:
17+
return state;
18+
}
19+
};
20+
21+
export const userInitializer = () => {
22+
const usuarioEncontrado = localStorage.getItem("filesuiuser");
23+
24+
if (usuarioEncontrado !== "udefined" && usuarioEncontrado !== null) {
25+
return JSON.parse(usuarioEncontrado);
26+
} else {
27+
return {};
28+
}
29+
};

‎src/globals/types/UserFilesUi.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export type UserFilesUi={
2+
id?:string;
3+
darkMode?:boolean,
4+
}

‎src/index.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,19 @@ import ReactDOM from "react-dom/client";
33
import "./index.css";
44
import reportWebVitals from "./reportWebVitals";
55
//import MainPage from "./pages/MainPage";
6-
import { ThemeProvider } from "@mui/material/styles";
7-
import { MUItheme } from "./theme/mainTheme";
6+
/* import { ThemeProvider } from "@mui/material/styles";
7+
import { MUItheme } from "./theme/mainTheme"; */
88

99
import MainRouter from "./routes/MainRouter";
10+
import { UserProvider } from "./globals/providers/UserProvider";
11+
import { initialUserValue } from "./globals/initialValues/userInitialValue";
1012

1113
const root = ReactDOM.createRoot(document.getElementById("root"));
1214

13-
1415
root.render(
15-
<ThemeProvider theme={MUItheme}>
16-
<MainRouter />
17-
</ThemeProvider>
16+
<UserProvider valorInicial={initialUserValue}>
17+
<MainRouter />
18+
</UserProvider>
1819
);
1920

2021
// If you want to start measuring performance in your app, pass a function

‎src/pages/MainPage.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,19 @@ import { Divider } from "@mui/material";
1212
import ExtraComponentsMainPage from "../components/MainPage/SecondaryRight/ExtraComponentsMainPage";
1313
import ExtraComponentsMainPageInputButton from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton";
1414
import ExtraComponentsMainPageAvatar from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar";
15+
import { UserContext } from "../globals/contexts/UserContext";
1516

1617
const MainPage = ({ darkMode }) => {
17-
const [darkModeOn, setDarkModeOn] = React.useState(false);
18+
const [usuario, dispatch] = React.useContext(UserContext);
19+
20+
// const [darkModeOn, setDarkModeOn] = React.useState(false);
21+
const darkModeOn = usuario.darkMode;
22+
console.log("userReducer darkModeOn", darkModeOn);
1823

1924
const handleDarkMode = () => {
20-
setDarkModeOn((darkModeOn) => !darkModeOn);
25+
// setDarkModeOn((darkModeOn) => !darkModeOn);
26+
if (!darkModeOn) dispatch({ type: "TURNOFFLIGHT" });
27+
else dispatch({ type: "TURNONLIGHT" });
2128
};
2229

2330
return (

‎src/templates/NavBarTemplate.jsx‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import DarkModeLightModeButton from "../components/MainPage/DarkModeLightModeBut
1515
import MainMenuSideBar from "../components/MainMenu/MainMenuSideBar";
1616
import logo_text_blue from "../static/files-ui-logo-text-med.png";
1717
import logo_text_blue_dark from "../static/files-ui-logo-text-med-dark.png";
18+
import { UserContext } from "../globals/contexts/UserContext";
19+
import AnchorToTab from "../components/util-components/AnchorToTab";
1820

1921
const drawerWidth = 280;
2022
const StyledImage = styled("img")(({ theme }) => ({
@@ -27,23 +29,34 @@ const StyledImage = styled("img")(({ theme }) => ({
2729
},
2830
}));
2931
function NavBarTemplate(props) {
32+
const [usuario, dispatch] = React.useContext(UserContext);
33+
const darkModeOn = usuario.darkMode;
3034
//const navigate = useNavigateToTop();
31-
const { window, children, darkModeOn, handleDarkMode, selectedIndex } = props;
35+
const {
36+
window,
37+
children,
38+
/* darkModeOn, */ /* handleDarkMode, */ selectedIndex,
39+
} = props;
3240
const [mobileOpen, setMobileOpen] = React.useState(false);
3341

3442
//const [selectedIndex, setSelectedIndex] = React.useState(0);
43+
const handleDarkMode = () => {
44+
// setDarkModeOn((darkModeOn) => !darkModeOn);
45+
if (!darkModeOn) dispatch({ type: "TURNOFFLIGHT" });
46+
else dispatch({ type: "TURNONLIGHT" });
47+
};
3548

3649
const handleGoGitRepo = () => {
50+
alert("HAAA");
3751
window.open("https://github.com/files-ui", "_blank");
3852
};
53+
3954
const handleDrawerToggle = () => {
4055
setMobileOpen(!mobileOpen);
4156
};
4257

4358
const drawer = (
44-
<div
45-
46-
>
59+
<div>
4760
<Toolbar>
4861
<a href="/" style={{ textDecoration: "none" }}>
4962
<Stack
@@ -90,7 +103,7 @@ function NavBarTemplate(props) {
90103
<Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" } }}>
91104
<CssBaseline />
92105
<AppBar
93-
className="section-container"
106+
className="section-container"
94107
position="fixed"
95108
sx={{
96109
width: { sm: `calc(100% - ${drawerWidth}px)` },
@@ -126,17 +139,19 @@ function NavBarTemplate(props) {
126139
</Typography>
127140
<Box style={{ flexGrow: 1 }} />
128141
<Stack direction="row" spacing={1}>
129-
<Tooltip title="Go to Files-ui GitHub repo">
130-
<IconButton
131-
style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
132-
onClick={handleGoGitRepo}
133-
color="secondary"
134-
aria-label="upload picture"
135-
component="label"
136-
>
137-
<GitHubIcon /* htmlColor="white" */ />
138-
</IconButton>
139-
</Tooltip>
142+
<AnchorToTab href="https://github.com/files-ui">
143+
<Tooltip title="Go to Files-ui GitHub repo">
144+
<IconButton
145+
style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
146+
//onClick={handleGoGitRepo}
147+
color="secondary"
148+
aria-label="upload picture"
149+
component="label"
150+
>
151+
<GitHubIcon /* htmlColor="white" */ />
152+
</IconButton>
153+
</Tooltip>
154+
</AnchorToTab>
140155
<DarkModeLightModeButton
141156
darkModeOn={darkModeOn}
142157
onChangeDarkMode={handleDarkMode}

‎src/theme/mainTheme.js‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import { createTheme } from "@mui/material/styles";
22

3-
export const MUItheme = createTheme({
4-
palette: {
5-
primary: {
6-
// light: will be calculated from palette.primary.main,
7-
main: "#042354",
8-
// dark: will be calculated from palette.primary.main,
9-
// contrastText: will be calculated to contrast with palette.primary.main
3+
export const MUItheme = (modeLight = "light") =>
4+
createTheme({
5+
palette: {
6+
mode: modeLight,
7+
primary: {
8+
// light: will be calculated from palette.primary.main,
9+
main: "#042354",
10+
// dark: will be calculated from palette.primary.main,
11+
// contrastText: will be calculated to contrast with palette.primary.main
12+
},
13+
secondary: {
14+
light: "#0066ff",
15+
main: "#55b4f2",
16+
// dark: will be calculated from palette.secondary.main,
17+
//contrastText: '#ffcc00',
18+
},
1019
},
11-
secondary: {
12-
light: "#0066ff",
13-
main: "#55b4f2",
14-
// dark: will be calculated from palette.secondary.main,
15-
//contrastText: '#ffcc00',
20+
typography: {
21+
fontFamily: ['"Poppins", sans-serif'],
1622
},
17-
},
18-
typography: {
19-
fontFamily: ['"Poppins", sans-serif'],
20-
},
21-
});
23+
});

0 commit comments

Comments
 (0)