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';
@@ -886,6 +887,7 @@ const Board = () => {
             </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">