-
-
-
-
-
- {displayName || 'Anonymous'}
- (u/{shortAddress})
-
-
{getFormattedDate(timestamp)}
-
-
-
- c/
-
-
- {shortCid}
-
+
+
{'>>'}
+
+
+
+
+
+
+ {displayName || 'Anonymous'}
+ (u/{shortAddress})
+
+
{getFormattedDate(timestamp)}
+
+
+
+ c/
+
+
+ {shortCid}
- {pinned && (
-
-
-
- )}
- ▶
-
- {link && (
-
-
+ {link && (
+
+
- {hasThumbnail && (
-
+ ]
+
)}
- )}
- {content && (
-
-
-
- )}
-
+ {hasThumbnail && (
+
+ )}
+
+ )}
+ {content && (
+
+
+
+ )}
- )
+
);
};
-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) => {
)}
{!pinned &&
- replies.map((reply, index) => (
+ replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
@@ -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 && (
-
-
-
-
- ...
-
- {displayName || 'Anonymous'}
- (u/{shortAddress})
-
-
- {getFormattedDate(timestamp)} c/
- {shortCid}
-
-
- {hasThumbnail && (
-
- )}
-
-
-
+
+
+
+
+ ...
+
+ {displayName || 'Anonymous'}
+ (u/{shortAddress})
+
+
+ {getFormattedDate(timestamp)} c/
+ {shortCid}
+
+ {hasThumbnail && (
+
+ )}
+
+
+
- )
+
);
};
-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) => {
{!pinned &&
- replies.map((reply, index) => (
+ replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
@@ -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 (
);
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 (
+
+ );
+};
+
+export default PostPage;