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: rebrand default subplebbits to 5chan directories

Browse Source
This commit is contained in:
plebeius
2026-01-28 16:51:27 +08:00
parent 7c8a7b8df8
commit 63ee8aa168
33 changed files with 329 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-account-subplebbits-with-metadata.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import useAccountsStore from '@plebbit/plebbit-react-hooks/dist/stores/accounts';
import { MultisubSubplebbit } from './use-default-subplebbits';
import { DirectoryCommunity } from './use-directories';
export const useAccountSubplebbitsWithMetadata = (): MultisubSubplebbit[] => {
export const useAccountSubplebbitsWithMetadata = (): DirectoryCommunity[] => {
const subplebbitsWithMetadata = useAccountsStore(
(state) => {
const activeAccountId = state.activeAccountId;
src/hooks/use-default-subplebbits.ts → src/hooks/use-directories.ts
+71 -71
View File
@@ -1,42 +1,42 @@
import { useEffect, useMemo, useState } from 'react';
import defaultSubplebbitsData from '../data/default-subplebbits.json';
import directoriesData from '../data/5chan-directories.json';
export interface MultisubMetadata {
export interface DirectoriesMetadata {
title: string;
description: string;
createdAt: number;
updatedAt: number;
}
export interface MultisubSubplebbit {
export interface DirectoryCommunity {
title?: string;
address: string;
nsfw?: boolean;
}
export interface MultisubData {
export interface DirectoriesData {
title: string;
description: string;
createdAt: number;
updatedAt: number;
subplebbits: MultisubSubplebbit[];
communities: DirectoryCommunity[];
}
export interface DefaultSubplebbitsState {
subplebbits: MultisubSubplebbit[];
export interface DirectoriesState {
communities: DirectoryCommunity[];
loading: boolean;
error: Error | null;
}
const GITHUB_URL = 'https://raw.githubusercontent.com/plebbit/lists/master/5chan-multisub.json';
const LOCALSTORAGE_KEY = '5chan-subplebbits-cache';
const LOCALSTORAGE_TIMESTAMP_KEY = '5chan-subplebbits-cache-timestamp';
const GITHUB_URL = 'https://raw.githubusercontent.com/plebbit/lists/master/5chan-directories.json';
const LOCALSTORAGE_KEY = '5chan-directories-cache';
const LOCALSTORAGE_TIMESTAMP_KEY = '5chan-directories-cache-timestamp';
const CACHE_MAX_AGE_MS = 60 * 60 * 1000; // 1 hour
let cacheSubplebbits: MultisubSubplebbit[] | null = null;
let cacheMetadata: MultisubMetadata | null = null;
let cacheCommunities: DirectoryCommunity[] | null = null;
let cacheMetadata: DirectoriesMetadata | null = null;
const getFromLocalStorage = (): MultisubData | null => {
const getFromLocalStorage = (): DirectoriesData | null => {
try {
const cached = localStorage.getItem(LOCALSTORAGE_KEY);
const timestamp = localStorage.getItem(LOCALSTORAGE_TIMESTAMP_KEY);
@@ -52,7 +52,7 @@ const getFromLocalStorage = (): MultisubData | null => {
return null;
};
const saveToLocalStorage = (data: MultisubData) => {
const saveToLocalStorage = (data: DirectoriesData) => {
try {
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(data));
localStorage.setItem(LOCALSTORAGE_TIMESTAMP_KEY, Date.now().toString());
@@ -61,7 +61,7 @@ const saveToLocalStorage = (data: MultisubData) => {
}
};
const fetchMultisubData = async (): Promise<MultisubData> => {
const fetchDirectoriesData = async (): Promise<DirectoriesData> => {
try {
const response = await fetch(GITHUB_URL);
if (!response.ok) {
@@ -72,25 +72,25 @@ const fetchMultisubData = async (): Promise<MultisubData> => {
saveToLocalStorage(data);
return data;
} catch (e) {
console.warn('Failed to fetch subplebbits from GitHub, using vendored fallback:', e);
console.warn('Failed to fetch directories from GitHub, using vendored fallback:', e);
// Fall back to vendored file
return defaultSubplebbitsData as MultisubData;
return directoriesData as DirectoriesData;
}
};
export const useDefaultSubplebbits = () => {
export const useDirectories = () => {
// Use vendored data as initial state to prevent theme flash on first load
// This ensures NSFW status is known synchronously before first render
const [state, setState] = useState<DefaultSubplebbitsState>({
subplebbits: (defaultSubplebbitsData as MultisubData).subplebbits,
const [state, setState] = useState<DirectoriesState>({
communities: (directoriesData as DirectoriesData).communities,
loading: true,
error: null,
});
useEffect(() => {
if (cacheSubplebbits) {
if (cacheCommunities) {
setState({
subplebbits: cacheSubplebbits,
communities: cacheCommunities,
loading: false,
error: null,
});
@@ -104,21 +104,21 @@ export const useDefaultSubplebbits = () => {
// Check localStorage first
const cachedData = getFromLocalStorage();
if (cachedData) {
cacheSubplebbits = cachedData.subplebbits;
cacheCommunities = cachedData.communities;
if (isMounted) {
setState({
subplebbits: cachedData.subplebbits,
communities: cachedData.communities,
loading: false,
error: null,
});
}
// Still try to fetch fresh data in background (don't await)
fetchMultisubData()
fetchDirectoriesData()
.then((data) => {
if (isMounted) {
cacheSubplebbits = data.subplebbits;
cacheCommunities = data.communities;
setState({
subplebbits: data.subplebbits,
communities: data.communities,
loading: false,
error: null,
});
@@ -131,23 +131,23 @@ export const useDefaultSubplebbits = () => {
}
// No cache, fetch fresh data
const multisub = await fetchMultisubData();
const directories = await fetchDirectoriesData();
if (isMounted) {
cacheSubplebbits = multisub.subplebbits;
cacheCommunities = directories.communities;
setState({
subplebbits: multisub.subplebbits,
communities: directories.communities,
loading: false,
error: null,
});
}
} catch (e) {
console.warn('Failed to load subplebbits:', e);
console.warn('Failed to load directories:', e);
// Fallback to vendored data
const fallbackData = defaultSubplebbitsData as MultisubData;
const fallbackData = directoriesData as DirectoriesData;
if (isMounted) {
cacheSubplebbits = fallbackData.subplebbits;
cacheCommunities = fallbackData.communities;
setState({
subplebbits: fallbackData.subplebbits,
communities: fallbackData.communities,
loading: false,
error: null,
});
@@ -160,24 +160,24 @@ export const useDefaultSubplebbits = () => {
};
}, []);
// Always prefer cacheSubplebbits (module-level, stable reference) when available
// Only use state.subplebbits during initial load before cache is populated
// Always prefer cacheCommunities (module-level, stable reference) when available
// Only use state.communities during initial load before cache is populated
// This ensures a stable reference for memoization in consuming hooks
return cacheSubplebbits || state.subplebbits;
return cacheCommunities || state.communities;
};
export const useDefaultSubplebbitsState = () => {
export const useDirectoriesState = () => {
// Use vendored data as fallback to prevent theme flash on first load
const [state, setState] = useState<DefaultSubplebbitsState>({
subplebbits: cacheSubplebbits || (defaultSubplebbitsData as MultisubData).subplebbits,
loading: !cacheSubplebbits,
const [state, setState] = useState<DirectoriesState>({
communities: cacheCommunities || (directoriesData as DirectoriesData).communities,
loading: !cacheCommunities,
error: null,
});
useEffect(() => {
if (cacheSubplebbits) {
if (cacheCommunities) {
setState({
subplebbits: cacheSubplebbits,
communities: cacheCommunities,
loading: false,
error: null,
});
@@ -191,21 +191,21 @@ export const useDefaultSubplebbitsState = () => {
// Check localStorage first
const cachedData = getFromLocalStorage();
if (cachedData) {
cacheSubplebbits = cachedData.subplebbits;
cacheCommunities = cachedData.communities;
if (isMounted) {
setState({
subplebbits: cachedData.subplebbits,
communities: cachedData.communities,
loading: false,
error: null,
});
}
// Still try to fetch fresh data in background (don't await)
fetchMultisubData()
fetchDirectoriesData()
.then((data) => {
if (isMounted) {
cacheSubplebbits = data.subplebbits;
cacheCommunities = data.communities;
setState({
subplebbits: data.subplebbits,
communities: data.communities,
loading: false,
error: null,
});
@@ -218,23 +218,23 @@ export const useDefaultSubplebbitsState = () => {
}
// No cache, fetch fresh data
const multisub = await fetchMultisubData();
const directories = await fetchDirectoriesData();
if (isMounted) {
cacheSubplebbits = multisub.subplebbits;
cacheCommunities = directories.communities;
setState({
subplebbits: multisub.subplebbits,
communities: directories.communities,
loading: false,
error: null,
});
}
} catch (e) {
console.warn('Failed to load subplebbits:', e);
console.warn('Failed to load directories:', e);
// Fallback to vendored data
const fallbackData = defaultSubplebbitsData as MultisubData;
const fallbackData = directoriesData as DirectoriesData;
if (isMounted) {
cacheSubplebbits = fallbackData.subplebbits;
cacheCommunities = fallbackData.communities;
setState({
subplebbits: fallbackData.subplebbits,
communities: fallbackData.communities,
loading: false,
error: null,
});
@@ -250,13 +250,13 @@ export const useDefaultSubplebbitsState = () => {
return state;
};
export const useDefaultSubplebbitAddresses = () => {
const defaultSubplebbits = useDefaultSubplebbits();
return useMemo(() => defaultSubplebbits.map((subplebbit) => subplebbit.address), [defaultSubplebbits]);
export const useDirectoryAddresses = () => {
const directories = useDirectories();
return useMemo(() => directories.map((community) => community.address), [directories]);
};
export const useMultisubMetadata = () => {
const [metadata, setMetadata] = useState<MultisubMetadata | null>(null);
export const useDirectoriesMetadata = () => {
const [metadata, setMetadata] = useState<DirectoriesMetadata | null>(null);
useEffect(() => {
if (cacheMetadata) {
@@ -270,7 +270,7 @@ export const useMultisubMetadata = () => {
// Check localStorage first
const cachedData = getFromLocalStorage();
if (cachedData) {
const metadata: MultisubMetadata = {
const metadata: DirectoriesMetadata = {
title: cachedData.title,
description: cachedData.description,
createdAt: cachedData.createdAt,
@@ -281,10 +281,10 @@ export const useMultisubMetadata = () => {
setMetadata(metadata);
}
// Still try to fetch fresh data in background (don't await)
fetchMultisubData()
fetchDirectoriesData()
.then((data) => {
if (isMounted) {
const freshMetadata: MultisubMetadata = {
const freshMetadata: DirectoriesMetadata = {
title: data.title,
description: data.description,
createdAt: data.createdAt,
@@ -301,13 +301,13 @@ export const useMultisubMetadata = () => {
}
// No cache, fetch fresh data
const multisub = await fetchMultisubData();
const directories = await fetchDirectoriesData();
if (isMounted) {
const metadata: MultisubMetadata = {
title: multisub.title,
description: multisub.description,
createdAt: multisub.createdAt,
updatedAt: multisub.updatedAt,
const metadata: DirectoriesMetadata = {
title: directories.title,
description: directories.description,
createdAt: directories.createdAt,
updatedAt: directories.updatedAt,
};
cacheMetadata = metadata;
setMetadata(metadata);
@@ -315,9 +315,9 @@ export const useMultisubMetadata = () => {
} catch (e) {
console.warn('Failed to load metadata, using vendored fallback:', e);
// Fallback to vendored data
const fallbackData = defaultSubplebbitsData as MultisubData;
const fallbackData = directoriesData as DirectoriesData;
if (isMounted) {
const metadata: MultisubMetadata = {
const metadata: DirectoriesMetadata = {
title: fallbackData.title,
description: fallbackData.description,
createdAt: fallbackData.createdAt,
src/hooks/use-filtered-default-subplebbit-addresses.ts
-19
View File
@@ -1,19 +0,0 @@
import { useMemo } from 'react';
import { useDefaultSubplebbits } from './use-default-subplebbits';
import useAllFeedFilterStore from '../stores/use-all-feed-filter-store';
export const useFilteredDefaultSubplebbitAddresses = () => {
const defaultSubplebbits = useDefaultSubplebbits();
const { filter } = useAllFeedFilterStore();
return useMemo(() => {
if (filter === 'all') {
return defaultSubplebbits.map((subplebbit) => subplebbit.address);
}
if (filter === 'nsfw') {
return defaultSubplebbits.filter((subplebbit) => subplebbit.nsfw === true).map((subplebbit) => subplebbit.address);
}
// filter === 'sfw'
return defaultSubplebbits.filter((subplebbit) => subplebbit.nsfw !== true).map((subplebbit) => subplebbit.address);
}, [defaultSubplebbits, filter]);
};
src/hooks/use-filtered-directory-addresses.ts
+19
View File
@@ -0,0 +1,19 @@
import { useMemo } from 'react';
import { useDirectories } from './use-directories';
import useAllFeedFilterStore from '../stores/use-all-feed-filter-store';
export const useFilteredDirectoryAddresses = () => {
const directories = useDirectories();
const { filter } = useAllFeedFilterStore();
return useMemo(() => {
if (filter === 'all') {
return directories.map((community) => community.address);
}
if (filter === 'nsfw') {
return directories.filter((community) => community.nsfw === true).map((community) => community.address);
}
// filter === 'sfw'
return directories.filter((community) => community.nsfw !== true).map((community) => community.address);
}, [directories, filter]);
};
src/hooks/use-initial-theme.ts
+10 -10
View File
@@ -1,18 +1,18 @@
import { useMemo } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import useThemeStore from '../stores/use-theme-store';
import { useDefaultSubplebbits } from './use-default-subplebbits';
import { useDirectories } from './use-directories';
import { isAllView, isHomeView, isNotFoundView, isPendingPostView, isSubscriptionsView, isModView } from '../lib/utils/view-utils';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
const location = useLocation();
const { subplebbitAddress: paramsSubplebbitAddress, accountCommentIndex } = useParams<{ subplebbitAddress: string; accountCommentIndex?: string }>();
const { communityAddress: paramsSubplebbitAddress, accountCommentIndex } = useParams<{ communityAddress: string; accountCommentIndex?: string }>();
const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
const pendingPost = useAccountComment({ commentIndex });
// Subscribe to the actual themes data, not just functions
const themes = useThemeStore((state) => state.themes);
const subplebbits = useDefaultSubplebbits();
const directories = useDirectories();
const params = useParams();
const isInHomeView = isHomeView(location.pathname);
const isInNotFoundView = isNotFoundView(location.pathname, params);
@@ -25,10 +25,10 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
let theme = 'yotsuba';
if (isInPendingPostView) {
const subplebbitAddress = pendingPostSubplebbitAddress || pendingPost?.subplebbitAddress;
if (subplebbitAddress) {
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
if (subplebbit?.nsfw) {
const communityAddress = pendingPostSubplebbitAddress || pendingPost?.communityAddress;
if (communityAddress) {
const community = directories.find((s) => s.address === communityAddress);
if (community?.nsfw) {
theme = themes.nsfw || 'yotsuba';
} else {
theme = themes.sfw || 'yotsuba-b';
@@ -41,8 +41,8 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
} else if (isInHomeView || isInNotFoundView) {
theme = 'yotsuba';
} else if (paramsSubplebbitAddress) {
const subplebbit = subplebbits.find((s) => s.address === paramsSubplebbitAddress);
if (subplebbit?.nsfw) {
const community = directories.find((s) => s.address === paramsSubplebbitAddress);
if (community?.nsfw) {
theme = themes.nsfw || 'yotsuba';
} else {
theme = themes.sfw || 'yotsuba-b';
@@ -59,7 +59,7 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
isInNotFoundView,
paramsSubplebbitAddress,
themes,
subplebbits,
directories,
pendingPostSubplebbitAddress,
pendingPost,
]);
src/hooks/use-resolved-subplebbit-address.ts
+11 -11
View File
@@ -1,18 +1,18 @@
import { useMemo } from 'react';
import { useParams } from 'react-router-dom';
import { useDefaultSubplebbits } from './use-default-subplebbits';
import { useDirectories } from './use-directories';
import { getSubplebbitAddress, getBoardPath } from '../lib/utils/route-utils';
/**
* Hook to resolve boardIdentifier from URL params to subplebbitAddress
* Handles both directory codes (e.g., "biz") and full addresses (e.g., "someboard.eth")
*
* Performance: Uses useMemo to avoid recalculating when params/defaultSubplebbits haven't changed.
* The defaultSubplebbits reference is stable (from cache) after initial load, so memoization works effectively.
* Performance: Uses useMemo to avoid recalculating when params/directories haven't changed.
* The directories reference is stable (from cache) after initial load, so memoization works effectively.
*/
export const useResolvedSubplebbitAddress = (): string | undefined => {
const params = useParams();
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
// Try boardIdentifier first (new format), then subplebbitAddress (old format for backward compatibility)
const boardIdentifier = params.boardIdentifier || params.subplebbitAddress;
@@ -24,18 +24,18 @@ export const useResolvedSubplebbitAddress = (): string | undefined => {
// Resolve directory code to address if needed
// getSubplebbitAddress uses internal caching, so this is efficient
return getSubplebbitAddress(boardIdentifier, defaultSubplebbits);
}, [boardIdentifier, defaultSubplebbits]);
return getSubplebbitAddress(boardIdentifier, directories);
}, [boardIdentifier, directories]);
};
/**
* Hook to get the board path (directory code or address) for use in links
*
* Performance: Uses useMemo to avoid recalculating when subplebbitAddress/defaultSubplebbits haven't changed.
* The defaultSubplebbits reference is stable (from cache) after initial load, so memoization works effectively.
* Performance: Uses useMemo to avoid recalculating when subplebbitAddress/directories haven't changed.
* The directories reference is stable (from cache) after initial load, so memoization works effectively.
*/
export const useBoardPath = (subplebbitAddress: string | undefined): string | undefined => {
const defaultSubplebbits = useDefaultSubplebbits();
const directories = useDirectories();
return useMemo(() => {
if (!subplebbitAddress) {
@@ -43,6 +43,6 @@ export const useBoardPath = (subplebbitAddress: string | undefined): string | un
}
// getBoardPath uses internal caching, so this is efficient
return getBoardPath(subplebbitAddress, defaultSubplebbits);
}, [subplebbitAddress, defaultSubplebbits]);
return getBoardPath(subplebbitAddress, directories);
}, [subplebbitAddress, directories]);
};
src/hooks/use-theme.ts
+6 -6
View File
@@ -2,7 +2,7 @@ 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 { useDirectories } from './use-directories';
import { useResolvedSubplebbitAddress } from './use-resolved-subplebbit-address';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
import useSpecialThemeStore from '../stores/use-special-theme-store';
@@ -29,7 +29,7 @@ const useTheme = (): [string, (theme: string) => void] => {
const setThemeStore = useThemeStore((state) => state.setTheme);
// Subscribe to the actual themes data, not just the getter function
const themes = useThemeStore((state) => state.themes);
const subplebbits = useDefaultSubplebbits();
const directories = useDirectories();
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
@@ -64,7 +64,7 @@ const useTheme = (): [string, (theme: string) => void] => {
if (isInAllView || isInSubscriptionsView || isInModView) {
storedTheme = themes.nsfw;
} else if (subplebbitAddress) {
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
const subplebbit = directories.find((s) => s.address === subplebbitAddress);
if (subplebbit?.nsfw) {
storedTheme = themes.nsfw;
} else {
@@ -73,7 +73,7 @@ const useTheme = (): [string, (theme: string) => void] => {
}
return storedTheme || 'yotsuba';
}, [location.pathname, isEnabled, isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, subplebbits, themes]);
}, [location.pathname, isEnabled, isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, directories, themes]);
// Update DOM class when theme changes
useEffect(() => {
@@ -85,7 +85,7 @@ const useTheme = (): [string, (theme: string) => void] => {
if (isInAllView || isInSubscriptionsView || isInModView) {
await setThemeStore('nsfw', newTheme);
} else if (subplebbitAddress) {
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
const subplebbit = directories.find((s) => s.address === subplebbitAddress);
if (subplebbit?.nsfw) {
await setThemeStore('nsfw', newTheme);
} else {
@@ -93,7 +93,7 @@ const useTheme = (): [string, (theme: string) => void] => {
}
}
},
[isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, subplebbits, setThemeStore],
[isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, directories, setThemeStore],
);
return [currentTheme, setSubplebbitTheme];