refactor: make components for rules, description, rename stats

This commit is contained in:
plebeius.eth
2024-04-09 15:03:26 +02:00
parent 6c86cc0124
commit 9aab7624ec
11 changed files with 69 additions and 59 deletions
+6 -5
View File
@@ -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} />
)}
+4 -48
View File
@@ -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} />
)}
</>
)}