refactor: make components for rules, description, rename stats

src/components/subplebbit-stats/index.ts

@@ -0,0 +1 @@
+export { default } from './subplebbit-stats';

src/components/subplebbit-stats/subplebbit-stats.module.css

@@ -0,0 +1,54 @@
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+.content hr {
+  min-width: 468px;
+  margin-left: -4px;
+  margin-bottom: 6px;
+}
+
+.blotter {
+  min-width: 468px;
+  margin: auto;
+  line-height: 1;
+  margin-top: -1px;
+}
+
+.blotter tr {
+  font-size: var(--stats-font-size);
+}
+
+.blotter tfoot {
+  text-align: right;
+}
+
+.hideButton {
+  color: var(--button-desktop-text-color);
+  text-decoration: var(--button-text-decoration);
+  text-transform: capitalize;
+}
+
+.hideButton:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}
+
+.statValue {
+  color: var(--button-desktop-text-color);
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+
+@media (max-width: 640px) {
+  .content {
+    display: none;
+  }
+}

src/components/subplebbit-stats/subplebbit-stats.tsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
+import styles from './subplebbit-stats.module.css';
+import { Trans, useTranslation } from 'react-i18next';
+import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
+
+const SubplebbitStats = () => {
+  const { t } = useTranslation();
+  const { commentCid, subplebbitAddress } = useParams<{ subplebbitAddress: string; commentCid: string }>();
+
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const { address, createdAt } = subplebbit || {};
+
+  const location = useLocation();
+  const params = useParams();
+  const isInDescriptionView = isDescriptionView(location.pathname, params);
+  const isInRulesView = isRulesView(location.pathname, params);
+
+  const comment = useComment({ commentCid });
+  const { deleted, locked, removed } = comment || {};
+  const hideStats = deleted || locked || removed || isInDescriptionView || isInRulesView;
+
+  const stats = useSubplebbitStats({ subplebbitAddress: address });
+  const [showStats, setShowStats] = useState(true);
+
+  const unixToMMDDYYYY = (timestamp: number) => {
+    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().toString().slice(-2);
+    return month + '/' + day + '/' + year;
+  };
+
+  return (
+    <div className={`${styles.content} ${hideStats ? styles.hide : styles.show}`}>
+      <table className={styles.blotter}>
+        <thead>
+          <tr>
+            <td>
+              <hr />
+            </td>
+          </tr>
+        </thead>
+        {showStats && (
+          <tbody>
+            <tr>
+              <td>
+                <Trans
+                  i18nKey='board_stats_hour'
+                  values={{ userCount: stats.hourActiveUserCount, postCount: stats.hourPostCount }}
+                  components={{ 1: <span className={styles.statValue} /> }}
+                />
+                {' / '}
+                <Trans
+                  i18nKey='board_stats_day'
+                  values={{ userCount: stats.dayActiveUserCount, postCount: stats.dayPostCount }}
+                  components={{ 1: <span className={styles.statValue} /> }}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Trans
+                  i18nKey='board_stats_week'
+                  values={{ userCount: stats.weekActiveUserCount, postCount: stats.weekPostCount }}
+                  components={{ 1: <span className={styles.statValue} /> }}
+                />
+                {' / '}
+                <Trans
+                  i18nKey='board_stats_month'
+                  values={{ userCount: stats.monthActiveUserCount, postCount: stats.monthPostCount }}
+                  components={{ 1: <span className={styles.statValue} /> }}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td className={styles.lowercase}>
+                {createdAt && unixToMMDDYYYY(createdAt)} {t('board_created')}
+                {' / '}
+                <Trans
+                  i18nKey='board_stats_all'
+                  values={{ userCount: stats.allActiveUserCount, postCount: stats.allPostCount }}
+                  components={{ 1: <span className={styles.statValue} /> }}
+                />
+              </td>
+            </tr>
+          </tbody>
+        )}
+        <tfoot>
+          <tr>
+            <td colSpan={2}>
+              [
+              <span className={styles.hideButton} onClick={() => setShowStats(!showStats)}>
+                {showStats ? t('hide') : t('show_stats')}
+              </span>
+              ]
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+};
+
+export default SubplebbitStats;