refactor(ui): ThemeProvider - extract themeName/cookie functionality

Author: vio

package-lock.json

@@ -77,6 +77,7 @@
     "@bundle-stats/utils": "4.21.7",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
+    "js-cookie": "2.2.1",
     "modern-css-reset": "1.4.0",
     "react-use": "17.6.0",
     "snarkdown": "2.0.0",

packages/ui/package.json

@@ -1,17 +1,7 @@
 import type { ReactNode } from 'react';
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useCookie } from 'react-use';
-import { wait } from '@bundle-stats/utils';
 
-// classList required timeout to allow to disable motion during the switch
-const CLASSLIST_UPDATE_TIMEOUT = 10;
-
-type ThemeName = 'light' | 'dark';
-
-const getCurrentTheme = (): ThemeName => {
-  const { matches } = window.matchMedia('(prefers-color-scheme: dark)');
-  return matches ? 'dark' : 'light';
-};
+import { getCurrentTheme, switchTheme, useCookieTheme, type ThemeName } from '../utils/theme';
 
 type ThemeContextProps = {
   name: ThemeName;
@@ -23,47 +13,35 @@ const ThemeContext = createContext<ThemeContextProps>({
   update: () => {},
 });
 
-export const ThemeProvider = ({ children }: { children: ReactNode }) => {
-  const [cookieValue, setCookieValue] = useCookie('theme');
-  const [name, setName] = useState<ThemeName>((cookieValue as ThemeName) || getCurrentTheme());
-
-  const updateClassList = useCallback(async (newTheme: ThemeName) => {
-    const htmlElm = document.querySelector('html');
-
-    htmlElm?.classList.add('no-motion');
-
-    await wait(CLASSLIST_UPDATE_TIMEOUT);
-
-    if (newTheme === 'dark') {
-      htmlElm?.classList.remove('light-theme');
-      htmlElm?.classList.add('dark-theme');
-    } else {
-      htmlElm?.classList.remove('dark-theme');
-      htmlElm?.classList.add('light-theme');
-    }
+export type ThemeProviderProps = {
+  children: ReactNode;
+};
 
-    await wait(CLASSLIST_UPDATE_TIMEOUT);
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  const { children } = props;
 
-    htmlElm?.classList.remove('no-motion');
-  }, []);
+  const [cookieValue, setCookieValue] = useCookieTheme();
+  const [theme, setTheme] = useState<ThemeName>((cookieValue as ThemeName) || getCurrentTheme());
 
-  const updateTheme = useCallback((nextTheme: ThemeName) => {
-    setName(nextTheme);
-    updateClassList(nextTheme);
-    setCookieValue(nextTheme);
-  }, []);
+  const updateTheme = useCallback(
+    (nextTheme: ThemeName) => {
+      setCookieValue(nextTheme);
+      switchTheme(nextTheme);
+    },
+    [setTheme, setCookieValue],
+  );
 
-  // Sync classList
+  // Sync classNames on load
   useEffect(() => {
-    updateClassList(name);
-  }, [name]);
+    switchTheme(theme);
+  }, [theme]);
 
   const value = useMemo(
     () => ({
-      name,
+      name: theme,
       update: updateTheme,
     }),
-    [name, updateTheme],
+    [theme, updateTheme],
   );
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

packages/ui/src/context/theme.tsx

@@ -1,3 +1,4 @@
 export * from './colors';
+export * from './theme';
 export * from './jobs';
 export * from './components';

packages/ui/src/utils/index.ts

@@ -0,0 +1,53 @@
+import { useCookie } from 'react-use';
+import Cookies from 'js-cookie';
+import { wait } from '@bundle-stats/utils';
+
+export type ThemeName = 'light' | 'dark';
+
+// classList required timeout to allow to disable motion during the switch
+const CLASSLIST_UPDATE_TIMEOUT = 10;
+
+const COOKIE_NAME = 'theme';
+
+export const getCurrentTheme = (): ThemeName => {
+  const { matches } = window.matchMedia('(prefers-color-scheme: dark)');
+  return matches ? 'dark' : 'light';
+};
+
+export const getCookieTheme = (): ThemeName | null => {
+  const nextTheme = Cookies.get(COOKIE_NAME);
+
+  if (!nextTheme) {
+    return null;
+  }
+
+  if (['light', 'dark'].includes(nextTheme)) {
+    return nextTheme as ThemeName;
+  }
+
+  return null;
+};
+
+export const switchTheme = async (newTheme: ThemeName) => {
+  const htmlElm = document.querySelector('html');
+
+  htmlElm?.classList.add('no-motion');
+
+  await wait(CLASSLIST_UPDATE_TIMEOUT);
+
+  if (newTheme === 'dark') {
+    htmlElm?.classList.remove('light-theme');
+    htmlElm?.classList.add('dark-theme');
+  } else {
+    htmlElm?.classList.remove('dark-theme');
+    htmlElm?.classList.add('light-theme');
+  }
+
+  await wait(CLASSLIST_UPDATE_TIMEOUT);
+
+  htmlElm?.classList.remove('no-motion');
+};
+
+export const useCookieTheme = () => {
+  return useCookie(COOKIE_NAME);
+};