Merge pull request #247 from tnc-ca-geo/comments-length-bug

Accommodate images that have no comments array
tnc-ca-geo · Oct 7, 2024 · 24893c2 · 24893c2
2 parents 470366f + 86dac93
commit 24893c2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/src/features/loupe/CommentsPopover.jsx b/src/features/loupe/CommentsPopover.jsx
@@ -97,12 +97,7 @@ const StyledAddCommentButton = styled(Button, {
   marginRight: '0',
 });
 
-export const CommentsPopover = ({ 
-  onClose, 
-  comments, 
-  imageId, 
-  onChangeActionMenu 
-}) => {
+export const CommentsPopover = ({ onClose, comments, imageId, onChangeActionMenu }) => {
   const dispatch = useDispatch();
   const commentsLoading = useSelector(selectCommentsLoading);
   const [addCommentText, setAddCommentText] = useState('');
@@ -129,19 +124,19 @@ export const CommentsPopover = ({
             <Cross2Icon />
           </StyledPopoverClose>
         </StyledHeader>
-        {comments.length > 0 && (
+        {comments?.length > 0 && (
           <StyledCommentsContainer>
             {comments.map((comment) => (
-              <Comment 
-                key={comment._id} 
-                comment={comment} 
-                imageId={imageId} 
+              <Comment
+                key={comment._id}
+                comment={comment}
+                imageId={imageId}
                 onChangeOpen={onChangeActionMenu}
               />
             ))}
           </StyledCommentsContainer>
         )}
-        <StyledAddCommentRow css={{ borderTop: comments.length ? '1px solid $border' : 'none' }}>
+        <StyledAddCommentRow css={{ borderTop: comments?.length ? '1px solid $border' : 'none' }}>
           <StyledTextArea
             value={addCommentText}
             onChange={(e) => setAddCommentText(e.target.value)}

diff --git a/src/features/loupe/ImageReviewToolbar.jsx b/src/features/loupe/ImageReviewToolbar.jsx
@@ -187,7 +187,7 @@ const ImageReviewToolbar = ({
     if (!isCommentsActionMenuOpen) {
       setIsCommentsPopoverOpen(false);
     }
-  }
+  };
 
   return (
     <Toolbar>
@@ -312,7 +312,7 @@ const ImageReviewToolbar = ({
                 <PopoverTrigger asChild onClick={() => setIsCommentsPopoverOpen(true)}>
                   <ToolbarIconButton css={{ position: 'relative' }}>
                     <ChatBubbleIcon />
-                    {image.comments.length > 0 && <Badge>{image.comments.length}</Badge>}
+                    {image.comments?.length > 0 && <Badge>{image.comments?.length}</Badge>}
                   </ToolbarIconButton>
                 </PopoverTrigger>
               </TooltipTrigger>
@@ -321,9 +321,9 @@ const ImageReviewToolbar = ({
                 <TooltipArrow />
               </TooltipContent>
               <PopoverPortal>
-                <StyledPopoverContent 
-                  side="top" 
-                  sideOffset={25} 
+                <StyledPopoverContent
+                  side="top"
+                  sideOffset={25}
                   onPointerDownOutside={() => onClickOutsideComments()}
                 >
                   <CommentsPopover