muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed theme memoization

Browse source
This commit is contained in:
Fedor Katurov 2022-11-21 15:56:35 +06:00
parent 31b59207c1
commit 260fcfc0c5
1 changed files with 19 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/utils/providers/ThemeProvider.tsx
View file

@ -1,6 +1,7 @@
import React, { import React, {
createContext, createContext,
FC, FC,
useCallback,
useContext, useContext,
useEffect, useEffect,
useMemo, useMemo,
@ -23,8 +24,23 @@ const themeClass: Record<Theme, string> = {
}; };
const ThemeProvider: FC<ProvidersProps> = ({ children }) => { const ThemeProvider: FC<ProvidersProps> = ({ children }) => {
const [theme, setTheme] = useState(Theme.Default); const [theme, setThemeValue] = useState(Theme.Default);
const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
const setTheme = useCallback(
(val: Theme) => {
if (themeClass[theme]) {
document.documentElement.classList.remove(themeClass[theme]);
}
localStorage.setItem('vault__theme', val);
setThemeValue(val);
if (themeClass[val]) {
document.documentElement.classList.add(themeClass[val]);
}
},
[theme],
);
useEffect(() => { useEffect(() => {
const stored = localStorage.getItem('vault__theme'); const stored = localStorage.getItem('vault__theme');
@ -34,19 +50,7 @@ const ThemeProvider: FC<ProvidersProps> = ({ children }) => {
setTheme(stored as Theme); setTheme(stored as Theme);
}, []); }, []);
useEffect(() => { const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
if (!themeClass[theme]) {
return;
}
document.documentElement.classList.add(themeClass[theme]);
try {
localStorage.setItem('vault__theme', theme);
} catch {}
return () => document.documentElement.classList.remove(themeClass[theme]);
}, [theme]);
return ( return (
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider> <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>