diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index 493bd1d8..4a3f33f3 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/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 = (
diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 9712b468..eb1d82c7 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/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)
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 4ff75356..dd585f25 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/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);
diff --git a/src/hooks/use-reply-count.ts b/src/hooks/use-reply-count.ts
new file mode 100644
index 00000000..9ead7e81
--- /dev/null
+++ b/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;