From 86dac9398185edd123551696a7aaf706da835945 Mon Sep 17 00:00:00 2001
From: Nathaniel Rindlaub <nathanielrindlaub@gmail.com>
Date: Mon, 7 Oct 2024 10:49:48 -0700
Subject: [PATCH] Accommodate images that have no comments array

---
 src/features/loupe/CommentsPopover.jsx    | 19 +++++++------------
 src/features/loupe/ImageReviewToolbar.jsx | 10 +++++-----
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/features/loupe/CommentsPopover.jsx b/src/features/loupe/CommentsPopover.jsx
index 37b67cf4..12d27262 100644
--- 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
index a7cde121..f6daa6a0 100644
--- 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