diff --git a/src/hooks/use-initial-theme.ts b/src/hooks/use-initial-theme.ts index 9cb24353..f4379e04 100644 --- a/src/hooks/use-initial-theme.ts +++ b/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); - const currentTheme = useThemeStore((state) => state.currentTheme); + // Subscribe to the actual themes data, not just functions + 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, - currentTheme, + themes, subplebbits, pendingPostSubplebbitAddress, pendingPost, diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts index b736feb9..e3723cb2 100644 --- a/src/hooks/use-theme.ts +++ b/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); - const loadThemes = useThemeStore((state) => state.loadThemes); + // Subscribe to the actual themes data, not just the getter function + 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]); - - const getCurrentTheme = useCallback(() => { - const { isEnabled } = useSpecialThemeStore.getState(); + }, [isEnabled, setIsEnabled, subplebbitAddress, isInAllView, isInSubscriptionsView, isInModView]); + // 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; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [location.pathname, params, getTheme, subplebbits, initialTheme, pendingPostSubplebbitAddress]); + return storedTheme || 'yotsuba'; + }, [location.pathname, isEnabled, isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, subplebbits, themes]); + // Update DOM class when theme changes useEffect(() => { - const newTheme = getCurrentTheme(); - if (newTheme !== currentTheme) { - setCurrentTheme(newTheme); - updateThemeClass(newTheme); - } - }, [getCurrentTheme, currentTheme]); - - useEffect(() => { - loadThemes(); - }, [loadThemes]); + updateThemeClass(currentTheme); + }, [currentTheme]); 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 - [location.pathname, params, setThemeStore, subplebbits, pendingPostSubplebbitAddress], + [isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, subplebbits, setThemeStore], ); return [currentTheme, setSubplebbitTheme];