jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 01:26:37 -04:00
Code Issues Activity

actually listen to react-hooks/exhaustive-deps warning

Browse Source
This commit is contained in:
Jake Jarvis
2022-04-21 18:10:03 -04:00
parent 008bb3213b
commit 831139c132
11 changed files with 206 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
contexts/ThemeContext.tsx
View File

@ -1,5 +1,5 @@
import { createContext, useCallback, useEffect, useState, useRef } from "react";
import { useLocalStorage } from "../hooks/use-local-storage";
import { useLocalStorage } from "react-use";
import { darkModeQuery, themeStorageKey } from "../lib/config/themes";
import type { Context, PropsWithChildren } from "react";
@ -30,7 +30,7 @@ export const ThemeProvider = ({
enableColorScheme?: boolean;
}>) => {
// keep track of if/when the user has set their theme *here*:
const [preferredTheme, setPreferredTheme] = useLocalStorage(themeStorageKey);
const [preferredTheme, setPreferredTheme] = useLocalStorage(themeStorageKey, null, { raw: true });
// save the end result no matter how we got there (by preference or by system):
const [resolvedTheme, setResolvedTheme] = useState("");
// TODO: remove this and do related stuff more gracefully
@ -49,7 +49,7 @@ export const ThemeProvider = ({
d.classList.remove(...all);
d.classList.add(classNames[theme]);
},
[] // eslint-disable-line react-hooks/exhaustive-deps
[classNames, setPreferredTheme]
);
// memoize browser media query handler
@ -62,7 +62,7 @@ export const ThemeProvider = ({
// only actually change the theme if preference is unset (and *don't* save new theme to storage)
if (!preferredTheme || !validThemes.includes(preferredTheme)) changeTheme(systemTheme, false);
},
[preferredTheme] // eslint-disable-line react-hooks/exhaustive-deps
[changeTheme, preferredTheme, validThemes]
);
// ref hack to avoid adding handleMediaQuery as a dependency
const mediaListener = useRef(handleMediaQuery);
@ -97,7 +97,7 @@ export const ThemeProvider = ({
// force save to local storage
changeTheme(theme, true);
},
[] // eslint-disable-line react-hooks/exhaustive-deps
[changeTheme]
),
preferredTheme: validThemes.includes(preferredTheme) ? preferredTheme : undefined,
resolvedTheme: validThemes.includes(preferredTheme) ? preferredTheme : resolvedTheme,