External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

added board stats

Browse Source
This commit is contained in:
plebeius.eth
2023-08-22 16:18:55 +02:00
parent c4361ce78b
commit a1ac0fc940
8 changed files with 134 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardStats.jsx
+38
View File
@@ -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
+23
View File
@@ -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
+53 -51
View File
@@ -13,11 +13,12 @@ import { Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import EditModal from '../modals/EditModal'; import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel';
import ImageBanner from '../ImageBanner';
import AdminListModal from '../modals/AdminListModal'; import AdminListModal from '../modals/AdminListModal';
import ModerationModal from '../modals/ModerationModal'; import ModerationModal from '../modals/ModerationModal';
import BoardSettings from '../BoardSettings'; import BoardSettings from '../BoardSettings';
import BoardStats from '../BoardStats';
import EditLabel from '../EditLabel';
import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import PendingLabel from '../PendingLabel'; import PendingLabel from '../PendingLabel';
import Post from '../Post'; import Post from '../Post';
@@ -836,56 +837,57 @@ const Board = () => {
</Header> </Header>
<Break selectedStyle={selectedStyle} /> <Break selectedStyle={selectedStyle} />
<PostForm selectedStyle={selectedStyle}> <PostForm selectedStyle={selectedStyle}>
<PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} > <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="post-form-link-desktop"> <div id="post-form-link-desktop">
[ [
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link> <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
] ]
</div> </div>
<div id="post-form-link-mobile"> <div id="post-form-link-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link> <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
</span> </span>
</div> </div>
</PostFormLink> </PostFormLink>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form"> <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
<tbody> <tbody>
<tr data-type="Name"> <tr data-type="Name">
<td id="td-name">Name</td> <td id="td-name">Name</td>
<td> <td>
{account && account?.author && account?.author.displayName ? ( {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" tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled />
) : ( ) : (
<input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} /> <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
)} )}
</td> </td>
</tr> </tr>
<tr data-type="Subject"> <tr data-type="Subject">
<td>Subject</td> <td>Subject</td>
<td> <td>
<input name="sub" type="text" tabIndex={3} ref={subjectRef}/> <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
<input id="post-button" type="submit" value="Post" tabIndex={6} <input id="post-button" type="submit" value="Post" tabIndex={6}
onClick={handleSubmit} /> onClick={handleSubmit} />
</td> </td>
</tr> </tr>
<tr data-type="Comment"> <tr data-type="Comment">
<td>Comment</td> <td>Comment</td>
<td> <td>
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} /> <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
</td> </td>
</tr> </tr>
<tr data-type="File"> <tr data-type="File">
<td>Embed File</td> <td>Embed File</td>
<td> <td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} /> <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
<button id="t-help" type="button" onClick={ <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.") () => 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> } data-tip="Help">?</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</PostFormTable> </PostFormTable>
</PostForm> </PostForm>
<BoardStats subplebbitAddress={subplebbitAddress} />
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
<hr /> <hr />
<span className="style-changer"> <span className="style-changer">
src/components/views/Catalog.jsx
+7 -5
View File
@@ -11,15 +11,16 @@ import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled'; import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled'; import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal'; import EditModal from '../modals/EditModal';
import ImageBanner from '../ImageBanner';
import VerifiedAuthor from '../VerifiedAuthor';
import CreateBoardModal from '../modals/CreateBoardModal'; import CreateBoardModal from '../modals/CreateBoardModal';
import ModerationModal from '../modals/ModerationModal'; import ModerationModal from '../modals/ModerationModal';
import BoardSettings from '../BoardSettings';
import OfflineIndicator from '../OfflineIndicator';
import SettingsModal from '../modals/SettingsModal'; 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 countLinks from '../../utils/countLinks';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import handleShareClick from '../../utils/handleShareClick'; import handleShareClick from '../../utils/handleShareClick';
@@ -1252,6 +1253,7 @@ const Catalog = () => {
</tbody> </tbody>
</PostFormTable> </PostFormTable>
</PostForm> </PostForm>
<BoardStats subplebbitAddress={subplebbitAddress} />
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
<hr /> <hr />
<span className="style-changer"> <span className="style-changer">
src/components/views/Description.jsx
+2
View File
@@ -8,6 +8,7 @@ import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled';
import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import BoardStats from '../BoardStats';
import ImageBanner from '../ImageBanner'; import ImageBanner from '../ImageBanner';
import Post from '../Post'; import Post from '../Post';
import CreateBoardModal from '../modals/CreateBoardModal'; import CreateBoardModal from '../modals/CreateBoardModal';
@@ -256,6 +257,7 @@ const Description = () => {
</div> </div>
</ReplyFormLink> </ReplyFormLink>
</PostForm> </PostForm>
<BoardStats subplebbitAddress={selectedAddress} />
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
<span className="style-changer"> <span className="style-changer">
Style: Style:
src/components/views/Pending.jsx
+5 -1
View File
@@ -6,6 +6,7 @@ import { useAccount, useAccountComment, useSubplebbit } from '@plebbit/plebbit-r
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostForm, BoardForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostForm, BoardForm } from '../styled/views/Board.styled';
import { ReplyFormLink, TopBar, BottomBar } from '../styled/views/Thread.styled'; import { ReplyFormLink, TopBar, BottomBar } from '../styled/views/Thread.styled';
import BoardStats from '../BoardStats';
import ImageBanner from '../ImageBanner'; import ImageBanner from '../ImageBanner';
import Post from '../Post'; import Post from '../Post';
import PostLoader from '../PostLoader'; import PostLoader from '../PostLoader';
@@ -41,7 +42,9 @@ const Pending = () => {
const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({}); const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const subplebbit = useSubplebbit({subplebbitAddress: comment?.subplebbitAddress}) const subplebbitAddress = comment?.subplebbitAddress;
const subplebbit = useSubplebbit({subplebbitAddress})
const selectedTitle = subplebbit?.title; const selectedTitle = subplebbit?.title;
const handleThumbnailClick = (index, isMobile=false) => { const handleThumbnailClick = (index, isMobile=false) => {
@@ -229,6 +232,7 @@ const Pending = () => {
<div>&nbsp;</div> <div>&nbsp;</div>
</ReplyFormLink> </ReplyFormLink>
</PostForm> </PostForm>
<BoardStats subplebbitAddress={subplebbitAddress} />
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
<hr /> <hr />
<span className="style-changer"> <span className="style-changer">
src/components/views/Rules.jsx
+2
View File
@@ -8,6 +8,7 @@ import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled';
import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import BoardStats from '../BoardStats';
import ImageBanner from '../ImageBanner'; import ImageBanner from '../ImageBanner';
import CreateBoardModal from '../modals/CreateBoardModal'; import CreateBoardModal from '../modals/CreateBoardModal';
import AdminListModal from '../modals/AdminListModal'; import AdminListModal from '../modals/AdminListModal';
@@ -262,6 +263,7 @@ const Rules = () => {
</div> </div>
</ReplyFormLink> </ReplyFormLink>
</PostForm> </PostForm>
<BoardStats subplebbitAddress={selectedAddress} />
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
<span className="style-changer"> <span className="style-changer">
Style: Style:
src/components/views/Thread.jsx
+4 -2
View File
@@ -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 { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import EditModal from '../modals/EditModal'; import BoardStats from '../BoardStats';
import EditLabel from '../EditLabel'; import EditLabel from '../EditLabel';
import ImageBanner from '../ImageBanner'; import ImageBanner from '../ImageBanner';
import ModerationModal from '../modals/ModerationModal';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import PendingLabel from '../PendingLabel'; import PendingLabel from '../PendingLabel';
import Post from '../Post'; import Post from '../Post';
@@ -23,6 +22,8 @@ import PostOnHover from '../PostOnHover';
import StateLabel from '../StateLabel'; import StateLabel from '../StateLabel';
import VerifiedAuthor from '../VerifiedAuthor'; import VerifiedAuthor from '../VerifiedAuthor';
import CreateBoardModal from '../modals/CreateBoardModal'; import CreateBoardModal from '../modals/CreateBoardModal';
import EditModal from '../modals/EditModal';
import ModerationModal from '../modals/ModerationModal';
import ReplyModal from '../modals/ReplyModal'; import ReplyModal from '../modals/ReplyModal';
import SettingsModal from '../modals/SettingsModal'; import SettingsModal from '../modals/SettingsModal';
import findShortParentCid from '../../utils/findShortParentCid'; import findShortParentCid from '../../utils/findShortParentCid';
@@ -793,6 +794,7 @@ const Thread = () => {
</tbody> </tbody>
</PostFormTable> </PostFormTable>
</PostForm> </PostForm>
<BoardStats subplebbitAddress={subplebbitAddress} />
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
<hr /> <hr />
<span className="style-changer"> <span className="style-changer">