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

refactor: fix warning for bad setState call in theme logic

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-08-26 11:32:40 +02:00
parent 495e9e25b5
commit 733ee597aa
3 changed files with 68 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+8 -7
View File
@@ -62,7 +62,14 @@ const BoardLayout = () => {
};
const GlobalLayout = () => {
useTheme();
const [theme] = useTheme();
useEffect(() => {
document.body.classList.add(theme);
return () => {
document.body.classList.remove(theme);
};
}, [theme]);
return (
<>
@@ -73,12 +80,6 @@ const GlobalLayout = () => {
};
const App = () => {
const initialTheme = useInitialTheme();
useEffect(() => {
document.body.classList.add(initialTheme);
}, [initialTheme]);
return (
<div className={styles.app}>
<Routes>
src/hooks/use-initial-theme.ts
+24 -13
View File
@@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import useThemeStore from '../stores/use-theme-store';
import useDefaultSubplebbits from './use-default-subplebbits';
@@ -17,20 +18,30 @@ const useInitialTheme = () => {
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const isInPendingPostView = isPendingPostView(location.pathname, params);
if (isInPendingPostView) {
return currentTheme || 'yotsuba';
} else if (isInAllView || isInSubscriptionsView) {
return getTheme('sfw') || 'yotsuba-b';
} else if (isInHomeView || isInNotFoundView) {
return 'yotsuba';
} else if (subplebbitAddress) {
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
return getTheme('nsfw') || 'yotsuba';
let initialTheme = 'yotsuba';
useEffect(() => {
let theme = 'yotsuba';
if (isInPendingPostView) {
theme = currentTheme || 'yotsuba';
} else if (isInAllView || isInSubscriptionsView) {
theme = getTheme('sfw') || 'yotsuba-b';
} 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';
} else {
theme = getTheme('sfw') || 'yotsuba-b';
}
}
return getTheme('sfw') || 'yotsuba-b';
}
return 'yotsuba';
initialTheme = theme;
}, [isInPendingPostView, isInAllView, isInSubscriptionsView, isInHomeView, isInNotFoundView, subplebbitAddress, getTheme, currentTheme, subplebbits]);
return initialTheme;
};
export default useInitialTheme;
src/hooks/use-theme.ts
+36 -35
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { isAllView, isSubscriptionsView } from '../lib/utils/view-utils';
import useThemeStore from '../stores/use-theme-store';
@@ -24,21 +24,9 @@ const useTheme = (): [string, (theme: string) => void] => {
const subplebbits = useDefaultSubplebbits();
const initialTheme = useInitialTheme();
const [theme, setLocalTheme] = useState<string>(() => initialTheme);
const [themesLoaded, setThemesLoaded] = useState(false);
useEffect(() => {
const loadAndApplyThemes = async () => {
await loadThemes();
setThemesLoaded(true);
};
loadAndApplyThemes();
}, [loadThemes]);
useEffect(() => {
if (!themesLoaded) return;
const [userSetTheme, setUserSetTheme] = useState<string | null>(null);
const getCurrentTheme = useCallback(() => {
const subplebbitAddress = params?.subplebbitAddress;
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
@@ -55,32 +43,45 @@ const useTheme = (): [string, (theme: string) => void] => {
}
}
const themeToSet = storedTheme || initialTheme;
setLocalTheme(themeToSet);
updateThemeClass(themeToSet);
}, [initialTheme, location.pathname, params, getTheme, themesLoaded, subplebbits]);
return storedTheme || initialTheme;
}, [location.pathname, params, getTheme, subplebbits, initialTheme]);
const setSubplebbitTheme = async (newTheme: string) => {
const subplebbitAddress = params?.subplebbitAddress;
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
useEffect(() => {
const initializeTheme = async () => {
await loadThemes();
const currentTheme = getCurrentTheme();
updateThemeClass(currentTheme);
};
if (isInAllView || isInSubscriptionsView) {
await setThemeStore('sfw', newTheme);
} else if (subplebbitAddress) {
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
await setThemeStore('nsfw', newTheme);
} else {
initializeTheme();
}, [loadThemes, getCurrentTheme]);
const setSubplebbitTheme = useCallback(
async (newTheme: string) => {
const subplebbitAddress = params?.subplebbitAddress;
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
if (isInAllView || isInSubscriptionsView) {
await setThemeStore('sfw', newTheme);
} else if (subplebbitAddress) {
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
await setThemeStore('nsfw', newTheme);
} else {
await setThemeStore('sfw', newTheme);
}
}
}
setLocalTheme(newTheme);
updateThemeClass(newTheme);
};
setUserSetTheme(newTheme);
updateThemeClass(newTheme);
},
[location.pathname, params, setThemeStore, subplebbits],
);
return [theme, setSubplebbitTheme];
const currentTheme = userSetTheme || getCurrentTheme();
return [currentTheme, setSubplebbitTheme];
};
export default useTheme;