Merge pull request #1 from hiveteams/enhancement/comment-wrapping

Fixed comment wrapping
hiveteams · Sep 22, 2020 · 7eeda65 · 7eeda65
2 parents 7387032 + 5f66540
commit 7eeda65
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/src/components/Note/Note.js b/src/components/Note/Note.js
@@ -23,6 +23,7 @@ const Note = ({ annotation }) => {
   const containerRef = useRef();
   const containerHeightRef = useRef();
   const [isEditingMap, setIsEditingMap] = useState({});
+  const [isReplying, setIsReplying] = useState(false);
   const ids = useRef([]);
 
   const [noteTransformFunction] = useSelector(
@@ -101,8 +102,7 @@ const Note = ({ annotation }) => {
   const replies = annotation
     .getReplies()
     .sort((a, b) => a['DateCreated'] - b['DateCreated']);
-
-  const showReplyArea = !Object.values(isEditingMap).some(val => val);
+  const showReplyArea = !Object.values(isEditingMap).some(val => val) || isReplying;
 
   const handleNoteKeydown = e => {
     // Click if enter or space is pressed and is current target.
@@ -138,8 +138,9 @@ const Note = ({ annotation }) => {
         isSelected={isSelected}
         setIsEditing={setIsEditing}
         isEditing={isEditingMap[0]}
+        setIsReplying={setIsReplying}
       />
-      {isSelected && (
+      {(isSelected || isReplying) && (
         <React.Fragment>
           {replies.length > 0 && <div className="divider" />}
           <div className={repliesClass}>
@@ -150,9 +151,10 @@ const Note = ({ annotation }) => {
                 annotation={reply}
                 setIsEditing={setIsEditing}
                 isEditing={isEditingMap[i + 1]}
+                setIsReplying={setIsReplying}
               />
             ))}
-            {showReplyArea && <ReplyArea annotation={annotation} />}
+            {showReplyArea && <ReplyArea annotation={annotation} setIsReplying={setIsReplying} />}
           </div>
         </React.Fragment>
       )}

diff --git a/src/components/Note/ReplyArea/ReplyArea.js b/src/components/Note/ReplyArea/ReplyArea.js
@@ -14,10 +14,11 @@ import selectors from 'selectors';
 
 const propTypes = {
   annotation: PropTypes.object.isRequired,
+  setIsReplying: PropTypes.func,
 };
 
 // a component that contains the reply textarea, the reply button and the cancel button
-const ReplyArea = ({ annotation }) => {
+const ReplyArea = ({ annotation, setIsReplying }) => {
   const [
     isReadOnly,
     isReplyDisabled,
@@ -46,6 +47,8 @@ const ReplyArea = ({ annotation }) => {
       dispatch(actions.finishNoteEditing());
     }
 
+    setIsReplying(textareaRef?.current?.value?.length > 0);
+
     resize();
   }, [isFocused]);
 
@@ -63,6 +66,10 @@ const ReplyArea = ({ annotation }) => {
     }
   }, [isContentEditable, isNoteEditingTriggeredByAnnotationPopup, isSelected]);
 
+  useEffect(() => {
+    setIsReplying(value?.length > 0);
+  }, [value]);
+
   const postReply = e => {
     // prevent the textarea from blurring out
     e.preventDefault();
@@ -84,7 +91,7 @@ const ReplyArea = ({ annotation }) => {
     isReadOnly ||
     isReplyDisabled ||
     isReplyDisabledForAnnotation ||
-    (isNoteEditingTriggeredByAnnotationPopup && isContentEditable);
+    (isNoteEditingTriggeredByAnnotationPopup && isContentEditable && value.length === 0);
 
   return ifReplyNotAllowed ? null : (
     <div
@@ -118,4 +125,8 @@ const ReplyArea = ({ annotation }) => {
 
 ReplyArea.propTypes = propTypes;
 
+ReplyArea.defaultProps = {
+  setIsReplying: () => {},
+};
+
 export default ReplyArea;
diff --git a/src/components/NoteContent/NoteContent.js b/src/components/NoteContent/NoteContent.js
@@ -33,7 +33,7 @@ const propTypes = {
   annotation: PropTypes.object.isRequired,
 };
 
-const NoteContent = ({ annotation, isEditing, setIsEditing, noteIndex }) => {
+const NoteContent = ({ annotation, isEditing, setIsEditing, noteIndex, setIsReplying  }) => {
   const [
     noteDateFormat,
     iconColor,
@@ -64,21 +64,30 @@ const NoteContent = ({ annotation, isEditing, setIsEditing, noteIndex }) => {
       dispatch(actions.finishNoteEditing());
     }
 
+    setIsReplying(textAreaValue?.length > 0);
+
     resize();
-  }, [isEditing]);
+  }, [isEditing, textAreaValue]);
 
   useEffect(() => {
     // when the comment button in the annotation popup is clicked,
     // this effect will run and we set isEditing to true so that
     // the textarea will be rendered and focused after it is mounted
     if (
-      isNoteEditingTriggeredByAnnotationPopup &&
-      isSelected &&
-      isContentEditable
+      (isNoteEditingTriggeredByAnnotationPopup &&
+        isSelected &&
+        isContentEditable)
+      || (isContentEditable && textAreaValue?.length > 0)
     ) {
       setIsEditing(true, noteIndex);
     }
-  }, [isContentEditable, isNoteEditingTriggeredByAnnotationPopup, isSelected, setIsEditing]);
+  }, [isContentEditable, isNoteEditingTriggeredByAnnotationPopup, isSelected, textAreaValue, setIsEditing]);
+
+  useEffect(() => {
+    if (textAreaValue?.length > 0 && isContentEditable) {
+      setIsEditing(true, noteIndex);
+    }
+  }, [textAreaValue, isContentEditable, setIsEditing]);
 
   const renderAuthorName = useCallback(
     annotation => {
@@ -163,7 +172,7 @@ const NoteContent = ({ annotation, isEditing, setIsEditing, noteIndex }) => {
               />}
           </div>
         </div>
-        {isEditing && isSelected ? (
+        {((isEditing && isSelected) || isEditing && textAreaValue?.length > 0) ? (
           <ContentArea
             textAreaValue={textAreaValue}
             onTextAreaValueChange={setTextAreaValue}