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

feat: add p/mod feed for all subs the user moderates

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2025-03-05 17:38:34 +01:00
parent 8557ebb3a7
commit ba5753d85e
42 changed files with 133 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+5
View File
@@ -147,6 +147,11 @@ const App = () => {
<Route path='/p/subscriptions/catalog/:timeFilterName?' element={<Catalog />} />
<Route path='/p/subscriptions/catalog/:timeFilterName?/settings' element={<Catalog />} />
<Route path='/p/mod/:timeFilterName?' element={<Board />} />
<Route path='/p/mod/:timeFilterName?/settings' element={<Board />} />
<Route path='/p/mod/catalog/:timeFilterName?' element={<Catalog />} />
<Route path='/p/mod/catalog/:timeFilterName?/settings' element={<Catalog />} />
<Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
<Route path='/profile/:accountCommentIndex/settings' element={<PendingPost />} />
</Route>
src/components/board-header/board-header.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { isAllView, isSubscriptionsView, isModView } from '../../lib/utils/view-utils';
import styles from './board-header.module.css';
import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
import useIsMobile from '../../hooks/use-is-mobile';
@@ -25,7 +25,7 @@ const BoardHeader = () => {
const params = useParams();
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const isInModView = isModView(location.pathname);
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
@@ -33,8 +33,8 @@ const BoardHeader = () => {
const { address, shortAddress } = subplebbit || {};
const multisubMetadata = useMultisubMetadata();
const title = isInAllView ? multisubMetadata?.title || 'all' : isInSubscriptionsView ? 'Subscriptions' : subplebbit?.title;
const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : `p/${address}`;
const title = isInAllView ? multisubMetadata?.title || 'all' : isInSubscriptionsView ? 'Subscriptions' : isInModView ? 'Mod' : subplebbit?.title;
const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : isInModView ? 'p/mod' : `p/${address}`;
const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbit);
@@ -47,7 +47,7 @@ const BoardHeader = () => {
)}
<div className={styles.boardTitle}>
{title || (shortAddress ? (shortAddress.endsWith('.eth') || shortAddress.endsWith('.sol') ? shortAddress.slice(0, -4) : shortAddress) : subplebbitAddress)}
{(isOffline || isOnlineStatusLoading) && !isInAllView && !isInSubscriptionsView && (
{(isOffline || isOnlineStatusLoading) && !isInAllView && !isInSubscriptionsView && !isInModView && (
<span className={styles.offlineIconWrapper}>
<Tooltip content={offlineTitle}>
<span className={`${styles.offlineIcon} ${offlineIconClass}`} />
src/components/topbar/topbar.tsx
+16 -2
View File
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import { useAccount, useAccountComment } from '@plebbit/plebbit-react-hooks';
import { useAccount, useAccountComment, useAccountSubplebbits } from '@plebbit/plebbit-react-hooks';
import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import { useAutoSubscribe } from '../../hooks/use-auto-subscribe';
@@ -79,10 +79,20 @@ const TopBarDesktop = () => {
const subscriptions = account?.subscriptions;
const { accountSubplebbits } = useAccountSubplebbits();
const accountSubplebbitAddresses = Object.keys(accountSubplebbits);
return (
<div className={styles.boardNavDesktop}>
<span className={styles.boardList}>
[<Link to='/p/all'>all</Link> / <Link to='/p/subscriptions'>subscriptions</Link>]{' '}
[<Link to='/p/all'>all</Link> / <Link to='/p/subscriptions'>subscriptions</Link>
{accountSubplebbitAddresses.length > 0 && (
<>
{' '}
/ <Link to='/p/mod'>mod</Link>
</>
)}
]{' '}
{subscriptions?.length > 0 && (
<>
[
@@ -137,11 +147,15 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const selectValue = isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : subplebbitAddress;
const { accountSubplebbits } = useAccountSubplebbits();
const accountSubplebbitAddresses = Object.keys(accountSubplebbits);
const boardSelect = (
<select value={selectValue} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}>
{!currentSubplebbitIsInList && subplebbitAddress && <option value={subplebbitAddress}>{displaySubplebbitAddress}</option>}
<option value='all'>all</option>
<option value='subscriptions'>subscriptions</option>
{accountSubplebbitAddresses.length > 0 && <option value='mod'>mod</option>}
{subplebbitAddresses.map((address: any, index: number) => {
const subplebbitAddress = address?.includes('.') ? address : Plebbit.getShortAddress(address);
return (
src/hooks/use-initial-theme.ts
+4 -2
View File
@@ -2,7 +2,7 @@ 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 { isAllView, isHomeView, isNotFoundView, isPendingPostView, isSubscriptionsView } from '../lib/utils/view-utils';
import { isAllView, isHomeView, isNotFoundView, isPendingPostView, isSubscriptionsView, isModView } from '../lib/utils/view-utils';
import { nsfwTags } from '../constants/nsfwTags';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
@@ -19,6 +19,7 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
const isInNotFoundView = isNotFoundView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const isInModView = isModView(location.pathname);
const isInPendingPostView = isPendingPostView(location.pathname, params);
const initialTheme = useMemo(() => {
@@ -36,7 +37,7 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
} else {
theme = currentTheme || 'yotsuba';
}
} else if (isInAllView || isInSubscriptionsView) {
} else if (isInAllView || isInSubscriptionsView || isInModView) {
theme = getTheme('sfw', false) || 'yotsuba-b'; // Add 'false' parameter
} else if (isInHomeView || isInNotFoundView) {
theme = 'yotsuba';
@@ -54,6 +55,7 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
isInPendingPostView,
isInAllView,
isInSubscriptionsView,
isInModView,
isInHomeView,
isInNotFoundView,
paramsSubplebbitAddress,
src/hooks/use-theme.ts
+9 -13
View File
@@ -1,6 +1,6 @@
import { useState, useEffect, useCallback } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { isAllView, isSubscriptionsView } from '../lib/utils/view-utils';
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';
@@ -37,26 +37,24 @@ const useTheme = (): [string, (theme: string) => void] => {
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const isInModView = isModView(location.pathname);
const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
// Check for Christmas and initialize special theme if needed
useEffect(() => {
const isChristmasTime = isChristmas();
const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
if (isChristmasTime && isEnabled === null && subplebbitAddress && !isInAllView && !isInSubscriptionsView) {
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]);
}, [isEnabled, setIsEnabled, params, pendingPostSubplebbitAddress, location.pathname, isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress]);
const getCurrentTheme = useCallback(() => {
const { isEnabled } = useSpecialThemeStore.getState();
const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
// Always use yotsuba for home page
if (location.pathname === '/') {
@@ -69,7 +67,7 @@ const useTheme = (): [string, (theme: string) => void] => {
}
let storedTheme = null;
if (isInAllView || isInSubscriptionsView) {
if (isInAllView || isInSubscriptionsView || isInModView) {
storedTheme = getTheme('sfw', false);
} else if (subplebbitAddress) {
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
@@ -81,6 +79,7 @@ const useTheme = (): [string, (theme: string) => void] => {
}
return storedTheme || initialTheme;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [location.pathname, params, getTheme, subplebbits, initialTheme, pendingPostSubplebbitAddress]);
useEffect(() => {
@@ -97,11 +96,7 @@ const useTheme = (): [string, (theme: string) => void] => {
const setSubplebbitTheme = useCallback(
async (newTheme: string) => {
const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
if (isInAllView || isInSubscriptionsView) {
if (isInAllView || isInSubscriptionsView || isInModView) {
await setThemeStore('sfw', newTheme);
} else if (subplebbitAddress) {
const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
@@ -115,6 +110,7 @@ const useTheme = (): [string, (theme: string) => void] => {
setCurrentTheme(newTheme);
updateThemeClass(newTheme);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[location.pathname, params, setThemeStore, subplebbits, pendingPostSubplebbitAddress],
);
src/lib/utils/view-utils.ts
+4
View File
@@ -42,6 +42,10 @@ export const isHomeView = (pathname: string): boolean => {
return pathname === '/';
};
export const isModView = (pathname: string): boolean => {
return pathname === `/p/mod` || pathname.startsWith(`/p/mod/`);
};
export const isPendingPostView = (pathname: string, params: ParamsType): boolean => {
return pathname === `/profile/${params.accountCommentIndex}` || pathname === `/profile/${params.accountCommentIndex}/settings`;
};
src/views/board/board.tsx
+20 -11
View File
@@ -1,12 +1,12 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAccount, useAccountComments, useBlock, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Comment, useAccount, useAccountComments, useAccountSubplebbits, useBlock, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { Trans, useTranslation } from 'react-i18next';
import styles from './board.module.css';
import { shouldShowSnow } from '../../lib/snow';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { isAllView, isSubscriptionsView, isModView } from '../../lib/utils/view-utils';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import { useFeedStateString } from '../../hooks/use-state-string';
import useTimeFilter from '../../hooks/use-time-filter';
@@ -41,6 +41,10 @@ const Board = () => {
const subscriptions = account?.subscriptions;
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const isInModView = isModView(location.pathname);
const { accountSubplebbits } = useAccountSubplebbits();
const accountSubplebbitAddresses = Object.keys(accountSubplebbits);
const subplebbitAddresses = useMemo(() => {
if (isInAllView) {
return defaultSubplebbitAddresses;
@@ -48,8 +52,11 @@ const Board = () => {
if (isInSubscriptionsView) {
return subscriptions || [];
}
if (isInModView) {
return accountSubplebbitAddresses;
}
return [subplebbitAddress];
}, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbitAddresses, subscriptions]);
}, [isInAllView, isInSubscriptionsView, isInModView, subplebbitAddress, defaultSubplebbitAddresses, subscriptions, accountSubplebbitAddresses]);
const { sortType } = useSortingStore();
const { timeFilterSeconds, timeFilterName } = useTimeFilter();
@@ -57,8 +64,8 @@ const Board = () => {
const feedOptions = {
subplebbitAddresses,
sortType,
postsPerPage: isInAllView || isInSubscriptionsView ? 5 : 25,
...(isInAllView || isInSubscriptionsView ? { newerThan: timeFilterSeconds } : {}),
postsPerPage: isInAllView || isInSubscriptionsView || isInModView ? 5 : 25,
...(isInAllView || isInSubscriptionsView || isInModView ? { newerThan: timeFilterSeconds } : {}),
filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined,
};
@@ -111,7 +118,7 @@ const Board = () => {
const subplebbit = useSubplebbit({ subplebbitAddress });
const { createdAt, description, error, rules, shortAddress, state, suggested } = subplebbit || {};
const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : subplebbit?.title;
const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : isInModView ? t('mod') : subplebbit?.title;
const { blocked, unblock } = useBlock({ address: subplebbitAddress });
@@ -174,7 +181,7 @@ const Board = () => {
/>
</div>
) : (
(isInAllView || isInSubscriptionsView) &&
(isInAllView || isInSubscriptionsView || isInModView) &&
showMorePostsSuggestion &&
monthlyFeed.length > feed.length &&
(weeklyFeed.length > feed.length ? (
@@ -183,7 +190,7 @@ const Board = () => {
i18nKey='more_threads_last_week'
values={{ currentTimeFilterName, count: feed.length }}
components={{
1: <Link to={(isInAllView ? '/p/all' : isInSubscriptionsView ? '/p/subscriptions' : `/p/${subplebbitAddress}`) + '/1w'} />,
1: <Link to={(isInAllView ? '/p/all' : isInSubscriptionsView ? '/p/subscriptions' : isInModView ? '/p/mod' : `/p/${subplebbitAddress}`) + '/1w'} />,
}}
/>
</div>
@@ -193,7 +200,7 @@ const Board = () => {
i18nKey='more_threads_last_month'
values={{ currentTimeFilterName, count: feed.length }}
components={{
1: <Link to={(isInAllView ? '/p/all' : isInSubscriptionsView ? '/p/subscriptions' : `/p/${subplebbitAddress}`) + '/1m'} />,
1: <Link to={(isInAllView ? '/p/all' : isInSubscriptionsView ? '/p/subscriptions' : isInModView ? '/p/mod' : `/p/${subplebbitAddress}`) + '/1m'} />,
}}
/>
</div>
@@ -209,9 +216,11 @@ const Board = () => {
{state === 'failed' ? (
<span className='red'>{state}</span>
) : isInSubscriptionsView && subscriptions?.length === 0 ? (
t('not_subscribed_to_any_board')
<span className='red'>{t('not_subscribed_to_any_board')}</span>
) : isInModView && accountSubplebbitAddresses?.length === 0 ? (
<span className='red'>{t('not_mod_of_any_board')}</span>
) : blocked ? (
t('you_have_blocked_this_board')
<span className='red'>{t('you_have_blocked_this_board')}</span>
) : (
hasMore && <LoadingEllipsis string={loadingStateString} />
)}