feat(use-pending-replycount): implement useAccountComments with filter to get total reply count including pending replies

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 : ''}`}>

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>

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} />
         ))}

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;
+};

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();