From d482d3246744b0d7701888fa0ce18433d7798381 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 14:37:47 +0200
Subject: [PATCH] feat(board stats): remember hide/show choice per subplebbit

---
 .../subplebbit-stats/subplebbit-stats.tsx     | 15 ++++++-----
 .../use-subplebbit-stats-visibility-store.ts  | 27 +++++++++++++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/stores/use-subplebbit-stats-visibility-store.ts

diff --git a/src/components/subplebbit-stats/subplebbit-stats.tsx b/src/components/subplebbit-stats/subplebbit-stats.tsx
index 4b527b46..cba3f1f3 100644
--- a/src/components/subplebbit-stats/subplebbit-stats.tsx
+++ b/src/components/subplebbit-stats/subplebbit-stats.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { useAccountComment, useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
-import styles from './subplebbit-stats.module.css';
 import { Trans, useTranslation } from 'react-i18next';
+import { useAccountComment, useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
+import useSubplebbitStatsVisibilityStore from '../../stores/use-subplebbit-stats-visibility-store';
 import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
+import styles from './subplebbit-stats.module.css';
 
 const SubplebbitStats = () => {
   const { t } = useTranslation();
@@ -16,7 +16,8 @@ const SubplebbitStats = () => {
   const { address, createdAt } = subplebbit || {};
 
   const stats = useSubplebbitStats({ subplebbitAddress: address });
-  const [showStats, setShowStats] = useState(true);
+  const { hiddenStats, toggleVisibility } = useSubplebbitStatsVisibilityStore();
+  const isHidden = hiddenStats[address];
 
   const location = useLocation();
   const isInDescriptionView = isDescriptionView(location.pathname, params);
@@ -44,7 +45,7 @@ const SubplebbitStats = () => {
             </td>
           </tr>
         </thead>
-        {showStats && (
+        {!isHidden && (
           <tbody>
             <tr>
               <td>
@@ -93,8 +94,8 @@ const SubplebbitStats = () => {
           <tr>
             <td colSpan={2}>
               [
-              <span className={styles.hideButton} onClick={() => setShowStats(!showStats)}>
-                {showStats ? t('hide') : t('show_stats')}
+              <span className={styles.hideButton} onClick={() => toggleVisibility(address)}>
+                {isHidden ? t('show_stats') : t('hide')}
               </span>
               ]
             </td>
diff --git a/src/stores/use-subplebbit-stats-visibility-store.ts b/src/stores/use-subplebbit-stats-visibility-store.ts
new file mode 100644
index 00000000..c8f334cd
--- /dev/null
+++ b/src/stores/use-subplebbit-stats-visibility-store.ts
@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface SubplebbitStatsVisibilityState {
+  hiddenStats: { [subplebbitAddress: string]: boolean };
+  toggleVisibility: (subplebbitAddress: string) => void;
+}
+
+const useSubplebbitStatsVisibilityStore = create<SubplebbitStatsVisibilityState>()(
+  persist(
+    (set) => ({
+      hiddenStats: {},
+      toggleVisibility: (subplebbitAddress) =>
+        set((state) => ({
+          hiddenStats: {
+            ...state.hiddenStats,
+            [subplebbitAddress]: !state.hiddenStats[subplebbitAddress],
+          },
+        })),
+    }),
+    {
+      name: 'subplebbit-stats-visibility',
+    },
+  ),
+);
+
+export default useSubplebbitStatsVisibilityStore;