From d3d88da24adc8bd4c700aa9342fea7dc0d55a2ef Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 26 Aug 2024 17:39:27 +0200
Subject: [PATCH] fix theme warning

---
 src/app.tsx                    | 21 +++++++++++++++------
 src/hooks/use-initial-theme.ts |  6 +++---
 src/hooks/use-theme.ts         | 28 ++++++++++++++--------------
 src/stores/use-theme-store.ts  |  8 +++++---
 4 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index f305c045..ffba5fae 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
 import { isAllView, isSubscriptionsView } from './lib/utils/view-utils';
 import useIsMobile from './hooks/use-is-mobile';
@@ -61,13 +61,22 @@ const BoardLayout = () => {
 };
 
 const GlobalLayout = () => {
-  const [theme] = useTheme();
+  const [theme, setTheme] = useState('');
+  const [currentTheme] = useTheme();
 
   useEffect(() => {
-    document.body.classList.add(theme);
-    return () => {
-      document.body.classList.remove(theme);
-    };
+    if (currentTheme !== theme) {
+      setTheme(currentTheme);
+    }
+  }, [currentTheme, theme]);
+
+  useEffect(() => {
+    if (theme) {
+      document.body.classList.add(theme);
+      return () => {
+        document.body.classList.remove(theme);
+      };
+    }
   }, [theme]);
 
   return (
diff --git a/src/hooks/use-initial-theme.ts b/src/hooks/use-initial-theme.ts
index 0af95177..2d494102 100644
--- a/src/hooks/use-initial-theme.ts
+++ b/src/hooks/use-initial-theme.ts
@@ -24,15 +24,15 @@ const useInitialTheme = () => {
     if (isInPendingPostView) {
       theme = currentTheme || 'yotsuba';
     } else if (isInAllView || isInSubscriptionsView) {
-      theme = getTheme('sfw') || 'yotsuba-b';
+      theme = getTheme('sfw', false) || 'yotsuba-b'; // Add 'false' parameter
     } else if (isInHomeView || isInNotFoundView) {
       theme = 'yotsuba';
     } else if (subplebbitAddress) {
       const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
       if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
-        theme = getTheme('nsfw') || 'yotsuba';
+        theme = getTheme('nsfw', false) || 'yotsuba'; // Add 'false' parameter
       } else {
-        theme = getTheme('sfw') || 'yotsuba-b';
+        theme = getTheme('sfw', false) || 'yotsuba-b'; // Add 'false' parameter
       }
     }
 
diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
index c3e5a8af..a19c65da 100644
--- a/src/hooks/use-theme.ts
+++ b/src/hooks/use-theme.ts
@@ -24,7 +24,7 @@ const useTheme = (): [string, (theme: string) => void] => {
   const subplebbits = useDefaultSubplebbits();
 
   const initialTheme = useInitialTheme();
-  const [userSetTheme, setUserSetTheme] = useState<string | null>(null);
+  const [currentTheme, setCurrentTheme] = useState(initialTheme);
 
   const getCurrentTheme = useCallback(() => {
     const subplebbitAddress = params?.subplebbitAddress;
@@ -33,13 +33,13 @@ const useTheme = (): [string, (theme: string) => void] => {
 
     let storedTheme = null;
     if (isInAllView || isInSubscriptionsView) {
-      storedTheme = getTheme('sfw');
+      storedTheme = getTheme('sfw', false);
     } 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');
+        storedTheme = getTheme('nsfw', false);
       } else {
-        storedTheme = getTheme('sfw');
+        storedTheme = getTheme('sfw', false);
       }
     }
 
@@ -47,14 +47,16 @@ const useTheme = (): [string, (theme: string) => void] => {
   }, [location.pathname, params, getTheme, subplebbits, initialTheme]);
 
   useEffect(() => {
-    const initializeTheme = async () => {
-      await loadThemes();
-      const currentTheme = getCurrentTheme();
-      updateThemeClass(currentTheme);
-    };
+    const newTheme = getCurrentTheme();
+    if (newTheme !== currentTheme) {
+      setCurrentTheme(newTheme);
+      updateThemeClass(newTheme);
+    }
+  }, [getCurrentTheme, currentTheme]);
 
-    initializeTheme();
-  }, [loadThemes, getCurrentTheme]);
+  useEffect(() => {
+    loadThemes();
+  }, [loadThemes]);
 
   const setSubplebbitTheme = useCallback(
     async (newTheme: string) => {
@@ -73,14 +75,12 @@ const useTheme = (): [string, (theme: string) => void] => {
         }
       }
 
-      setUserSetTheme(newTheme);
+      setCurrentTheme(newTheme);
       updateThemeClass(newTheme);
     },
     [location.pathname, params, setThemeStore, subplebbits],
   );
 
-  const currentTheme = userSetTheme || getCurrentTheme();
-
   return [currentTheme, setSubplebbitTheme];
 };
 
diff --git a/src/stores/use-theme-store.ts b/src/stores/use-theme-store.ts
index b46b9e74..ac5dfbd8 100644
--- a/src/stores/use-theme-store.ts
+++ b/src/stores/use-theme-store.ts
@@ -8,7 +8,7 @@ interface ThemeState {
   };
   currentTheme: string | null;
   setTheme: (category: keyof ThemeState['themes'], theme: string) => void;
-  getTheme: (category: keyof ThemeState['themes']) => string | null;
+  getTheme: (category: keyof ThemeState['themes'], updateCurrentTheme?: boolean) => string | null;
   loadThemes: () => Promise<void>;
 }
 
@@ -29,10 +29,12 @@ const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState'],
     await themeStore.setItem(category, theme);
     set({ themes: updatedThemes, currentTheme: theme });
   },
-  getTheme: (category) => {
+  getTheme: (category, updateCurrentTheme = true) => {
     const currentThemes = get().themes;
     const theme = currentThemes[category] || null;
-    set({ currentTheme: theme });
+    if (updateCurrentTheme) {
+      set({ currentTheme: theme });
+    }
     return theme;
   },
   loadThemes: async () => {