From 1506349a1f383e075e90df1ef188890d4266e286 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Thu, 11 Jul 2024 10:42:19 -0400
Subject: [PATCH] fix: Update add note UI [PT-187937643]

- Changed placeholder from "Add a note" to "Add a note and press enter to save"
- Added plus icon over top right of textarea that also adds the note
- Refactored add note code to use comment getter
---
 .../photo-or-note-field.module.scss           | 24 ++++++++----
 src/shared/components/photo-or-note-field.tsx | 38 +++++++++++++------
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/shared/components/photo-or-note-field.module.scss b/src/shared/components/photo-or-note-field.module.scss
index b3d8834..1f738b1 100644
--- a/src/shared/components/photo-or-note-field.module.scss
+++ b/src/shared/components/photo-or-note-field.module.scss
@@ -18,13 +18,23 @@
 }
 
 .noteSubTab {
-  .addNote {
-    border: 0;
-    background-color: #f9ffc0;
-    width: 100%;
-    height: 200px;
-    padding: 10px;
-    font-size: 18px;
+  .addNoteContainer {
+    position: relative;
+
+    .addNote {
+      border: 0;
+      background-color: #f9ffc0;
+      width: 100%;
+      height: 200px;
+      padding: 10px;
+      font-size: 18px;
+    }
+
+    .addNoteButton {
+      position: absolute;
+      top: 10px;
+      right: 12.5px;
+    }
   }
 
   .note {
diff --git a/src/shared/components/photo-or-note-field.tsx b/src/shared/components/photo-or-note-field.tsx
index a3d10e2..09224e1 100644
--- a/src/shared/components/photo-or-note-field.tsx
+++ b/src/shared/components/photo-or-note-field.tsx
@@ -223,22 +223,33 @@ export const PhotoOrNoteField: React.FC<FieldProps> = props => {
 
   const handleSelectNoteSubTab = () => setSubTab("note");
   const handleSelectPhotoSubTab = () => setSubTab("photo");
-  const handleAddNoteKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const getAddNoteContent = () => {
     if (!inputDisabled && addNoteRef.current) {
-      const note = addNoteRef.current.value.trim();
-      if ((note.length > 0) && (e.keyCode === 13)) {
-        e.preventDefault();
-        updateFormData([{
-          isPhoto: false,
-          localPhotoUrl: "",
-          remotePhotoUrl: "",
-          note,
-          timestamp: timestamp()
-        }, ...formData]);
+      return addNoteRef.current.value.trim();
+    }
+    return "";
+  };
+  const handleAddNote = () => {
+    const note = getAddNoteContent();
+    if (note.length > 0) {
+      updateFormData([{
+        isPhoto: false,
+        localPhotoUrl: "",
+        remotePhotoUrl: "",
+        note,
+        timestamp: timestamp()
+      }, ...formData]);
+      if (addNoteRef.current) {
         addNoteRef.current.value = "";
       }
     }
   };
+  const handleAddNoteKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((getAddNoteContent().length > 0) && (e.keyCode === 13)) {
+      e.preventDefault();
+      handleAddNote();
+    }
+  };
   const handleDeletePhotoOrNote = (item: IPhotoOrNote) => {
     if (inputDisabled) {
       return;
@@ -274,7 +285,10 @@ export const PhotoOrNoteField: React.FC<FieldProps> = props => {
   const renderNoteSubTab = () => {
     return (
       <div className={css.noteSubTab}>
-        {!inputDisabled && <textarea className={css.addNote} ref={addNoteRef} placeholder="Add a note" onKeyUp={handleAddNoteKeyUp} />}
+        <div className={css.addNoteContainer}>
+          {!inputDisabled && <textarea className={css.addNote} ref={addNoteRef} placeholder="Add a note and press enter to save" onKeyUp={handleAddNoteKeyUp} />}
+          {!inputDisabled && <div className={css.addNoteButton} onClick={handleAddNote}><Icon name={"add_circle"}/></div>}
+        </div>
         {notes().map((note, index) => <Note key={index} note={note} deleteNote={handleDeletePhotoOrNote} inputDisabled={inputDisabled} />)}
       </div>
     );