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

improve board stats styling

Browse Source
This commit is contained in:
plebeius.eth
2023-08-25 10:09:57 +02:00
parent bf7fa6158e
commit b9e275a3c9
2 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardStats.jsx
+17 -9
View File
@@ -1,19 +1,31 @@
import React, { useState } from "react";
import { useSubplebbitStats } from "@plebbit/plebbit-react-hooks/dist";
import { useSubplebbit, 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});
const [showStats, setShowStats] = useState(true);
const subplebbit = useSubplebbit({subplebbitAddress});
const handleToggleStats = () => {
setShowStats(!showStats);
};
const unixToMMDDYYYY = (timestamp) => {
const date = new Date(timestamp * 1000);
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const year = date.getFullYear();
return month + '/' + day + '/' + year;
};
const pluralize = (count, singular, plural) => count === 1 ? singular : plural;
return (
<BoardStatsContainer selectedStyle={selectedStyle}>
<Break selectedStyle={selectedStyle} style={{width: '468px'}}/>
@@ -21,17 +33,13 @@ const BoardStats = ({ subplebbitAddress }) => {
{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>
<td>In the past hour, <span id="stat-number">{stats.hourActiveUserCount}</span> {pluralize(stats.hourActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.hourPostCount}</span> {pluralize(stats.hourPostCount, 'post', 'posts')} — In the past day, <span id="stat-number">{stats.dayActiveUserCount}</span> {pluralize(stats.dayActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.dayPostCount}</span> {pluralize(stats.dayPostCount, 'post', 'posts')}</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>
<td>In the past week, <span id="stat-number">{stats.weekActiveUserCount}</span> {pluralize(stats.weekActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.weekPostCount}</span> {pluralize(stats.weekPostCount, 'post', 'posts')} — In the past month, <span id="stat-number">{stats.monthActiveUserCount}</span> {pluralize(stats.monthActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.monthPostCount}</span> {pluralize(stats.monthPostCount, 'post', 'posts')}</td>
</tr>
<tr>
<td>{unixToMMDDYYYY(subplebbit.createdAt)} board created, since then <span id="stat-number">{stats.allActiveUserCount}</span> {pluralize(stats.allActiveUserCount, 'user', 'users')} have made <span id="stat-number">{stats.allPostCount}</span> {pluralize(stats.allPostCount, 'post', 'posts')}</td>
</tr>
</tbody>
)}
@@ -40,7 +48,7 @@ const BoardStats = ({ subplebbitAddress }) => {
<td colSpan={2}>
[
<span id="stat-number" className="hide-button" onClick={handleToggleStats}>
{showStats ? 'Hide Stats' : 'Show Stats'}
{showStats ? 'Hide' : 'Show Stats'}
</span>
]
</td>
src/components/styled/BoardStats.styled.jsx
+2
View File
@@ -1,6 +1,7 @@
import styled from "styled-components";
export const BoardStatsContainer = styled.div`
@media (max-width: 480px) {
display: none;
}
@@ -13,6 +14,7 @@ export const BoardStatsContainer = styled.div`
table {
border-spacing: 0px;
width: 100%;
margin-top: -1px;
}
tr {