fix(themes): changing theme would bug out

src/hooks/use-theme.ts

@@ -4,44 +4,53 @@ import { isAllView, isSubscriptionsView } from '../lib/utils/view-utils';
 import useThemeStore from '../stores/use-theme-store';
 import useInitialTheme from './use-initial-theme';
 
+const updateThemeClass = (newTheme: string) => {
+  document.body.classList.remove('yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon');
+  if (newTheme) {
+    document.body.classList.add(newTheme);
+  }
+};
+
 const useTheme = (): [string, (theme: string) => void] => {
   const location = useLocation();
   const params = useParams();
   const setThemeStore = useThemeStore((state) => state.setTheme);
+  const getTheme = useThemeStore((state) => state.getTheme);
   const loadThemes = useThemeStore((state) => state.loadThemes);
 
+  const initialTheme = useInitialTheme();
+  const [theme, setLocalTheme] = useState<string>(() => initialTheme);
   const [themesLoaded, setThemesLoaded] = useState(false);
 
   useEffect(() => {
-    const load = async () => {
+    const loadAndApplyThemes = async () => {
       await loadThemes();
       setThemesLoaded(true);
     };
-    load();
+
+    loadAndApplyThemes();
   }, [loadThemes]);
 
-  const initialTheme = useInitialTheme();
-
-  const [theme, setLocalTheme] = useState(initialTheme);
-
   useEffect(() => {
-    const previousTheme = document.body.className;
+    if (!themesLoaded) return;
-    document.body.classList.add(initialTheme);
-    return () => {
-      document.body.classList.remove(initialTheme);
-      if (previousTheme) {
-        document.body.classList.add(previousTheme);
-      }
-    };
-  }, [initialTheme]);
 
-  useEffect(() => {
+    const subplebbitAddress = params?.subplebbitAddress;
-    if (themesLoaded) {
+    const isInAllView = isAllView(location.pathname, params);
-      document.body.classList.remove('yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon');
+    const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
-      document.body.classList.add(initialTheme);
+
-      setLocalTheme(initialTheme);
+    let storedTheme = null;
+    if (subplebbitAddress) {
+      storedTheme = getTheme(subplebbitAddress);
+    } else if (isInAllView) {
+      storedTheme = getTheme('all');
+    } else if (isInSubscriptionsView) {
+      storedTheme = getTheme('subscriptions');
     }
-  }, [initialTheme, themesLoaded]);
+
+    const themeToSet = storedTheme || initialTheme;
+    setLocalTheme(themeToSet);
+    updateThemeClass(themeToSet);
+  }, [initialTheme, location.pathname, params, getTheme, themesLoaded]);
 
   const setSubplebbitTheme = (newTheme: string) => {
     const subplebbitAddress = params?.subplebbitAddress;
@@ -55,9 +64,9 @@ const useTheme = (): [string, (theme: string) => void] => {
     } else if (isInSubscriptionsView) {
       setThemeStore('subscriptions', newTheme);
     }
+
     setLocalTheme(newTheme);
-    document.body.classList.remove('yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon');
+    updateThemeClass(newTheme);
-    document.body.classList.add(newTheme);
   };
 
   return [theme, setSubplebbitTheme];

src/stores/use-theme-store.ts

@@ -5,7 +5,7 @@ interface ThemeState {
   themes: Record<string, string>;
   setTheme: (subplebbitAddress: string, theme: string) => void;
   getTheme: (subplebbitAddress: string) => string | null;
-  loadThemes: () => void;
+  loadThemes: () => Promise<void>;
 }
 
 const themeStore = localForageLru.createInstance({
@@ -35,6 +35,7 @@ const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState'],
   },
 }));
 
+// Load themes on store initialization
 useThemeStore.getState().loadThemes();
 
 export default useThemeStore;