feat(app): add post page

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>

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,7 +20,6 @@ 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}>
@@ -88,11 +87,10 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
         )}
       </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,7 +222,6 @@ 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}>
@@ -256,11 +253,10 @@ const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
         </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} />
+        <PostDesktop post={post} showAllReplies={showAllReplies} />
-        <PostMobile post={post} />
+        <PostMobile post={post} showAllReplies={showAllReplies} />
       </div>
     </div>
   );

src/views/post-page/index.ts

@@ -0,0 +1 @@
+export { default } from './post-page';

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;