fix(theme): theme changed incorrectly in pending post page

src/components/edit-menu/edit-menu.tsx

@@ -4,7 +4,6 @@ import { autoUpdate, FloatingFocusManager, offset, shift, useClick, useDismiss,
 import { Comment, PublishCommentEditOptions, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
 import styles from './edit-menu.module.css';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
-import { formatMarkdown } from '../../lib/utils/post-utils';
 import useChallengesStore from '../../stores/use-challenges-store';
 import _ from 'lodash';
 import useIsMobile from '../../hooks/use-is-mobile';

src/hooks/use-initial-theme.ts

@@ -4,10 +4,13 @@ import useThemeStore from '../stores/use-theme-store';
 import useDefaultSubplebbits from './use-default-subplebbits';
 import { isAllView, isHomeView, isNotFoundView, isPendingPostView, isSubscriptionsView } from '../lib/utils/view-utils';
 import { nsfwTags } from '../views/home/home';
+import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 
-const useInitialTheme = () => {
+const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
   const location = useLocation();
-  const { subplebbitAddress } = useParams<{ subplebbitAddress: 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);
   const currentTheme = useThemeStore((state) => state.currentTheme);
   const subplebbits = useDefaultSubplebbits();
@@ -22,13 +25,23 @@ const useInitialTheme = () => {
     let theme = 'yotsuba';
 
     if (isInPendingPostView) {
-      theme = currentTheme || 'yotsuba';
+      const subplebbitAddress = pendingPostSubplebbitAddress || pendingPost?.subplebbitAddress;
+      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';
+        } else {
+          theme = getTheme('sfw', false) || 'yotsuba-b';
+        }
+      } else {
+        theme = currentTheme || 'yotsuba';
+      }
     } else if (isInAllView || isInSubscriptionsView) {
       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);
+    } 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
       } else {
@@ -37,7 +50,19 @@ const useInitialTheme = () => {
     }
 
     return theme;
-  }, [isInPendingPostView, isInAllView, isInSubscriptionsView, isInHomeView, isInNotFoundView, subplebbitAddress, getTheme, currentTheme, subplebbits]);
+  }, [
+    isInPendingPostView,
+    isInAllView,
+    isInSubscriptionsView,
+    isInHomeView,
+    isInNotFoundView,
+    paramsSubplebbitAddress,
+    getTheme,
+    currentTheme,
+    subplebbits,
+    pendingPostSubplebbitAddress,
+    pendingPost,
+  ]);
 
   return initialTheme;
 };

src/hooks/use-theme.ts

@@ -15,7 +15,7 @@ const updateThemeClass = (newTheme: string) => {
   }
 };
 
-const useTheme = (): [string, (theme: string) => void] => {
+const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: string) => void] => {
   const location = useLocation();
   const params = useParams<{ subplebbitAddress: string }>();
   const setThemeStore = useThemeStore((state) => state.setTheme);
@@ -23,7 +23,7 @@ const useTheme = (): [string, (theme: string) => void] => {
   const loadThemes = useThemeStore((state) => state.loadThemes);
   const subplebbits = useDefaultSubplebbits();
 
-  const initialTheme = useInitialTheme();
+  const initialTheme = useInitialTheme(pendingPostSubplebbitAddress);
   const [currentTheme, setCurrentTheme] = useState(initialTheme);
 
   const getCurrentTheme = useCallback(() => {

src/views/pending-post/pending-post.tsx

@@ -4,6 +4,7 @@ import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import { isSettingsView } from '../../lib/utils/view-utils';
 import { Post } from '../post';
 import SettingsModal from '../../components/settings-modal';
+import useTheme from '../../hooks/use-theme';
 
 const PendingPost = () => {
   const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>();
@@ -14,6 +15,8 @@ const PendingPost = () => {
   const params = useParams();
   const isInSettingsView = isSettingsView(location.pathname, params);
 
+  useTheme(post?.subplebbitAddress);
+
   useEffect(() => window.scrollTo(0, 0), []);
 
   useEffect(() => {