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

revert refactoring for rpc state rerenders, fix home stats

Browse Source
This commit is contained in:
plebeius
2026-01-14 22:23:11 +01:00
parent 64ef0ddccf
commit afb7521e09
6 changed files with 61 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-stable-subplebbit.ts
-31
View File
@@ -69,34 +69,3 @@ export const useSubplebbitField = <T>(subplebbitAddress: string | undefined, sel
return field;
};
/**
* Hook to get multiple subplebbits with stable references.
* Only re-renders when actual content changes (updatedAt, posts pages), not transient state.
*
* @param subplebbitAddresses - Array of subplebbit addresses
* @returns Array of subplebbit objects
*/
export const useStableSubplebbits = (subplebbitAddresses: string[]) => {
const subplebbits = useSubplebbitsStore(
(state) => subplebbitAddresses.map((address) => state.subplebbits[address]),
// Custom equality: only re-render if stable content fields change
(prev, next) => {
if (prev.length !== next.length) return false;
return prev.every((p, i) => {
const n = next[i];
if (p === n) return true;
if (!p || !n) return p === n;
// Compare stable content fields only - ignore updatingState, state, clients, etc.
return (
p.address === n.address &&
p.updatedAt === n.updatedAt &&
// For PopularThreadsBox: compare posts pages reference (changes when new posts loaded)
p.posts?.pages?.hot === n.posts?.pages?.hot
);
});
},
);
return subplebbits;
};
src/hooks/use-subplebbits-stats.ts
+21 -62
View File
@@ -1,70 +1,13 @@
import { useEffect, useMemo } from 'react';
import { useAccount } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import { useEffect } from 'react';
import { useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
import { create } from 'zustand';
const pendingFetchCid: { [cid: string]: boolean } = {};
/**
* Hook to get stats for multiple subplebbits.
* Uses stable store selector to avoid re-renders from updatingState changes.
*/
const useSubplebbitsStats = (options: any) => {
const { subplebbitAddresses, accountName } = options || {};
const account = useAccount({ accountName });
// Use stable selector to only get statsCid for each address
// This avoids re-renders when only updatingState changes
const statsCids = useSubplebbitsStore(
(state) =>
(subplebbitAddresses || []).map((address: string) => ({
address,
statsCid: state.subplebbits[address]?.statsCid,
})),
// Custom equality: only re-render if statsCid values change
(prev, next) => {
if (prev.length !== next.length) return false;
return prev.every((p: any, i: number) => p.address === next[i].address && p.statsCid === next[i].statsCid);
},
);
const { setSubplebbitStats, subplebbitsStats } = useSubplebbitsStatsStore();
useEffect(() => {
if (!subplebbitAddresses || subplebbitAddresses.length === 0 || !account) {
return;
}
statsCids.forEach(({ address, statsCid }: { address: string; statsCid: string | undefined }) => {
if (statsCid && !subplebbitsStats[address] && !pendingFetchCid[statsCid]) {
pendingFetchCid[statsCid] = true;
account.plebbit
.fetchCid(statsCid)
.then((fetchedStats: any) => {
setSubplebbitStats(address, JSON.parse(fetchedStats));
})
.catch((error: any) => {
pendingFetchCid[statsCid] = false;
console.error('Fetching subplebbit stats failed', { subplebbitAddress: address, error });
});
}
});
}, [account, statsCids, setSubplebbitStats, subplebbitsStats, subplebbitAddresses]);
return useMemo(() => {
return subplebbitAddresses.reduce((acc: any, address: any) => {
acc[address] = subplebbitsStats[address] || { loading: true };
return acc;
}, {});
}, [subplebbitsStats, subplebbitAddresses]);
};
export type SubplebbitsStatsState = {
subplebbitsStats: { [subplebbitAddress: string]: any };
setSubplebbitStats: Function;
setSubplebbitStats: (subplebbitAddress: string, stats: any) => void;
};
const useSubplebbitsStatsStore = create<SubplebbitsStatsState>((set) => ({
export const useSubplebbitsStatsStore = create<SubplebbitsStatsState>((set) => ({
subplebbitsStats: {},
setSubplebbitStats: (subplebbitAddress: string, subplebbitStats: any) =>
set((state) => ({
@@ -72,4 +15,20 @@ const useSubplebbitsStatsStore = create<SubplebbitsStatsState>((set) => ({
})),
}));
export default useSubplebbitsStats;
/**
* Component that fetches stats for a single subplebbit and stores them.
* Render one of these for each subplebbit you want to track stats for.
*/
export const SubplebbitStatsCollector = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
const stats = useSubplebbitStats({ subplebbitAddress });
const setSubplebbitStats = useSubplebbitsStatsStore((state) => state.setSubplebbitStats);
useEffect(() => {
// Only update store when we have actual stats (not just loading state)
if (stats && stats.allPostCount !== undefined) {
setSubplebbitStats(subplebbitAddress, stats);
}
}, [stats, subplebbitAddress, setSubplebbitStats]);
return null; // This is a data-fetching component, renders nothing
};
src/views/catalog/catalog.tsx
+3 -10
View File
@@ -1,8 +1,7 @@
import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import { Comment, useAccount, useFeed, useBlock, useAccountComments } from '@plebbit/plebbit-react-hooks';
import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
import { Comment, useAccount, useFeed, useSubplebbit, useBlock, useAccountComments } from '@plebbit/plebbit-react-hooks';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import useCatalogFeedRows from '../../hooks/use-catalog-feed-rows';
@@ -480,14 +479,8 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
}
}, [reset, setResetFunction, isVisible]);
// Use stable field selectors to avoid re-renders from updatingState changes
const error = useSubplebbitField(subplebbitAddress, (sub) => sub?.error);
const shortAddress = useSubplebbitField(subplebbitAddress, (sub) => sub?.shortAddress);
const title = useSubplebbitField(subplebbitAddress, (sub) => sub?.title);
// Derive state from updatedAt field - if updatedAt exists, state is 'succeeded'
const updatedAt = useSubplebbitField(subplebbitAddress, (sub) => sub?.updatedAt);
const state = updatedAt ? 'succeeded' : 'fetching-ipns';
const subplebbit = useSubplebbit({ subplebbitAddress });
const { error, shortAddress, state, title } = subplebbit || {};
const { blocked, unblock } = useBlock({ address: subplebbitAddress });
const feedLength = feed.length;
src/views/home/home.tsx
+34 -29
View File
@@ -1,9 +1,10 @@
import { useEffect, useMemo, useRef, FormEvent } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import { useSubplebbits } from '@plebbit/plebbit-react-hooks';
import styles from './home.module.css';
import { useDefaultSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import useSubplebbitsStats from '../../hooks/use-subplebbits-stats';
import { SubplebbitStatsCollector, useSubplebbitsStatsStore } from '../../hooks/use-subplebbits-stats';
import PopularThreadsBox from './popular-threads-box';
import BoardsList from './boards-list';
import Version from '../../components/version';
@@ -74,45 +75,48 @@ const InfoBox = () => {
const Stats = ({ subplebbitAddresses }: { subplebbitAddresses: string[] }) => {
const { t } = useTranslation();
const stats = useSubplebbitsStats({ subplebbitAddresses });
const subplebbitsStats = useSubplebbitsStatsStore((state) => state.subplebbitsStats);
const allStatsLoaded = useMemo(() => {
return subplebbitAddresses.every((address) => stats[address]);
}, [stats, subplebbitAddresses]);
const { totalPosts, currentUsers } = useMemo(() => {
const { totalPosts, currentUsers, boardsTracked } = useMemo(() => {
let totalPosts = 0;
let currentUsers = 0;
let boardsTracked = 0;
if (allStatsLoaded) {
Object.values(stats).forEach((stat: any) => {
subplebbitAddresses.forEach((address) => {
const stat = subplebbitsStats[address];
if (stat) {
totalPosts += stat.allPostCount || 0;
currentUsers += stat.weekActiveUserCount || 0;
});
}
boardsTracked++;
}
});
return { totalPosts, currentUsers };
}, [stats, allStatsLoaded]);
const boardsTracked = Object.values(stats).filter((stat: any) => stat && !stat.loading).length;
return { totalPosts, currentUsers, boardsTracked };
}, [subplebbitsStats, subplebbitAddresses]);
return (
<div className={styles.box}>
<div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
<h2 className='capitalize'>{t('stats')}</h2>
</div>
<div className={`${styles.boxContent} ${styles.stats}`}>
<div className={styles.stat}>
<b>{t('total_posts')}</b> {totalPosts}
<>
{/* Render collectors to fetch stats for each subplebbit */}
{subplebbitAddresses.map((address) => (
<SubplebbitStatsCollector key={address} subplebbitAddress={address} />
))}
<div className={styles.box}>
<div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
<h2 className='capitalize'>{t('stats')}</h2>
</div>
<div className={styles.stat}>
<b>{t('current_users')}</b> {currentUsers}
</div>
<div className={styles.stat}>
<b>{t('boards_tracked')}</b> {boardsTracked}
<div className={`${styles.boxContent} ${styles.stats}`}>
<div className={styles.stat}>
<b>{t('total_posts')}</b> {totalPosts}
</div>
<div className={styles.stat}>
<b>{t('current_users')}</b> {currentUsers}
</div>
<div className={styles.stat}>
<b>{t('boards_tracked')}</b> {boardsTracked}
</div>
</div>
</div>
</div>
</>
);
};
@@ -190,6 +194,7 @@ export const HomeLogo = () => {
const Home = () => {
const defaultSubplebbits = useDefaultSubplebbits();
const subplebbitAddresses = useDefaultSubplebbitAddresses();
const { subplebbits } = useSubplebbits({ subplebbitAddresses });
const { closeDirectoryModal } = useDirectoryModalStore();
useEffect(() => {
@@ -212,7 +217,7 @@ const Home = () => {
<SearchBar />
<InfoBox />
<BoardsList multisub={defaultSubplebbits} />
<PopularThreadsBox multisub={defaultSubplebbits} subplebbitAddresses={subplebbitAddresses} />
<PopularThreadsBox multisub={defaultSubplebbits} subplebbits={subplebbits} />
<Stats subplebbitAddresses={subplebbitAddresses} />
<Footer />
</div>
src/views/home/popular-threads-box/popular-threads-box.tsx
+3 -20
View File
@@ -1,8 +1,7 @@
import { memo, useMemo, useEffect } from 'react';
import { memo, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Comment, Subplebbit, useAccount } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import { Comment, Subplebbit } from '@plebbit/plebbit-react-hooks';
import styles from '../home.module.css';
import usePopularPosts from '../../../hooks/use-popular-posts';
import usePopularThreadsOptionsStore from '../../../stores/use-popular-threads-options-store';
@@ -13,7 +12,6 @@ import BoxModal from '../box-modal';
import { MultisubSubplebbit, useDefaultSubplebbits } from '../../../hooks/use-default-subplebbits';
import { getBoardPath } from '../../../lib/utils/route-utils';
import { removeMarkdown } from '../../../lib/utils/post-utils';
import { useStableSubplebbits } from '../../../hooks/use-stable-subplebbit';
interface PopularThreadProps {
post: Comment;
@@ -69,25 +67,10 @@ const PopularThreadCard = memo(
},
);
// Uses stable subplebbits hook to avoid re-renders from updatingState changes
const PopularThreadsBox = ({ multisub, subplebbitAddresses }: { multisub: MultisubSubplebbit[]; subplebbitAddresses: string[] }) => {
const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: MultisubSubplebbit[]; subplebbits: any }) => {
const { t } = useTranslation();
const { showWorksafeContentOnly, showNsfwContentOnly } = usePopularThreadsOptionsStore();
const account = useAccount();
const addSubplebbitToStore = useSubplebbitsStore((state) => state.addSubplebbitToStore);
// Trigger fetching subplebbits (same as useSubplebbits does internally)
useEffect(() => {
if (!account || !subplebbitAddresses) return;
for (const address of subplebbitAddresses) {
addSubplebbitToStore(address, account).catch(() => {});
}
}, [subplebbitAddresses?.toString(), account?.id]);
// Use stable hook that only re-renders when actual content changes
const subplebbits = useStableSubplebbits(subplebbitAddresses);
const getFilteredSubplebbits = () => {
if (showWorksafeContentOnly) {
return subplebbits.filter((sub: Subplebbit) => {
src/views/post/post.tsx
-1
View File
@@ -71,7 +71,6 @@ const PostPage = () => {
const subplebbit = useSubplebbit({ subplebbitAddress });
const { error: subplebbitError, shortAddress, title } = subplebbit || {};
const defaultSubplebbits = useDefaultSubplebbits();
// if the comment is a reply, return the post comment instead, then the reply will be highlighted in the thread