handle undefined values, clarify comment

src/hooks/use-count-links-in-replies.ts

@@ -4,7 +4,7 @@ import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/util
 
 const useCountLinksInReplies = (comment: Comment, firstXReplies?: number) => {
   let linkCount = 0;
-  const flattenedReplies = useMemo(() => flattenCommentsPages(comment.replies), [comment.replies]);
+  const flattenedReplies = useMemo(() => flattenCommentsPages(comment?.replies), [comment?.replies]);
 
   const repliesToConsider = firstXReplies !== undefined ? flattenedReplies.slice(0, firstXReplies) : flattenedReplies;
 

src/hooks/use-replies.ts

@@ -4,17 +4,17 @@ import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/util
 
 const useReplies = (comment: Comment) => {
   // flatten all replies including nested ones from the original comment
-  const flattenedReplies = useMemo(() => flattenCommentsPages(comment.replies), [comment.replies]);
+  const flattenedReplies = useMemo(() => flattenCommentsPages(comment?.replies), [comment?.replies]);
 
   // generate a Set of CIDs from flattened replies for quick lookup
-  const replyCids = useMemo(() => new Set(flattenedReplies.map((reply) => reply.cid)), [flattenedReplies]);
+  const replyCids = useMemo(() => new Set(flattenedReplies.map((reply) => reply?.cid)), [flattenedReplies]);
 
   // filter against the original comment's CID and all CIDs in flattened replies
   const filter = useCallback(
     (accountComment: Comment) => {
-      return accountComment.parentCid === comment.cid || replyCids.has(accountComment.parentCid);
+      return accountComment.parentCid === comment?.cid || replyCids.has(accountComment.parentCid);
     },
-    [comment.cid, replyCids],
+    [comment?.cid, replyCids],
   );
 
   const { accountComments } = useAccountComments({ filter });

src/hooks/use-state-string.ts

@@ -49,7 +49,7 @@ const useStateString = (commentOrSubplebbit: CommentOrSubplebbit): string | unde
       if (commentOrSubplebbit?.publishingState && commentOrSubplebbit?.publishingState !== 'stopped' && commentOrSubplebbit?.publishingState !== 'succeeded') {
         stateString = commentOrSubplebbit.publishingState;
       } else if (commentOrSubplebbit?.updatingState !== 'stopped' && commentOrSubplebbit?.updatingState !== 'succeeded') {
-        stateString = commentOrSubplebbit.updatingState;
+        stateString = commentOrSubplebbit?.updatingState;
       }
       if (stateString) {
         stateString = stateString.replaceAll('-', ' ').replace('ipfs', 'IPFS').replace('ipns', 'IPNS');

src/views/post/post.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Comment, Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { useLocation, useParams } from 'react-router-dom';
 import { isDescriptionView, isRulesView, isSettingsView } from '../../lib/utils/view-utils';
 import useIsMobile from '../../hooks/use-is-mobile';
@@ -55,8 +55,9 @@ const PostPage = () => {
 
   const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal();
 
-  const comment: Comment = useComment({ commentCid });
+  const comment = useComment({ commentCid });
-  // if the comment is a reply, get the parent comment
+
+  // if the comment is a reply, return the post comment instead, then the reply will be highlighted in the thread
   const postComment = useComment({ commentCid: comment?.postCid });
   let post;
   if (comment.parentCid) {
@@ -64,6 +65,7 @@ const PostPage = () => {
   } else {
     post = comment;
   }
+
   // handle pending mod or author edit
   const { editedComment } = useEditedComment({ comment: post });
   if (editedComment) {