refactor: make components for rules, description, rename stats

src/app.tsx

@@ -13,7 +13,7 @@ import BoardNav from './components/board-nav';
 import BoardBanner from './components/board-banner';
 import { DesktopBoardButtons } from './components/board-buttons';
 import { MobileBoardButtons } from './components/board-buttons';
-import BoardStats from './components/board-stats';
+import SubplebbitStats from './components/subplebbit-stats';
 import PostForm from './components/post-form';
 
 const App = () => {
@@ -42,7 +42,7 @@ const App = () => {
       <BoardBanner />
       <MobileBoardButtons />
       <PostForm />
-      <BoardStats />
+      <SubplebbitStats />
       <DesktopBoardButtons />
       <Outlet />
     </>

src/components/board-stats/index.ts

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

src/components/subplebbit-description/index.ts

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

src/components/subplebbit-description/subplebbit-description.tsx

@@ -0,0 +1,26 @@
+import Post from '../post';
+interface DescriptionPostProps {
+  subplebbitAddress: string | undefined;
+  createdAt: number;
+  description: string;
+  avatarUrl?: string;
+  title: string;
+}
+
+export const SubplebbitDescription = ({ subplebbitAddress, createdAt, description, avatarUrl, title }: DescriptionPostProps) => {
+  const post = {
+    isDescription: true,
+    subplebbitAddress,
+    timestamp: createdAt,
+    author: { displayName: '## Board Mods' },
+    content: description,
+    link: avatarUrl,
+    title: 'Welcome to ' + title,
+    pinned: true,
+    locked: true,
+  };
+
+  return <Post post={post} />;
+};
+
+export default SubplebbitDescription;

src/components/subplebbit-rules/index.ts

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

src/components/subplebbit-rules/subplebbit-rules.tsx

@@ -0,0 +1,25 @@
+import Post from '../post';
+
+interface RulesPostProps {
+  subplebbitAddress: string | undefined;
+  createdAt: number;
+  rules: string[];
+}
+
+export const SubplebbitRules = ({ subplebbitAddress, createdAt, rules }: RulesPostProps) => {
+  const content = rules.map((rule, index) => `${index + 1}. ${rule}`).join('\n');
+  const post = {
+    isRules: true,
+    subplebbitAddress,
+    timestamp: createdAt,
+    author: { displayName: '## Board Mods' },
+    content,
+    title: 'Rules',
+    pinned: true,
+    locked: true,
+  };
+
+  return <Post post={post} />;
+};
+
+export default SubplebbitRules;

src/components/subplebbit-stats/index.ts

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

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

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
-import styles from './board-stats.module.css';
+import styles from './subplebbit-stats.module.css';
 import { Trans, useTranslation } from 'react-i18next';
 import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
 
-const BoardStats = () => {
+const SubplebbitStats = () => {
   const { t } = useTranslation();
   const { commentCid, subplebbitAddress } = useParams<{ subplebbitAddress: string; commentCid: string }>();
 
@@ -103,4 +103,4 @@ const BoardStats = () => {
   );
 };
 
-export default BoardStats;
+export default SubplebbitStats;

src/views/post-page/post-page.tsx

@@ -1,10 +1,11 @@
 import { useEffect } from 'react';
 import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { useLocation, useParams } from 'react-router-dom';
-import Post from '../../components/post/post';
-import styles from './post-page.module.css';
-import { DescriptionPost, RulesPost } from '../subplebbit/subplebbit';
 import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
+import styles from './post-page.module.css';
+import Post from '../../components/post';
+import SubplebbitDescription from '../../components/subplebbit-description';
+import SubplebbitRules from '../../components/subplebbit-rules';
 
 const PostPage = () => {
   const params = useParams();
@@ -26,9 +27,9 @@ const PostPage = () => {
   return (
     <div className={styles.content}>
       {isInDescriptionView ? (
-        <DescriptionPost avatarUrl={suggested?.avatarUrl} createdAt={createdAt} description={description} subplebbitAddress={subplebbitAddress} title={title} />
+        <SubplebbitDescription avatarUrl={suggested?.avatarUrl} createdAt={createdAt} description={description} subplebbitAddress={subplebbitAddress} title={title} />
       ) : isInRulesView ? (
-        <RulesPost createdAt={createdAt} rules={rules} subplebbitAddress={subplebbitAddress} />
+        <SubplebbitRules createdAt={createdAt} rules={rules} subplebbitAddress={subplebbitAddress} />
       ) : (
         <Post post={post} showAllReplies={true} />
       )}

src/views/subplebbit/subplebbit.tsx

@@ -7,55 +7,11 @@ import styles from './subplebbit.module.css';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import Post from '../../components/post';
+import SubplebbitDescription from '../../components/subplebbit-description';
+import SubplebbitRules from '../../components/subplebbit-rules';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
-interface DescriptionPostProps {
-  subplebbitAddress: string | undefined;
-  createdAt: number;
-  description: string;
-  avatarUrl?: string;
-  title: string;
-}
-
-export const DescriptionPost = ({ subplebbitAddress, createdAt, description, avatarUrl, title }: DescriptionPostProps) => {
-  const post = {
-    isDescription: true,
-    subplebbitAddress,
-    timestamp: createdAt,
-    author: { displayName: '## Board Mods' },
-    content: description,
-    link: avatarUrl,
-    title: 'Welcome to ' + title,
-    pinned: true,
-    locked: true,
-  };
-
-  return <Post post={post} />;
-};
-
-interface RulesPostProps {
-  subplebbitAddress: string | undefined;
-  createdAt: number;
-  rules: string[];
-}
-
-export const RulesPost = ({ subplebbitAddress, createdAt, rules }: RulesPostProps) => {
-  const content = rules.map((rule, index) => `${index + 1}. ${rule}`).join('\n');
-  const post = {
-    isRules: true,
-    subplebbitAddress,
-    timestamp: createdAt,
-    author: { displayName: '## Board Mods' },
-    content,
-    title: 'Rules',
-    pinned: true,
-    locked: true,
-  };
-
-  return <Post post={post} />;
-};
-
 const Subplebbit = () => {
   const { t } = useTranslation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
@@ -104,9 +60,9 @@ const Subplebbit = () => {
     <div className={styles.content}>
       {createdAt && (
         <>
-          {rules && rules.length > 0 && <RulesPost subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
+          {rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
           {description && description.length > 0 && (
-            <DescriptionPost avatarUrl={suggested?.avatarUrl} subplebbitAddress={subplebbitAddress} createdAt={createdAt} description={description} title={title} />
+            <SubplebbitDescription avatarUrl={suggested?.avatarUrl} subplebbitAddress={subplebbitAddress} createdAt={createdAt} description={description} title={title} />
           )}
         </>
       )}