diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts index e5fea198..bcff9cb8 100644 --- a/src/hooks/use-theme.ts +++ b/src/hooks/use-theme.ts @@ -5,6 +5,7 @@ import useThemeStore from '../stores/use-theme-store'; import useDefaultSubplebbits from './use-default-subplebbits'; import useInitialTheme from './use-initial-theme'; import { nsfwTags } from '../views/home/home'; +import { useAccountComment } from '@plebbit/plebbit-react-hooks'; const themeClasses = ['yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon']; @@ -15,9 +16,14 @@ const updateThemeClass = (newTheme: string) => { } }; -const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: string) => void] => { +const useTheme = (): [string, (theme: string) => void] => { const location = useLocation(); const params = useParams<{ subplebbitAddress: string }>(); + const pendingPostParams = useParams<{ accountCommentIndex?: string }>(); + const pendingPostCommentIndex = pendingPostParams?.accountCommentIndex ? parseInt(pendingPostParams.accountCommentIndex) : undefined; + const pendingPost = useAccountComment({ commentIndex: pendingPostCommentIndex }); + const pendingPostSubplebbitAddress = pendingPost?.subplebbitAddress; + const setThemeStore = useThemeStore((state) => state.setTheme); const getTheme = useThemeStore((state) => state.getTheme); const loadThemes = useThemeStore((state) => state.loadThemes); @@ -27,7 +33,7 @@ const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: strin const [currentTheme, setCurrentTheme] = useState(initialTheme); const getCurrentTheme = useCallback(() => { - const subplebbitAddress = params?.subplebbitAddress; + const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress; const isInAllView = isAllView(location.pathname, params); const isInSubscriptionsView = isSubscriptionsView(location.pathname, params); @@ -44,7 +50,7 @@ const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: strin } return storedTheme || initialTheme; - }, [location.pathname, params, getTheme, subplebbits, initialTheme]); + }, [location.pathname, params, getTheme, subplebbits, initialTheme, pendingPostSubplebbitAddress]); useEffect(() => { const newTheme = getCurrentTheme(); @@ -60,7 +66,7 @@ const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: strin const setSubplebbitTheme = useCallback( async (newTheme: string) => { - const subplebbitAddress = params?.subplebbitAddress; + const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress; const isInAllView = isAllView(location.pathname, params); const isInSubscriptionsView = isSubscriptionsView(location.pathname, params); @@ -78,7 +84,7 @@ const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: strin setCurrentTheme(newTheme); updateThemeClass(newTheme); }, - [location.pathname, params, setThemeStore, subplebbits], + [location.pathname, params, setThemeStore, subplebbits, pendingPostSubplebbitAddress], ); return [currentTheme, setSubplebbitTheme]; diff --git a/src/views/pending-post/pending-post.tsx b/src/views/pending-post/pending-post.tsx index 72980b28..fedea830 100644 --- a/src/views/pending-post/pending-post.tsx +++ b/src/views/pending-post/pending-post.tsx @@ -4,7 +4,6 @@ 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 }>(); @@ -15,8 +14,6 @@ const PendingPost = () => { const params = useParams(); const isInSettingsView = isSettingsView(location.pathname, params); - useTheme(post?.subplebbitAddress); - useEffect(() => window.scrollTo(0, 0), []); useEffect(() => {