added board stats

src/components/BoardStats.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { useSubplebbitStats } from "@plebbit/plebbit-react-hooks/dist";
+import { BoardStatsContainer } from "./styled/BoardStats.styled";
+import { Break } from "./styled/views/Board.styled";
+import useGeneralStore from '../hooks/stores/useGeneralStore';
+
+
+const BoardStats = ({ subplebbitAddress }) => {
+  const { selectedStyle } = useGeneralStore(state => state);
+  const stats = useSubplebbitStats({subplebbitAddress});
+
+  return (
+    <BoardStatsContainer>
+      <Break selectedStyle={selectedStyle} style={{width: '468px'}}/>
+      <table id="blotter">
+        <tbody id="blotter-msgs">
+          <tr>
+            <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></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>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Since inception: <strong>{stats.allActiveUserCount}</strong> users browsed; <strong>{stats.allPostCount}</strong> posts made.</td>
+          </tr>
+        </tbody>
+      </table>
+    </BoardStatsContainer>
+  );  
+};
+
+export default BoardStats;

src/components/styled/BoardStats.styled.jsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+export const BoardStatsContainer = styled.div`
+  @media (max-width: 480px) {
+    display: none;
+  }
+
+  @media (min-width: 480px) {
+    width: 468px;
+    margin: auto;
+  
+    table {
+      border-spacing: 0px;
+      text-align: center;
+      width: 100%;
+    }
+  
+    tr {
+      vertical-align: top;
+      font-size: 11px;
+    }
+  }
+`;

src/components/views/Board.jsx

@@ -13,11 +13,12 @@ import { Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import EditModal from '../modals/EditModal';
-import EditLabel from '../EditLabel';
-import ImageBanner from '../ImageBanner';
 import AdminListModal from '../modals/AdminListModal';
 import ModerationModal from '../modals/ModerationModal';
 import BoardSettings from '../BoardSettings';
+import BoardStats from '../BoardStats';
+import EditLabel from '../EditLabel';
+import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
 import Post from '../Post';
@@ -836,56 +837,57 @@ const Board = () => {
         </Header>
         <Break selectedStyle={selectedStyle} />
         <PostForm selectedStyle={selectedStyle}>
-        <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
-          <div id="post-form-link-desktop">
-            [
-              <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
-            ]
-          </div>
-          <div id="post-form-link-mobile">
-            <span className="btn-wrap">
-              <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
-            </span>
-          </div>
-        </PostFormLink>
-        <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
-          <tbody>
-            <tr data-type="Name">
-              <td id="td-name">Name</td>
-              <td>
-                {account && account?.author && account?.author.displayName ? (
-                  <input name="name" type="text" tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled />
-                ) : (
-                  <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
-                )}
-              </td>
-            </tr>
-            <tr data-type="Subject">
-              <td>Subject</td>
-              <td>
-                <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
-                <input id="post-button" type="submit" value="Post" tabIndex={6} 
-                onClick={handleSubmit} />
-              </td>
-            </tr>
-            <tr data-type="Comment">
-              <td>Comment</td>
-              <td>
-                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
-              </td>
-            </tr>
-            <tr data-type="File">
-              <td>Embed File</td>
-              <td>
-                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
-                <button id="t-help" type="button" onClick={
-                  () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
-                } data-tip="Help">?</button>
-              </td>
-            </tr>
-          </tbody>
-        </PostFormTable>
+          <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
+            <div id="post-form-link-desktop">
+              [
+                <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
+              ]
+            </div>
+            <div id="post-form-link-mobile">
+              <span className="btn-wrap">
+                <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
+              </span>
+            </div>
+          </PostFormLink>
+          <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
+            <tbody>
+              <tr data-type="Name">
+                <td id="td-name">Name</td>
+                <td>
+                  {account && account?.author && account?.author.displayName ? (
+                    <input name="name" type="text" tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled />
+                  ) : (
+                    <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
+                  )}
+                </td>
+              </tr>
+              <tr data-type="Subject">
+                <td>Subject</td>
+                <td>
+                  <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
+                  <input id="post-button" type="submit" value="Post" tabIndex={6} 
+                  onClick={handleSubmit} />
+                </td>
+              </tr>
+              <tr data-type="Comment">
+                <td>Comment</td>
+                <td>
+                  <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
+                </td>
+              </tr>
+              <tr data-type="File">
+                <td>Embed File</td>
+                <td>
+                  <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
+                  <button id="t-help" type="button" onClick={
+                    () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
+                  } data-tip="Help">?</button>
+                </td>
+              </tr>
+            </tbody>
+          </PostFormTable>
         </PostForm>
+        <BoardStats subplebbitAddress={subplebbitAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <hr />
           <span className="style-changer">

src/components/views/Catalog.jsx

@@ -11,15 +11,16 @@ import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
 import { TopBar, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
-import CatalogLoader from '../CatalogLoader';
 import EditModal from '../modals/EditModal';
-import ImageBanner from '../ImageBanner';
-import VerifiedAuthor from '../VerifiedAuthor';
 import CreateBoardModal from '../modals/CreateBoardModal';
 import ModerationModal from '../modals/ModerationModal';
-import BoardSettings from '../BoardSettings';
-import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
+import BoardSettings from '../BoardSettings';
+import BoardStats from '../BoardStats';
+import CatalogLoader from '../CatalogLoader';
+import ImageBanner from '../ImageBanner';
+import OfflineIndicator from '../OfflineIndicator';
+import VerifiedAuthor from '../VerifiedAuthor';
 import countLinks from '../../utils/countLinks';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleShareClick from '../../utils/handleShareClick';
@@ -1252,6 +1253,7 @@ const Catalog = () => {
             </tbody>
           </PostFormTable>
         </PostForm>
+        <BoardStats subplebbitAddress={subplebbitAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <hr />
           <span className="style-changer">

src/components/views/Description.jsx

@@ -8,6 +8,7 @@ import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled';
 import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
+import BoardStats from '../BoardStats';
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import CreateBoardModal from '../modals/CreateBoardModal';
@@ -256,6 +257,7 @@ const Description = () => {
             </div>
           </ReplyFormLink>
         </PostForm>
+        <BoardStats subplebbitAddress={selectedAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <span className="style-changer">
             Style:

src/components/views/Pending.jsx

@@ -6,6 +6,7 @@ import { useAccount, useAccountComment, useSubplebbit } from '@plebbit/plebbit-r
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, BoardForm } from '../styled/views/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from '../styled/views/Thread.styled';
+import BoardStats from '../BoardStats';
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
@@ -41,7 +42,9 @@ const Pending = () => {
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
   const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
-  const subplebbit = useSubplebbit({subplebbitAddress: comment?.subplebbitAddress})
+  const subplebbitAddress = comment?.subplebbitAddress;
+
+  const subplebbit = useSubplebbit({subplebbitAddress})
   const selectedTitle = subplebbit?.title;
 
   const handleThumbnailClick = (index, isMobile=false) => {
@@ -229,6 +232,7 @@ const Pending = () => {
             <div>&nbsp;</div>
           </ReplyFormLink>
         </PostForm>
+        <BoardStats subplebbitAddress={subplebbitAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <hr />
           <span className="style-changer">

src/components/views/Rules.jsx

@@ -8,6 +8,7 @@ import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled';
 import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
+import BoardStats from '../BoardStats';
 import ImageBanner from '../ImageBanner';
 import CreateBoardModal from '../modals/CreateBoardModal';
 import AdminListModal from '../modals/AdminListModal';
@@ -262,6 +263,7 @@ const Rules = () => {
             </div>
           </ReplyFormLink>
         </PostForm>
+        <BoardStats subplebbitAddress={selectedAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <span className="style-changer">
             Style:

src/components/views/Thread.jsx

@@ -11,10 +11,9 @@ import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } f
 import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
-import EditModal from '../modals/EditModal';
+import BoardStats from '../BoardStats';
 import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
-import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
 import Post from '../Post';
@@ -23,6 +22,8 @@ import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
 import VerifiedAuthor from '../VerifiedAuthor';
 import CreateBoardModal from '../modals/CreateBoardModal';
+import EditModal from '../modals/EditModal';
+import ModerationModal from '../modals/ModerationModal';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -793,6 +794,7 @@ const Thread = () => {
             </tbody>
           </PostFormTable>
         </PostForm>
+        <BoardStats subplebbitAddress={subplebbitAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <hr />
           <span className="style-changer">