From 9aab7624ec31c34953f5e514c877d278d74ef27c Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Tue, 9 Apr 2024 15:03:26 +0200 Subject: [PATCH] refactor: make components for rules, description, rename stats --- src/app.tsx | 4 +- src/components/board-stats/index.ts | 1 - .../subplebbit-description/index.ts | 1 + .../subplebbit-description.tsx | 26 ++++++++++ src/components/subplebbit-rules/index.ts | 1 + .../subplebbit-rules/subplebbit-rules.tsx | 25 +++++++++ src/components/subplebbit-stats/index.ts | 1 + .../subplebbit-stats.module.css} | 0 .../subplebbit-stats.tsx} | 6 +-- src/views/post-page/post-page.tsx | 11 ++-- src/views/subplebbit/subplebbit.tsx | 52 ++----------------- 11 files changed, 69 insertions(+), 59 deletions(-) delete mode 100644 src/components/board-stats/index.ts create mode 100644 src/components/subplebbit-description/index.ts create mode 100644 src/components/subplebbit-description/subplebbit-description.tsx create mode 100644 src/components/subplebbit-rules/index.ts create mode 100644 src/components/subplebbit-rules/subplebbit-rules.tsx create mode 100644 src/components/subplebbit-stats/index.ts rename src/components/{board-stats/board-stats.module.css => subplebbit-stats/subplebbit-stats.module.css} (100%) rename src/components/{board-stats/board-stats.tsx => subplebbit-stats/subplebbit-stats.tsx} (97%) diff --git a/src/app.tsx b/src/app.tsx index 60456ca3..fd12e9b8 100644 --- a/src/app.tsx +++ b/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 = () => { - + diff --git a/src/components/board-stats/index.ts b/src/components/board-stats/index.ts deleted file mode 100644 index 0fd4e296..00000000 --- a/src/components/board-stats/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './board-stats'; diff --git a/src/components/subplebbit-description/index.ts b/src/components/subplebbit-description/index.ts new file mode 100644 index 00000000..cdf050b8 --- /dev/null +++ b/src/components/subplebbit-description/index.ts @@ -0,0 +1 @@ +export { default } from './subplebbit-description'; diff --git a/src/components/subplebbit-description/subplebbit-description.tsx b/src/components/subplebbit-description/subplebbit-description.tsx new file mode 100644 index 00000000..7e5ee979 --- /dev/null +++ b/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 ; +}; + +export default SubplebbitDescription; diff --git a/src/components/subplebbit-rules/index.ts b/src/components/subplebbit-rules/index.ts new file mode 100644 index 00000000..fa4e632f --- /dev/null +++ b/src/components/subplebbit-rules/index.ts @@ -0,0 +1 @@ +export { default } from './subplebbit-rules'; diff --git a/src/components/subplebbit-rules/subplebbit-rules.tsx b/src/components/subplebbit-rules/subplebbit-rules.tsx new file mode 100644 index 00000000..78f9edb6 --- /dev/null +++ b/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 ; +}; + +export default SubplebbitRules; diff --git a/src/components/subplebbit-stats/index.ts b/src/components/subplebbit-stats/index.ts new file mode 100644 index 00000000..41bc8b4c --- /dev/null +++ b/src/components/subplebbit-stats/index.ts @@ -0,0 +1 @@ +export { default } from './subplebbit-stats'; diff --git a/src/components/board-stats/board-stats.module.css b/src/components/subplebbit-stats/subplebbit-stats.module.css similarity index 100% rename from src/components/board-stats/board-stats.module.css rename to src/components/subplebbit-stats/subplebbit-stats.module.css diff --git a/src/components/board-stats/board-stats.tsx b/src/components/subplebbit-stats/subplebbit-stats.tsx similarity index 97% rename from src/components/board-stats/board-stats.tsx rename to src/components/subplebbit-stats/subplebbit-stats.tsx index 87b713c0..58883e45 100644 --- a/src/components/board-stats/board-stats.tsx +++ b/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; diff --git a/src/views/post-page/post-page.tsx b/src/views/post-page/post-page.tsx index da88c147..9f96b459 100644 --- a/src/views/post-page/post-page.tsx +++ b/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 (
{isInDescriptionView ? ( - + ) : isInRulesView ? ( - + ) : ( )} diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx index 372a65e4..7acde210 100644 --- a/src/views/subplebbit/subplebbit.tsx +++ b/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 ; -}; - -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 ; -}; - const Subplebbit = () => { const { t } = useTranslation(); const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); @@ -104,9 +60,9 @@ const Subplebbit = () => {
{createdAt && ( <> - {rules && rules.length > 0 && } + {rules && rules.length > 0 && } {description && description.length > 0 && ( - + )} )}