mazeof-react
Version:
some goods for your react
51 lines (50 loc) • 1.84 kB
JavaScript
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import { useCookies } from "react-cookie";
import { resolveTheme } from "../themeResolver";
import { THEME_DARK, THEME_DEFAULT } from "../constants";
import { usePreferences } from "../UsePreferences";
const ONE_MINUTE_MILLIS = 1000 * 60;
const resolveThemeEvery = ({ milliseconds, cookies, setTheme, cookiesKey, }) => {
if (cookies[cookiesKey]?.sun) {
const interval = setInterval(() => {
setTheme(resolveTheme(cookies, cookiesKey));
}, milliseconds);
return () => clearInterval(interval);
}
};
const applyNextMode = (isDarkMode, setTheme, setPreferences) => {
const newtheme = isDarkMode ? THEME_DARK : THEME_DEFAULT;
setTheme(newtheme);
setPreferences("theme", newtheme);
};
export const useNightShiftAndCookies = (cookiesKey) => {
// Instentiate themes stateManagement and cookies
const [cookies, setCookie] = useCookies([cookiesKey]);
const [theme, setTheme] = useState(resolveTheme(cookies, cookiesKey));
const [isDarkMode, setIsDarkMode] = useState(theme === THEME_DEFAULT);
const { setPreferences } = usePreferences(cookies, setCookie, cookiesKey);
const toggleLightMode = () => {
setIsDarkMode((isDarkMode) => !isDarkMode);
};
const handleNightSwitch = () => {
toggleLightMode();
applyNextMode(isDarkMode, setTheme, setPreferences);
};
useEffect(() => {
resolveThemeEvery({ milliseconds: ONE_MINUTE_MILLIS, cookies, setTheme, cookiesKey });
}, []);
return {
themes: {
theme,
isDarkMode,
setTheme,
handleNightSwitch,
},
cookiesPref: {
cookies,
setCookie,
setPreferences,
},
};
};