From 050dfcce758c47ba123fc082eaef56823e8a9219 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 11 Nov 2023 10:51:43 +0100
Subject: [PATCH] feat(use-pending-replycount): implement useAccountComments
 with filter to get total reply count including pending replies

---
 src/components/post/post-tools/post-tools.tsx |  4 ++--
 src/components/post/post.tsx                  |  6 +++++-
 src/components/reply/reply.tsx                |  2 +-
 src/hooks/use-pending-replycount.ts           | 14 ++++++++++++++
 src/views/post/post.tsx                       |  1 +
 5 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/use-pending-replycount.ts

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 = (
     <>
-      <li className={`${styles.button} ${ !spoiler ? styles.firstButton : ''}`}>
+      <li className={`${styles.button} ${!spoiler ? styles.firstButton : ''}`}>
         <span>{t('reply_permalink')}</span>
       </li>
       <li className={styles.button}>
@@ -63,7 +63,7 @@ const PostTools = ({ cid, isReply, replyCount, spoiler, subplebbitAddress }: Pos
         <span>{t('reply_reply')}</span>
       </li>
     </>
-  )
+  );
 
   return (
     <ul className={`${styles.buttons} ${isReply ? styles.buttonsReply : ''}`}>
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 (
     <div className={styles.container} key={index}>
       <div className={styles.row}>
@@ -114,7 +118,7 @@ const Post = ({ post, index }: PostProps) => {
                 p/{subplebbit?.shortAddress}
               </Link>
             </p>
-            <PostTools cid={cid} replyCount={replyCount} subplebbitAddress={subplebbitAddress} />
+            <PostTools cid={cid} replyCount={totalReplyCount} subplebbitAddress={subplebbitAddress} />
           </div>
         </div>
       </div>
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) => {
             <div className={styles.md}>{contentOrRemoved}</div>
           </div>
         </div>
-        <PostTools cid={reply.cid}isReply={true} replyCount={replies.length} spoiler={spoiler} subplebbitAddress={reply.subplebbitAddress} />
+        <PostTools cid={reply.cid} isReply={true} replyCount={replies.length} spoiler={spoiler} subplebbitAddress={reply.subplebbitAddress} />
         {replies.map((reply, index) => (
           <Reply key={`${index}${reply.cid}`} reply={reply} />
         ))}
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();