update board stats

src/components/BoardStats.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useSubplebbitStats } from "@plebbit/plebbit-react-hooks/dist";
 import { BoardStatsContainer } from "./styled/BoardStats.styled";
 import { Break } from "./styled/views/Board.styled";
@@ -8,29 +8,45 @@ import useGeneralStore from '../hooks/stores/useGeneralStore';
 const BoardStats = ({ subplebbitAddress }) => {
   const { selectedStyle } = useGeneralStore(state => state);
   const stats = useSubplebbitStats({subplebbitAddress});
+  const [showStats, setShowStats] = useState(true);
+
+  const handleToggleStats = () => { 
+    setShowStats(!showStats);
+  };
 
   return (
-    <BoardStatsContainer>
+    <BoardStatsContainer selectedStyle={selectedStyle}>
       <Break selectedStyle={selectedStyle} style={{width: '468px'}}/>
-      <table id="blotter">
+        <table id="blotter">
-        <tbody id="blotter-msgs">
+          {showStats && (
-          <tr>
+            <tbody id="blotter-msgs">
-            <td>In the past hour: <strong>{stats.hourActiveUserCount}</strong> users, <strong>{stats.hourPostCount}</strong> posts.&nbsp;&nbsp;Past day: <strong>{stats.dayActiveUserCount}</strong> users, <strong>{stats.dayPostCount}</strong> posts.</td>
+              <tr>
-          </tr>
+                <td>Since this board was created, <span id="stat-number">{stats.allActiveUserCount}</span> users made <span id="stat-number">{stats.allPostCount}</span> posts in it.</td>
-          <tr>
+              </tr>
-            <td></td>
+              <tr>
-          </tr>
+                <td>In the past month, <span id="stat-number">{stats.monthActiveUserCount}</span> users made <span id="stat-number">{stats.monthPostCount}</span> posts.&nbsp;&nbsp;In the past week, <span id="stat-number">{stats.weekActiveUserCount}</span> users made <span id="stat-number">{stats.weekPostCount}</span> posts.</td>
-          <tr>
+              </tr>
-            <td>Past week: <strong>{stats.weekActiveUserCount}</strong> users, <strong>{stats.weekPostCount}</strong> posts.&nbsp;&nbsp;Past month: <strong>{stats.monthActiveUserCount}</strong> users, <strong>{stats.monthPostCount}</strong> posts.</td>
+              <tr>
-          </tr>
+              </tr>
-          <tr>
+              <tr>
-            <td></td>
+                <td>In the past day, <span id="stat-number">{stats.dayActiveUserCount}</span> users made <span id="stat-number">{stats.dayPostCount}</span> posts.&nbsp;&nbsp;In the past hour, <span id="stat-number">{stats.hourActiveUserCount}</span> users made <span id="stat-number">{stats.hourPostCount}</span> posts.</td>
-          </tr>
+              </tr>
-          <tr>
+              <tr>
-            <td>Since inception: <strong>{stats.allActiveUserCount}</strong> users browsed; <strong>{stats.allPostCount}</strong> posts made.</td>
+              </tr>
-          </tr>
+            </tbody>
-        </tbody>
+          )}
-      </table>
+          <tfoot>
+            <tr>
+              <td colSpan={2}>
+                [
+                  <span id="stat-number" className="hide-button" onClick={handleToggleStats}>
+                    {showStats ? 'Hide Stats' : 'Show Stats'}
+                  </span>
+                ]
+              </td>
+            </tr>
+          </tfoot>
+        </table>
     </BoardStatsContainer>
   );  
 };

src/components/styled/BoardStats.styled.jsx

@@ -8,10 +8,10 @@ export const BoardStatsContainer = styled.div`
   @media (min-width: 480px) {
     width: 468px;
     margin: auto;
+    line-height: 1;
   
     table {
       border-spacing: 0px;
-      text-align: center;
       width: 100%;
     }
   
@@ -20,4 +20,79 @@ export const BoardStatsContainer = styled.div`
       font-size: 11px;
     }
   }
+
+  tfoot {
+    text-align: right;
+  }
+
+  .hide-button:hover {
+    cursor: pointer;
+  }
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
+        #stat-number {
+          color: #00e;
+        }
+        
+        .hide-button:hover {
+          color: red !important;
+        }`;
+
+      case 'Yotsuba-B':
+        return `
+        #stat-number {
+          color: #34345c;
+        }
+        
+        .hide-button:hover {
+          color: #d00 !important;
+        }`;
+
+      case 'Futaba':
+        return `
+        #stat-number {
+          color: #00e;
+        }
+        
+        .hide-button:hover {
+          color: red !important;
+        }`;
+
+      case 'Burichan':
+        return `
+        #stat-number {
+          color: #34345c;
+        }
+        
+        .hide-button:hover {
+          color: red !important;
+        }`;
+
+      case 'Tomorrow':
+        return `
+        #stat-number {
+          color: #81a2be;
+        }
+        
+        .hide-button:hover {
+          color: #5f89ab !important;
+        }`;
+
+      case 'Photon':
+        return `
+        #stat-number {
+          color: #f60;
+        }
+        
+        .hide-button:hover {
+          color: #ff3300 !important;
+        }`;
+     	
+      default:
+	      return '';
+    }
+  }}
 `;