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

fix(subplebbit-stats): revert broken useStableSubplebbitStats hook

Browse Source
This commit is contained in:
plebeius
2026-01-14 15:14:33 +01:00
parent 3799dccd88
commit 64ef0ddccf
2 changed files with 9 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/subplebbit-stats/subplebbit-stats.tsx
+9 -13
View File
@@ -1,8 +1,6 @@
import { useParams } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
import { useStableSubplebbitStats } from '../../hooks/use-stable-subplebbit-stats';
import { useAccountComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import useSubplebbitStatsVisibilityStore from '../../stores/use-subplebbit-stats-visibility-store';
import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
@@ -16,12 +14,10 @@ const SubplebbitStats = () => {
const resolvedAddress = useResolvedSubplebbitAddress();
const subplebbitAddress = resolvedAddress || accountComment?.subplebbitAddress;
// Only subscribe to address and createdAt to avoid rerenders from updatingState changes
const address = useSubplebbitField(subplebbitAddress, (subplebbit) => subplebbit?.address);
const createdAt = useSubplebbitField(subplebbitAddress, (subplebbit) => subplebbit?.createdAt);
const subplebbit = useSubplebbit({ subplebbitAddress });
const { address, createdAt } = subplebbit || {};
// Use stable stats hook that doesn't depend on useSubplebbit internally
const stats = useStableSubplebbitStats(address);
const stats = useSubplebbitStats({ subplebbitAddress: address });
const { hiddenStats, toggleVisibility } = useSubplebbitStatsVisibilityStore();
const isHidden = hiddenStats[address];
@@ -54,13 +50,13 @@ const SubplebbitStats = () => {
<td>
<Trans
i18nKey='board_stats_hour'
values={{ userCount: stats?.hourActiveUserCount ?? '?', postCount: stats?.hourPostCount ?? '?' }}
values={{ userCount: stats.hourActiveUserCount ?? '?', postCount: stats.hourPostCount ?? '?' }}
components={{ 1: <span key='hour-stat-value' className={styles.statValue} /> }}
/>
{' / '}
<Trans
i18nKey='board_stats_day'
values={{ userCount: stats?.dayActiveUserCount ?? '?', postCount: stats?.dayPostCount ?? '?' }}
values={{ userCount: stats.dayActiveUserCount ?? '?', postCount: stats.dayPostCount ?? '?' }}
components={{ 1: <span key='day-stat-value' className={styles.statValue} /> }}
/>
</td>
@@ -69,13 +65,13 @@ const SubplebbitStats = () => {
<td>
<Trans
i18nKey='board_stats_week'
values={{ userCount: stats?.weekActiveUserCount ?? '?', postCount: stats?.weekPostCount ?? '?' }}
values={{ userCount: stats.weekActiveUserCount ?? '?', postCount: stats.weekPostCount ?? '?' }}
components={{ 1: <span key='week-stat-value' className={styles.statValue} /> }}
/>
{' / '}
<Trans
i18nKey='board_stats_month'
values={{ userCount: stats?.monthActiveUserCount ?? '?', postCount: stats?.monthPostCount ?? '?' }}
values={{ userCount: stats.monthActiveUserCount ?? '?', postCount: stats.monthPostCount ?? '?' }}
components={{ 1: <span key='month-stat-value' className={styles.statValue} /> }}
/>
</td>
@@ -86,7 +82,7 @@ const SubplebbitStats = () => {
{' / '}
<Trans
i18nKey='board_stats_all'
values={{ userCount: stats?.allActiveUserCount ?? '?', postCount: stats?.allPostCount ?? '?' }}
values={{ userCount: stats.allActiveUserCount ?? '?', postCount: stats.allPostCount ?? '?' }}
components={{ 1: <span key='all-stat-value' className={styles.statValue} /> }}
/>
</td>
src/hooks/use-stable-subplebbit-stats.ts
-66
View File
@@ -1,66 +0,0 @@
import { useEffect } from 'react';
import { useAccount } from '@plebbit/plebbit-react-hooks';
import { create } from 'zustand';
import { useSubplebbitField } from './use-stable-subplebbit';
// Store to cache fetched stats and track pending fetches
interface SubplebbitStatsState {
stats: { [address: string]: any };
pendingCids: { [cid: string]: boolean };
setStats: (address: string, stats: any) => void;
setPending: (cid: string, pending: boolean) => void;
}
const useStableSubplebbitStatsStore = create<SubplebbitStatsState>((set) => ({
stats: {},
pendingCids: {},
setStats: (address, stats) =>
set((state) => ({
stats: { ...state.stats, [address]: stats },
})),
setPending: (cid, pending) =>
set((state) => ({
pendingCids: { ...state.pendingCids, [cid]: pending },
})),
}));
/**
* Stable version of useSubplebbitStats that doesn't depend on useSubplebbit internally.
* Uses useSubplebbitField to get the statsCid without re-rendering on updatingState changes.
*/
export const useStableSubplebbitStats = (subplebbitAddress: string | undefined) => {
const account = useAccount();
// Get statsCid using stable field selector - won't re-render on updatingState changes
const statsCid = useSubplebbitField(subplebbitAddress, (sub) => sub?.statsCid);
const stats = useStableSubplebbitStatsStore((state) => (subplebbitAddress ? state.stats[subplebbitAddress] : undefined));
const pendingCids = useStableSubplebbitStatsStore((state) => state.pendingCids);
const setStats = useStableSubplebbitStatsStore((state) => state.setStats);
const setPending = useStableSubplebbitStatsStore((state) => state.setPending);
useEffect(() => {
if (!subplebbitAddress || !statsCid || !account) {
return;
}
// Don't fetch if already fetched or pending
if (stats || pendingCids[statsCid]) {
return;
}
setPending(statsCid, true);
account.plebbit
.fetchCid(statsCid)
.then((fetchedStats: any) => {
setStats(subplebbitAddress, JSON.parse(fetchedStats));
})
.catch((error: any) => {
setPending(statsCid, false);
console.error('useStableSubplebbitStats fetchCid error', { subplebbitAddress, statsCid, error });
});
}, [subplebbitAddress, statsCid, account, stats, pendingCids, setStats, setPending]);
return stats;
};