fix(settings): resolve theme persistence bug after hard refresh

src/hooks/use-initial-theme.ts

@@ -11,8 +11,8 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
   const { subplebbitAddress: paramsSubplebbitAddress, accountCommentIndex } = useParams<{ subplebbitAddress: string; accountCommentIndex?: string }>();
   const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
   const pendingPost = useAccountComment({ commentIndex });
-  const getTheme = useThemeStore((state) => state.getTheme);
+  // Subscribe to the actual themes data, not just functions
-  const currentTheme = useThemeStore((state) => state.currentTheme);
+  const themes = useThemeStore((state) => state.themes);
   const subplebbits = useDefaultSubplebbits();
   const params = useParams();
   const isInHomeView = isHomeView(location.pathname);
@@ -30,23 +30,23 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
       if (subplebbitAddress) {
         const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
         if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
-          theme = getTheme('nsfw', false) || 'yotsuba';
+          theme = themes.nsfw || 'yotsuba';
         } else {
-          theme = getTheme('sfw', false) || 'yotsuba-b';
+          theme = themes.sfw || 'yotsuba-b';
         }
       } else {
-        theme = currentTheme || 'yotsuba';
+        theme = 'yotsuba';
       }
     } else if (isInAllView || isInSubscriptionsView || isInModView) {
-      theme = getTheme('sfw', false) || 'yotsuba-b'; // Add 'false' parameter
+      theme = themes.sfw || 'yotsuba-b';
     } else if (isInHomeView || isInNotFoundView) {
       theme = 'yotsuba';
     } else if (paramsSubplebbitAddress) {
       const subplebbit = subplebbits.find((s) => s.address === paramsSubplebbitAddress);
       if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
-        theme = getTheme('nsfw', false) || 'yotsuba'; // Add 'false' parameter
+        theme = themes.nsfw || 'yotsuba';
       } else {
-        theme = getTheme('sfw', false) || 'yotsuba-b'; // Add 'false' parameter
+        theme = themes.sfw || 'yotsuba-b';
       }
     }
 
@@ -59,8 +59,7 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
     isInHomeView,
     isInNotFoundView,
     paramsSubplebbitAddress,
-    getTheme,
+    themes,
-    currentTheme,
     subplebbits,
     pendingPostSubplebbitAddress,
     pendingPost,

src/hooks/use-theme.ts

@@ -1,9 +1,8 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useMemo } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { isAllView, isSubscriptionsView, isModView } from '../lib/utils/view-utils';
 import useThemeStore from '../stores/use-theme-store';
 import { useDefaultSubplebbits } from './use-default-subplebbits';
-import useInitialTheme from './use-initial-theme';
 import { nsfwTags } from '../constants/nsfwTags';
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import useSpecialThemeStore from '../stores/use-special-theme-store';
@@ -28,13 +27,10 @@ const useTheme = (): [string, (theme: string) => void] => {
   const { isEnabled, setIsEnabled } = useSpecialThemeStore();
 
   const setThemeStore = useThemeStore((state) => state.setTheme);
-  const getTheme = useThemeStore((state) => state.getTheme);
+  // Subscribe to the actual themes data, not just the getter function
-  const loadThemes = useThemeStore((state) => state.loadThemes);
+  const themes = useThemeStore((state) => state.themes);
   const subplebbits = useDefaultSubplebbits();
 
-  const initialTheme = useInitialTheme(pendingPostSubplebbitAddress);
-  const [currentTheme, setCurrentTheme] = useState(initialTheme);
-
   const isInAllView = isAllView(location.pathname);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
   const isInModView = isModView(location.pathname);
@@ -46,16 +42,13 @@ const useTheme = (): [string, (theme: string) => void] => {
 
     if (isChristmasTime && isEnabled === null && subplebbitAddress && !isInAllView && !isInSubscriptionsView && !isInModView) {
       setIsEnabled(true);
-      setCurrentTheme('tomorrow');
-      updateThemeClass('tomorrow');
     } else if (!isChristmasTime && isEnabled) {
       setIsEnabled(false);
     }
-  }, [isEnabled, setIsEnabled, params, pendingPostSubplebbitAddress, location.pathname, isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress]);
+  }, [isEnabled, setIsEnabled, subplebbitAddress, isInAllView, isInSubscriptionsView, isInModView]);
-
-  const getCurrentTheme = useCallback(() => {
-    const { isEnabled } = useSpecialThemeStore.getState();
 
+  // Calculate current theme during render - no effects needed
+  const currentTheme = useMemo(() => {
     // Always use yotsuba for home page
     if (location.pathname === '/') {
       return 'yotsuba';
@@ -68,31 +61,23 @@ const useTheme = (): [string, (theme: string) => void] => {
 
     let storedTheme = null;
     if (isInAllView || isInSubscriptionsView || isInModView) {
-      storedTheme = getTheme('sfw', false);
+      storedTheme = themes.sfw;
     } else if (subplebbitAddress) {
       const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
       if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
-        storedTheme = getTheme('nsfw', false);
+        storedTheme = themes.nsfw;
       } else {
-        storedTheme = getTheme('sfw', false);
+        storedTheme = themes.sfw;
       }
     }
 
-    return storedTheme || initialTheme;
+    return storedTheme || 'yotsuba';
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname, isEnabled, isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, subplebbits, themes]);
-  }, [location.pathname, params, getTheme, subplebbits, initialTheme, pendingPostSubplebbitAddress]);
 
+  // Update DOM class when theme changes
   useEffect(() => {
-    const newTheme = getCurrentTheme();
+    updateThemeClass(currentTheme);
-    if (newTheme !== currentTheme) {
+  }, [currentTheme]);
-      setCurrentTheme(newTheme);
-      updateThemeClass(newTheme);
-    }
-  }, [getCurrentTheme, currentTheme]);
-
-  useEffect(() => {
-    loadThemes();
-  }, [loadThemes]);
 
   const setSubplebbitTheme = useCallback(
     async (newTheme: string) => {
@@ -106,12 +91,8 @@ const useTheme = (): [string, (theme: string) => void] => {
           await setThemeStore('sfw', newTheme);
         }
       }
-
-      setCurrentTheme(newTheme);
-      updateThemeClass(newTheme);
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, subplebbits, setThemeStore],
-    [location.pathname, params, setThemeStore, subplebbits, pendingPostSubplebbitAddress],
   );
 
   return [currentTheme, setSubplebbitTheme];