External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(settings): resolve theme persistence bug after hard refresh

Browse Source
This commit is contained in:
plebeius
2025-10-23 21:44:43 +02:00
parent 5a3f7f0270
commit 26d014b696
2 changed files with 24 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-theme.ts
+15 -34
View File
@@ -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];