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

update board stats

Browse Source
This commit is contained in:
plebeius.eth
2023-08-24 16:11:16 +02:00
parent 87ee38df3d
commit f95b8a9d9e
2 changed files with 113 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardStats.jsx
+37 -21
View File
@@ -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">
<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>
<table id="blotter">
{showStats && (
<tbody id="blotter-msgs">
<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>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>
</tr>
<tr>
<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>
</tbody>
)}
<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
+76 -1
View File
@@ -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 '';
}
}}
`;