fix(subplebbit-stats): revert broken useStableSubplebbitStats hook

src/components/subplebbit-stats/subplebbit-stats.tsx

@@ -1,8 +1,6 @@
 import { useParams } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-import { useAccountComment } from '@plebbit/plebbit-react-hooks';
+import { useAccountComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
-import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
-import { useStableSubplebbitStats } from '../../hooks/use-stable-subplebbit-stats';
 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 subplebbit = useSubplebbit({ subplebbitAddress });
-  const address = useSubplebbitField(subplebbitAddress, (subplebbit) => subplebbit?.address);
+  const { address, createdAt } = subplebbit || {};
-  const createdAt = useSubplebbitField(subplebbitAddress, (subplebbit) => subplebbit?.createdAt);
 
-  // Use stable stats hook that doesn't depend on useSubplebbit internally
+  const stats = useSubplebbitStats({ subplebbitAddress: address });
-  const stats = useStableSubplebbitStats(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

@@ -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;
-};