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;