Merge pull request #270 from tnc-ca-geo/fix/289-267-comments-improvem…

…ents-and-fixes 289/267: fix comments popover bug and improve ux
tnc-ca-geo · Jan 11, 2025 · 6531efc · 6531efc
2 parents 9def193 + c14b47a
commit 6531efc
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/src/features/loupe/Comment.jsx b/src/features/loupe/Comment.jsx
@@ -167,6 +167,12 @@ export const Comment = ({ comment, imageId, onChangeOpen, scrollRef }) => {
   };
 
   const onEditConfirm = () => {
+    // If all the comment's content is removed
+    // show the delete comment flow
+    if (editCommentText === "") {
+      setIsDeleteConfirm(true);
+      return;
+    }
     const editCommentDto = {
       id: comment._id,
       imageId: imageId,
@@ -176,6 +182,25 @@ export const Comment = ({ comment, imageId, onChangeOpen, scrollRef }) => {
     setIsEdit(false);
   };
 
+  // Confirm edit comment using enter
+  // Shift + Enter makes a new line
+  const [isShiftDown, setIsShiftDown] = useState(false);
+  const handleKeyDown = (event) => {
+    event.stopPropagation();
+    if (event.key === 'Shift') {
+      setIsShiftDown(true);
+    }
+    if (event.key === 'Enter' && !isShiftDown) {
+      onEditConfirm();
+      event.preventDefault();
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (event.key === 'Shift') {
+      setIsShiftDown(false);
+    }
+  };
+
   return (
     <>
       <DeleteCommentAlert
@@ -220,8 +245,8 @@ export const Comment = ({ comment, imageId, onChangeOpen, scrollRef }) => {
             <StyledTextArea
               value={editCommentText}
               onChange={(e) => setEditCommentText(e.target.value)}
-              onKeyDown={(e) => e.stopPropagation()}
-              onKeyDownCapture={(e) => e.stopPropagation()}
+              onKeyDown={(e) => handleKeyDown(e)}
+              onKeyUp={(e) => handleKeyUp(e)}
             />
             <StyledButtonContainer>
               <Button size="small" onClick={() => setIsEdit(false)}>

diff --git a/src/features/loupe/CommentsPopover.jsx b/src/features/loupe/CommentsPopover.jsx
@@ -109,6 +109,7 @@ export const CommentsPopover = ({ onClose, comments, imageId, onChangeActionMenu
     dispatch(editComment('create', addCommentDto));
     setAddCommentText('');
   };
+
   // Add comment using enter
   // Shift + Enter makes a new line
   const [isShiftDown, setIsShiftDown] = useState(false);

diff --git a/src/features/loupe/ImageReviewToolbar.jsx b/src/features/loupe/ImageReviewToolbar.jsx
@@ -189,6 +189,11 @@ const ImageReviewToolbar = ({
     }
   };
 
+  // Close popover when changing images using keyboard
+  useEffect(() => {
+    setIsCommentsPopoverOpen(false);
+  }, [image._id]);
+
   return (
     <Toolbar>
       {hasRole(userRoles, WRITE_OBJECTS_ROLES) && (