From dcd29a46bb4032a3de934f3409a643a5dd5b3e5c Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 2 Apr 2024 17:00:36 +0200
Subject: [PATCH] feat(app): add post page

---
 src/app.tsx                              |   2 +
 src/components/post/post.tsx             | 206 ++++++++++++-----------
 src/views/post-page/index.ts             |   1 +
 src/views/post-page/post-page.module.css |   0
 src/views/post-page/post-page.tsx        |  19 +++
 5 files changed, 126 insertions(+), 102 deletions(-)
 create mode 100644 src/views/post-page/index.ts
 create mode 100644 src/views/post-page/post-page.module.css
 create mode 100644 src/views/post-page/post-page.tsx

diff --git a/src/app.tsx b/src/app.tsx
index b86c0056..dc4e1f76 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -6,6 +6,7 @@ import { useDefaultSubplebbitAddresses } from './hooks/use-default-subplebbits';
 import useTheme from './hooks/use-theme';
 import styles from './app.module.css';
 import Home from './views/home';
+import PostPage from './views/post-page';
 import Settings from './views/settings';
 import Subplebbit from './views/subplebbit';
 import BoardNav from './components/board-nav';
@@ -67,6 +68,7 @@ const App = () => {
         <Route path='/' element={<Home subplebbits={subplebbits} />} />
         <Route element={<BoardLayout subplebbits={subplebbits} />}>
           <Route path='/p/:subplebbitAddress' element={<Subplebbit subplebbits={subplebbits} />} />
+          <Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
         </Route>
         <Route path='/settings' element={<Settings />} />
       </Routes>
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 8d450319..de5f89ee 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -10,7 +10,7 @@ import styles from './post.module.css';
 import Markdown from '../markdown';
 import Media from '../media';
 
-const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
+const ReplyDesktop = ({ reply }: Comment) => {
   const { t } = useTranslation();
   const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
   const { displayName, shortAddress } = author || {};
@@ -20,79 +20,77 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
   const [showThumbnail, setShowThumbnail] = useState(true);
 
   return (
-    index < 5 && (
-      <div className={styles.replyDesktop}>
-        <div className={styles.sideArrows}>{'>>'}</div>
-        <div className={styles.reply}>
-          <div className={styles.postInfo}>
-            <span className={styles.checkbox}>
-              <input type='checkbox' />
-            </span>
-            <span className={styles.nameBlock}>
-              <span className={styles.name}>{displayName || 'Anonymous'} </span>
-              <span className={styles.userAddress}>(u/{shortAddress}) </span>
-            </span>
-            <span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
-            <span className={styles.postNum}>
-              <span className={styles.postNumLink}>
-                <Link to={`/p/${subplebbitAddress}/c/${reply.cid}`} className={styles.linkToPost} title='Link to post'>
-                  c/
-                </Link>
-                <span className={styles.replyToPost} title='Reply to post'>
-                  {shortCid}
-                </span>
+    <div className={styles.replyDesktop}>
+      <div className={styles.sideArrows}>{'>>'}</div>
+      <div className={styles.reply}>
+        <div className={styles.postInfo}>
+          <span className={styles.checkbox}>
+            <input type='checkbox' />
+          </span>
+          <span className={styles.nameBlock}>
+            <span className={styles.name}>{displayName || 'Anonymous'} </span>
+            <span className={styles.userAddress}>(u/{shortAddress}) </span>
+          </span>
+          <span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
+          <span className={styles.postNum}>
+            <span className={styles.postNumLink}>
+              <Link to={`/p/${subplebbitAddress}/c/${reply.cid}`} className={styles.linkToPost} title='Link to post'>
+                c/
+              </Link>
+              <span className={styles.replyToPost} title='Reply to post'>
+                {shortCid}
               </span>
-              {pinned && (
-                <span className={styles.stickyIconWrapper}>
-                  <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
-                </span>
-              )}
             </span>
-            <span className={styles.postMenuBtn}>▶</span>
-          </div>
-          {link && (
-            <div className={styles.file}>
-              <div className={styles.fileText}>
-                {t('link')}:{' '}
-                <a href={link} target='_blank' rel='noopener noreferrer'>
-                  {link.length > 30 ? link.slice(0, 30) + '...' : link}
-                </a>
-                {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
-                  <span>
-                    {' '}
-                    [
-                    <span className={styles.closeMedia} onClick={() => setShowThumbnail(true)}>
-                      {t('close')}
-                    </span>
-                    ]
+            {pinned && (
+              <span className={styles.stickyIconWrapper}>
+                <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
+              </span>
+            )}
+          </span>
+          <span className={styles.postMenuBtn}>▶</span>
+        </div>
+        {link && (
+          <div className={styles.file}>
+            <div className={styles.fileText}>
+              {t('link')}:{' '}
+              <a href={link} target='_blank' rel='noopener noreferrer'>
+                {link.length > 30 ? link.slice(0, 30) + '...' : link}
+              </a>
+              {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
+                <span>
+                  {' '}
+                  [
+                  <span className={styles.closeMedia} onClick={() => setShowThumbnail(true)}>
+                    {t('close')}
                   </span>
-                )}
-              </div>
-              {hasThumbnail && (
-                <Media
-                  commentMediaInfo={commentMediaInfo}
-                  isMobile={false}
-                  isReply={true}
-                  linkHeight={linkHeight}
-                  linkWidth={linkWidth}
-                  showThumbnail={showThumbnail}
-                  setShowThumbnail={setShowThumbnail}
-                />
+                  ]
+                </span>
               )}
             </div>
-          )}
-          {content && (
-            <blockquote className={styles.postMessage}>
-              <Markdown content={content} />
-            </blockquote>
-          )}
-        </div>
+            {hasThumbnail && (
+              <Media
+                commentMediaInfo={commentMediaInfo}
+                isMobile={false}
+                isReply={true}
+                linkHeight={linkHeight}
+                linkWidth={linkWidth}
+                showThumbnail={showThumbnail}
+                setShowThumbnail={setShowThumbnail}
+              />
+            )}
+          </div>
+        )}
+        {content && (
+          <blockquote className={styles.postMessage}>
+            <Markdown content={content} />
+          </blockquote>
+        )}
       </div>
-    )
+    </div>
   );
 };
 
-const PostDesktop = ({ post }: Comment) => {
+const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => {
   const { t } = useTranslation();
   const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { displayName, shortAddress } = author || {};
@@ -206,7 +204,7 @@ const PostDesktop = ({ post }: Comment) => {
         </span>
       )}
       {!pinned &&
-        replies.map((reply, index) => (
+        replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
           <div key={reply.cid} className={styles.replyContainer}>
             <ReplyDesktop index={index} reply={reply} />
           </div>
@@ -215,7 +213,7 @@ const PostDesktop = ({ post }: Comment) => {
   );
 };
 
-const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
+const ReplyMobile = ({ reply }: Comment) => {
   const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
   const { displayName, shortAddress } = author || {};
 
@@ -224,43 +222,41 @@ const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
   const [showThumbnail, setShowThumbnail] = useState(true);
 
   return (
-    index < 5 && (
-      <div className={styles.replyMobile}>
-        <div className={styles.reply}>
-          <div className={styles.replyContainer}>
-            <div className={styles.postInfo}>
-              <span className={styles.postMenuBtn}>...</span>
-              <span className={styles.nameBlock}>
-                <span className={styles.name}>{displayName || 'Anonymous'} </span>
-                <span className={styles.address}>(u/{shortAddress})</span>
-              </span>
-              <span className={styles.dateTimePostNum}>
-                {getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
-                <span className={styles.replyToPost}>{shortCid}</span>
-              </span>
-            </div>
-            {hasThumbnail && (
-              <Media
-                commentMediaInfo={commentMediaInfo}
-                isMobile={true}
-                isReply={false}
-                linkHeight={linkHeight}
-                linkWidth={linkWidth}
-                showThumbnail={showThumbnail}
-                setShowThumbnail={setShowThumbnail}
-              />
-            )}
-            <blockquote className={styles.postMessage}>
-              <Markdown content={content} />
-            </blockquote>
+    <div className={styles.replyMobile}>
+      <div className={styles.reply}>
+        <div className={styles.replyContainer}>
+          <div className={styles.postInfo}>
+            <span className={styles.postMenuBtn}>...</span>
+            <span className={styles.nameBlock}>
+              <span className={styles.name}>{displayName || 'Anonymous'} </span>
+              <span className={styles.address}>(u/{shortAddress})</span>
+            </span>
+            <span className={styles.dateTimePostNum}>
+              {getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
+              <span className={styles.replyToPost}>{shortCid}</span>
+            </span>
           </div>
+          {hasThumbnail && (
+            <Media
+              commentMediaInfo={commentMediaInfo}
+              isMobile={true}
+              isReply={false}
+              linkHeight={linkHeight}
+              linkWidth={linkWidth}
+              showThumbnail={showThumbnail}
+              setShowThumbnail={setShowThumbnail}
+            />
+          )}
+          <blockquote className={styles.postMessage}>
+            <Markdown content={content} />
+          </blockquote>
         </div>
       </div>
-    )
+    </div>
   );
 };
 
-const PostMobile = ({ post }: Comment) => {
+const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => {
   const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
   const linkCount = useCountLinksInReplies(post);
@@ -334,7 +330,7 @@ const PostMobile = ({ post }: Comment) => {
           </div>
         </div>
         {!pinned &&
-          replies.map((reply, index) => (
+          replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
             <div key={reply.cid} className={styles.replyContainer}>
               <ReplyMobile index={index} reply={reply} />
             </div>
@@ -344,12 +340,18 @@ const PostMobile = ({ post }: Comment) => {
   );
 };
 
-const Post = ({ post }: Comment) => {
+interface PostProps {
+  index?: number;
+  post: Comment;
+  showAllReplies?: boolean;
+}
+
+const Post = ({ post, showAllReplies = false }: PostProps) => {
   return (
     <div className={styles.thread}>
       <div className={styles.postContainer}>
-        <PostDesktop post={post} />
-        <PostMobile post={post} />
+        <PostDesktop post={post} showAllReplies={showAllReplies} />
+        <PostMobile post={post} showAllReplies={showAllReplies} />
       </div>
     </div>
   );
diff --git a/src/views/post-page/index.ts b/src/views/post-page/index.ts
new file mode 100644
index 00000000..223b2106
--- /dev/null
+++ b/src/views/post-page/index.ts
@@ -0,0 +1 @@
+export { default } from './post-page';
diff --git a/src/views/post-page/post-page.module.css b/src/views/post-page/post-page.module.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/post-page/post-page.tsx b/src/views/post-page/post-page.tsx
new file mode 100644
index 00000000..56be8b03
--- /dev/null
+++ b/src/views/post-page/post-page.tsx
@@ -0,0 +1,19 @@
+import { useComment } from '@plebbit/plebbit-react-hooks';
+import { useParams } from 'react-router-dom';
+import Post from '../../components/post/post';
+import styles from './post-page.module.css';
+
+const PostPage = () => {
+  const params = useParams();
+  const { commentCid } = params;
+
+  const post = useComment({ commentCid });
+
+  return (
+    <div className={styles.content}>
+      <Post post={post} showAllReplies={true} />
+    </div>
+  );
+};
+
+export default PostPage;