diff --git a/src/components/post/post-tools/post-tools.tsx b/src/components/post/post-tools/post-tools.tsx
index bba285a8..62c21d68 100644
--- a/src/components/post/post-tools/post-tools.tsx
+++ b/src/components/post/post-tools/post-tools.tsx
@@ -47,7 +47,7 @@ const PostTools = ({ cid, isReply, replyCount, spoiler, subplebbitAddress }: Pos
const replyLabels = (
<>
-
+
{t('reply_permalink')}
@@ -63,7 +63,7 @@ const PostTools = ({ cid, isReply, replyCount, spoiler, subplebbitAddress }: Pos
{t('reply_reply')}
>
- )
+ );
return (
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 76db0d10..2003feb2 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -12,6 +12,7 @@ import Expando from './expando';
import Flair from './flair';
import PostTools from './post-tools';
import Thumbnail from './thumbnail';
+import { usePendingReplyCount } from '../../hooks/use-pending-replycount';
interface PostProps {
index?: number;
@@ -40,6 +41,9 @@ const Post = ({ post, index }: PostProps) => {
const postScore = upvoteCount === 0 && downvoteCount === 0 ? '•' : upvoteCount - downvoteCount || '•';
const postTitleOrContent = (title?.length > 300 ? title?.slice(0, 300) + '...' : title) || (content?.length > 300 ? content?.slice(0, 300) + '...' : content);
+ const pendingReplyCount = usePendingReplyCount({ parentCommentCid: cid });
+ const totalReplyCount = replyCount + pendingReplyCount;
+
return (
@@ -114,7 +118,7 @@ const Post = ({ post, index }: PostProps) => {
p/{subplebbit?.shortAddress}
-
+
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index 380dd702..e1aa64d7 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -109,7 +109,7 @@ const Reply = ({ reply }: ReplyProps) => {
{contentOrRemoved}
-
+
{replies.map((reply, index) => (
))}
diff --git a/src/hooks/use-pending-replycount.ts b/src/hooks/use-pending-replycount.ts
new file mode 100644
index 00000000..6a581a0d
--- /dev/null
+++ b/src/hooks/use-pending-replycount.ts
@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+import { Comment, useAccountComments } from '@plebbit/plebbit-react-hooks';
+
+type PendingReplyCountProps = {
+ parentCommentCid: string | undefined;
+};
+
+export const usePendingReplyCount = ({ parentCommentCid }: PendingReplyCountProps) => {
+ const filter = useCallback((comment: Comment) => comment.parentCid === parentCommentCid, [parentCommentCid]);
+ const comments = useAccountComments({ filter });
+ const pendingReplyCount = comments.accountComments.length;
+
+ return pendingReplyCount;
+};
diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx
index 7134144e..64842c52 100644
--- a/src/views/post/post.tsx
+++ b/src/views/post/post.tsx
@@ -7,6 +7,7 @@ import PostComponent from '../../components/post';
import useReplies from '../../hooks/use-replies';
import Reply from '../../components/reply';
import useStateString from '../../hooks/use-state-string';
+import { usePendingReplyCount } from '../../hooks/use-pending-replycount';
const Post = () => {
const { commentCid } = useParams();