diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 979500b7..0106a50e 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -172,6 +172,24 @@ export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView ); }; +const AdButton = () => { + return ( +
+ [ + { + e.preventDefault(); + alert('work in progress'); + }} + > + Plebbit Leaderboard + + ] +
+ ); +}; + export const MobileBoardButtons = () => { const params = useParams(); const location = useLocation(); @@ -186,19 +204,7 @@ export const MobileBoardButtons = () => { return (
-
- [ - { - e.preventDefault(); - alert('work in progress'); - }} - > - Vote for Boards - - ] -
+
{isInPostView || isInPendingPostPage ? ( <> @@ -248,19 +254,7 @@ export const DesktopBoardButtons = () => { return ( <>
-
- [ - { - e.preventDefault(); - alert('work in progress'); - }} - > - Vote for Boards - - ] -
+
{isInPostView || isInPendingPostPage ? ( diff --git a/src/hooks/use-initial-theme.ts b/src/hooks/use-initial-theme.ts index d445f83c..5ec6209c 100644 --- a/src/hooks/use-initial-theme.ts +++ b/src/hooks/use-initial-theme.ts @@ -15,21 +15,18 @@ const useInitialTheme = () => { 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'; + if (isInAllView) { + return getTheme('all') || 'yotsuba-b'; + } else if (isInSubscriptionsView) { + return getTheme('subscriptions') || '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 getTheme('nsfw') || 'yotsuba'; } - return 'yotsuba-b'; + return getTheme('sfw') || 'yotsuba-b'; } return 'yotsuba'; }; diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts index 9011d9c0..b6b7734b 100644 --- a/src/hooks/use-theme.ts +++ b/src/hooks/use-theme.ts @@ -2,7 +2,9 @@ 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 useInitialTheme from './use-initial-theme'; +import { nsfwTags } from '../views/home/home'; const themeClasses = ['yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon']; @@ -15,10 +17,11 @@ const updateThemeClass = (newTheme: string) => { const useTheme = (): [string, (theme: string) => void] => { const location = useLocation(); - const params = useParams(); + const params = useParams<{ subplebbitAddress: string }>(); const setThemeStore = useThemeStore((state) => state.setTheme); const getTheme = useThemeStore((state) => state.getTheme); const loadThemes = useThemeStore((state) => state.loadThemes); + const subplebbits = useDefaultSubplebbits(); const initialTheme = useInitialTheme(); const [theme, setLocalTheme] = useState(() => initialTheme); @@ -41,30 +44,40 @@ const useTheme = (): [string, (theme: string) => void] => { const isInSubscriptionsView = isSubscriptionsView(location.pathname, params); let storedTheme = null; - if (subplebbitAddress) { - storedTheme = getTheme(subplebbitAddress); - } else if (isInAllView) { + if (isInAllView) { storedTheme = getTheme('all'); } else if (isInSubscriptionsView) { storedTheme = getTheme('subscriptions'); + } 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'); + } else { + storedTheme = getTheme('sfw'); + } } const themeToSet = storedTheme || initialTheme; setLocalTheme(themeToSet); updateThemeClass(themeToSet); - }, [initialTheme, location.pathname, params, getTheme, themesLoaded]); + }, [initialTheme, location.pathname, params, getTheme, themesLoaded, subplebbits]); const setSubplebbitTheme = async (newTheme: string) => { const subplebbitAddress = params?.subplebbitAddress; const isInAllView = isAllView(location.pathname, params); const isInSubscriptionsView = isSubscriptionsView(location.pathname, params); - if (subplebbitAddress) { - await setThemeStore(subplebbitAddress, newTheme); - } else if (isInAllView) { + if (isInAllView) { await setThemeStore('all', newTheme); } else if (isInSubscriptionsView) { await setThemeStore('subscriptions', 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); diff --git a/src/stores/use-theme-store.ts b/src/stores/use-theme-store.ts index 85c68e91..95fe3941 100644 --- a/src/stores/use-theme-store.ts +++ b/src/stores/use-theme-store.ts @@ -2,9 +2,14 @@ import { create, StoreApi } from 'zustand'; import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js'; interface ThemeState { - themes: Record; - setTheme: (subplebbitAddress: string, theme: string) => void; - getTheme: (subplebbitAddress: string) => string | null; + themes: { + nsfw: string; + sfw: string; + all: string; + subscriptions: string; + }; + setTheme: (category: keyof ThemeState['themes'], theme: string) => void; + getTheme: (category: keyof ThemeState['themes']) => string | null; loadThemes: () => Promise; } @@ -14,20 +19,30 @@ const themeStore = localForageLru.createInstance({ }); const useThemeStore = create((set: StoreApi['setState'], get: StoreApi['getState']) => ({ - themes: {}, - setTheme: async (subplebbitAddress: string, theme: string) => { + themes: { + nsfw: 'yotsuba', + sfw: 'yotsuba-b', + all: 'yotsuba-b', + subscriptions: 'yotsuba-b', + }, + setTheme: async (category, theme) => { const currentThemes = get().themes; - const updatedThemes = { ...currentThemes, [subplebbitAddress]: theme }; - await themeStore.setItem(subplebbitAddress, theme); + const updatedThemes = { ...currentThemes, [category]: theme }; + await themeStore.setItem(category, theme); set({ themes: updatedThemes }); }, - getTheme: (subplebbitAddress: string) => { + getTheme: (category) => { const currentThemes = get().themes; - return currentThemes[subplebbitAddress] || null; + return currentThemes[category] || null; }, loadThemes: async () => { - const entries: [string, string][] = await themeStore.entries(); - const themes: Record = {}; + const entries: [keyof ThemeState['themes'], string][] = await themeStore.entries(); + const themes: Record = { + nsfw: 'yotsuba', + sfw: 'yotsuba-b', + all: 'yotsuba-b', + subscriptions: 'yotsuba-b', + }; entries.forEach(([key, value]) => { themes[key] = value; });