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

perf(use-theme): refactor for performance, fix initial theme load after refresh

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-19 22:55:22 +02:00
parent 9f5f92f714
commit 3bb1b2f8c1
3 changed files with 77 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+8
View File
@@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
import { isAllView, isSubscriptionsView } from './lib/utils/view-utils';
import useIsMobile from './hooks/use-is-mobile';
@@ -16,6 +17,7 @@ import SubplebbitStats from './components/subplebbit-stats';
import TopBar from './components/topbar';
import { timeFilterNames } from './hooks/use-time-filter';
import useTheme from './hooks/use-theme';
import useInitialTheme from './hooks/use-initial-theme';
const BoardLayout = () => {
const { accountCommentIndex, subplebbitAddress, timeFilterName } = useParams();
@@ -68,6 +70,12 @@ 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
+37
View File
@@ -0,0 +1,37 @@
import { useLocation, useParams } from 'react-router-dom';
import useThemeStore from '../stores/use-theme-store';
import useDefaultSubplebbits from './use-default-subplebbits';
import { isAllView, isHomeView, isNotFoundView, isSubscriptionsView } from '../lib/utils/view-utils';
import { nsfwTags } from '../views/home/home';
const useInitialTheme = () => {
const location = useLocation();
const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
const getTheme = useThemeStore((state) => state.getTheme);
const subplebbits = useDefaultSubplebbits();
const params = useParams();
const isInHomeView = isHomeView(location.pathname);
const isInNotFoundView = isNotFoundView(location.pathname, params);
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
if (isInAllView || isInSubscriptionsView) {
const userTheme = getTheme(isInAllView ? 'all' : 'subscriptions');
return userTheme || 'yotsuba-b';
} else if (isInHomeView || isInNotFoundView) {
return 'yotsuba';
} else if (subplebbitAddress) {
const userTheme = getTheme(subplebbitAddress);
if (userTheme) {
return userTheme;
}
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
return 'yotsuba';
}
return 'yotsuba-b';
}
return 'yotsuba';
};
export default useInitialTheme;
src/hooks/use-theme.ts
+32 -33
View File
@@ -1,50 +1,49 @@
import { useState, useMemo } from 'react';
import { useState, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { isAllView, isSubscriptionsView } from '../lib/utils/view-utils';
import useThemeStore from '../stores/use-theme-store';
import useDefaultSubplebbits from './use-default-subplebbits';
import { isAllView, isHomeView, isNotFoundView, isSubscriptionsView } from '../lib/utils/view-utils';
import { nsfwTags } from '../views/home/home';
import determineInitialTheme from './use-initial-theme';
const useTheme = (): [string, (theme: string) => void] => {
const location = useLocation();
const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
const getTheme = useThemeStore((state) => state.getTheme);
const setThemeStore = useThemeStore((state) => state.setTheme);
const subplebbits = useDefaultSubplebbits();
const params = useParams();
const isInHomeView = isHomeView(location.pathname);
const isInNotFoundView = isNotFoundView(location.pathname, params);
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const setThemeStore = useThemeStore((state) => state.setTheme);
const loadThemes = useThemeStore((state) => state.loadThemes);
const initialTheme = useMemo(() => {
if (isInAllView || isInSubscriptionsView) {
const userTheme = getTheme(isInAllView ? 'all' : 'subscriptions');
return userTheme || 'yotsuba-b';
} else if (isInHomeView || isInNotFoundView) {
return 'yotsuba';
} else if (subplebbitAddress) {
const userTheme = getTheme(subplebbitAddress);
if (userTheme) {
return userTheme;
}
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
return 'yotsuba';
}
return 'yotsuba-b';
}
return 'yotsuba';
}, [subplebbitAddress, subplebbits, getTheme, isInAllView, isInHomeView, isInNotFoundView, isInSubscriptionsView]);
const [themesLoaded, setThemesLoaded] = useState(false);
useEffect(() => {
const load = async () => {
await loadThemes();
setThemesLoaded(true);
};
load();
}, [loadThemes]);
const initialTheme = determineInitialTheme();
const [theme, setLocalTheme] = useState(initialTheme);
useMemo(() => {
document.body.classList.remove('yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon');
useEffect(() => {
document.body.classList.add(initialTheme);
return () => {
document.body.classList.remove(initialTheme);
};
}, [initialTheme]);
useEffect(() => {
if (themesLoaded) {
document.body.classList.remove('yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon');
document.body.classList.add(initialTheme);
setLocalTheme(initialTheme);
}
}, [initialTheme, themesLoaded]);
const setSubplebbitTheme = (newTheme: string) => {
const subplebbitAddress = params?.subplebbitAddress;
const isInAllView = isAllView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
if (subplebbitAddress) {
setThemeStore(subplebbitAddress, newTheme);
} else if (isInAllView) {