mazeof-react/hooks/UseNightShiftAndCookies/index.ts

some goods for your react

/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import { useCookies } from "react-cookie";
import { resolveTheme } from "../themeResolver";
import * as types from "../nightShiftTypes";
import { setPreferences } from "../cookiesTypes"
import { THEME_DARK, THEME_DEFAULT } from "../constants";
import { usePreferences } from "../UsePreferences";

const ONE_MINUTE_MILLIS = 1000 * 60;

const resolveThemeEvery = ({
	milliseconds,
	cookies,
	setTheme,
	cookiesKey,
}: types.ThemeResolution) => {
	if (cookies[cookiesKey]?.sun) {
		const interval = setInterval(() => {
			setTheme(resolveTheme(cookies, cookiesKey));
		}, milliseconds);
		return () => clearInterval(interval);
	}
};

const applyNextMode = (
	isDarkMode: boolean,
	setTheme: types.SetTheme,
	setPreferences: setPreferences
) => {
	const newtheme = isDarkMode ? THEME_DARK : THEME_DEFAULT;
	setTheme(newtheme);
	setPreferences("theme", newtheme);
};

export const useNightShiftAndCookies: (
	cookiesKey: string
) => types.UseNightShiftTypes = (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,
		},
	};
};