feat(app): add description and rules views

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

@@ -1,12 +1,21 @@
 import { useEffect } from 'react';
-import { useComment } from '@plebbit/plebbit-react-hooks';
-import { useParams } from 'react-router-dom';
+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';
 
 const PostPage = () => {
   const params = useParams();
-  const { commentCid } = params;
+  const { commentCid, subplebbitAddress } = params;
+
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const { createdAt, description, rules, suggested, title } = subplebbit;
+
+  const location = useLocation();
+  const isInDescriptionView = isDescriptionView(location.pathname, params);
+  const isInRulesView = isRulesView(location.pathname, params);
 
   const post = useComment({ commentCid });
 
@@ -16,7 +25,13 @@ const PostPage = () => {
 
   return (
     <div className={styles.content}>
-      <Post post={post} showAllReplies={true} />
+      {isInDescriptionView ? (
+        <DescriptionPost avatarUrl={suggested?.avatarUrl} createdAt={createdAt} description={description} subplebbitAddress={subplebbitAddress} title={title} />
+      ) : isInRulesView ? (
+        <RulesPost createdAt={createdAt} rules={rules} subplebbitAddress={subplebbitAddress} />
+      ) : (
+        <Post post={post} showAllReplies={true} />
+      )}
     </div>
   );
 };

src/views/subplebbit/subplebbit.tsx

@@ -10,6 +10,52 @@ import Post from '../../components/post';
 
 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 }>();
@@ -20,35 +66,6 @@ const Subplebbit = () => {
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {};
 
-  const descriptionPost = useMemo(
-    () => ({
-      isDescription: true,
-      subplebbitAddress,
-      timestamp: createdAt,
-      author: { displayName: '## Board Mods' },
-      content: description,
-      link: suggested?.avatarUrl,
-      title: 'Welcome to ' + (title || `p/${shortAddress}`) + '!',
-      pinned: true,
-      locked: true,
-    }),
-    [subplebbitAddress, createdAt, description, suggested?.avatarUrl, title, shortAddress],
-  );
-
-  const rulesPost = useMemo(
-    () => ({
-      isRules: true,
-      subplebbitAddress,
-      timestamp: createdAt,
-      author: { displayName: '## Board Mods' },
-      content: rules && rules.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n'),
-      title: 'Rules',
-      pinned: true,
-      locked: true,
-    }),
-    [subplebbitAddress, createdAt, rules],
-  );
-
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
   const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
 
@@ -87,8 +104,10 @@ const Subplebbit = () => {
     <div className={styles.content}>
       {createdAt && (
         <>
-          {rules && rules.length > 0 && <Post post={rulesPost} />}
-          {description && description.length > 0 && <Post post={descriptionPost} />}
+          {rules && rules.length > 0 && <RulesPost subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
+          {description && description.length > 0 && (
+            <DescriptionPost avatarUrl={suggested?.avatarUrl} subplebbitAddress={subplebbitAddress} createdAt={createdAt} description={description} title={title} />
+          )}
         </>
       )}
       <Virtuoso