fix: reply count was bugged

src/components/catalog-row/catalog-row.tsx

@@ -12,11 +12,12 @@ import useEditCommentPrivileges from '../../hooks/use-author-privileges';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useHide from '../../hooks/use-hide';
+import useReplyCount from '../../hooks/use-reply-count';
+import useWindowWidth from '../../hooks/use-window-width';
 import PostMenuDesktop from '../post-desktop/post-menu-desktop';
 import styles from './catalog-row.module.css';
 import Markdown from '../markdown';
 import _ from 'lodash';
-import useWindowWidth from '../../hooks/use-window-width';
 
 interface CatalogPostMediaProps {
   commentMediaInfo: any;
@@ -95,24 +96,8 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin
 
 const CatalogPost = ({ post }: { post: Comment }) => {
   const { t } = useTranslation();
-  const {
-    author,
-    cid,
-    content,
-    isDescription,
-    isRules,
-    lastChildCid,
-    link,
-    linkHeight,
-    linkWidth,
-    locked,
-    pinned,
-    replyCount,
-    spoiler,
-    subplebbitAddress,
-    timestamp,
-    title,
-  } = post || {};
+  const { author, cid, content, isDescription, isRules, lastChildCid, link, linkHeight, linkWidth, locked, pinned, spoiler, subplebbitAddress, timestamp, title } =
+    post || {};
   const commentMediaInfo = getCommentMediaInfo(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
   const { hidden } = useHide({ cid });
@@ -123,6 +108,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
   const postLink = isInAllView && isDescription ? `/p/all/description` : `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`;
 
   const linkCount = useCountLinksInReplies(post);
+  const replyCount = useReplyCount(post);
 
   const threadIcons = (
     <div className={styles.threadIcons}>

src/components/post-desktop/post-desktop.tsx

@@ -13,6 +13,7 @@ import useEditCommentPrivileges from '../../hooks/use-author-privileges';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useHide from '../../hooks/use-hide';
 import useReplies from '../../hooks/use-replies';
+import useReplyCount from '../../hooks/use-reply-count';
 import useStateString from '../../hooks/use-state-string';
 import CommentMedia from '../comment-media';
 import EditMenu from '../edit-menu/edit-menu';
@@ -338,7 +339,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
 
 const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, content, link, pinned, postCid, replyCount, subplebbitAddress } = post || {};
+  const { author, cid, content, link, pinned, postCid, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const params = useParams();
   const location = useLocation();
@@ -349,10 +350,11 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
   const isHidden = hidden && !isInPostPageView;
 
   const replies = useReplies(post);
+  const replyCount = useReplyCount(post);
   const visiblelinksCount = useCountLinksInReplies(post, 5);
-  const totallinksCount = useCountLinksInReplies(post);
+  const totalLinksCount = useCountLinksInReplies(post);
   const repliesCount = pinned ? replyCount : replyCount - 5;
-  const linksCount = pinned ? totallinksCount : totallinksCount - visiblelinksCount;
+  const linksCount = pinned ? totalLinksCount : totalLinksCount - visiblelinksCount;
   const { showOmittedReplies, setShowOmittedReplies } = useShowOmittedReplies();
 
   // scroll to reply if pathname is reply permalink (backlink)

src/components/post-mobile/post-mobile.tsx

@@ -11,6 +11,7 @@ import useAuthorAddressClick from '../../hooks/use-author-address-click';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useHide from '../../hooks/use-hide';
 import useReplies from '../../hooks/use-replies';
+import useReplyCount from '../../hooks/use-reply-count';
 import useStateString from '../../hooks/use-state-string';
 import CommentMedia from '../comment-media';
 import LoadingEllipsis from '../loading-ellipsis';
@@ -275,8 +276,9 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
 
 const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, content, pinned, postCid, replyCount, subplebbitAddress } = post || {};
+  const { author, cid, content, pinned, postCid, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
+  const replyCount = useReplyCount(post);
   const params = useParams();
   const location = useLocation();
   const isInAllView = isAllView(location.pathname, params);

src/hooks/use-reply-count.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
+
+const useReplyCount = (comment: Comment) => {
+  const replies = comment?.replies;
+  const flattenedReplies = useMemo(() => flattenCommentsPages(replies), [replies]);
+
+  return flattenedReplies.length;
+};
+
+export default useReplyCount;