Change note editing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "taskflow2",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "a little task manager",
   "main": ".vite/build/main/index.js",
   "author": "@audrey-yang",

src/renderer/components/EditComponents.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
@@ -50,18 +51,24 @@ export const titleEditor = (
 );
 
 export const notesEditor = (
-  note: string,
-  setNote: (newNote: string) => void,
+  originalNote: string,
+  changeNote: (newNote: string) => Promise<void>,
   disabled: boolean,
-) => (
-  <TextField
-    spellCheck={true}
-    value={note}
-    onChange={(event) => setNote(event.target.value)}
-    className="w-10/12"
-    label={disabled ? "Note" : "Edit note"}
-    multiline
-    variant="filled"
-    disabled={disabled}
-  />
-);
+) => {
+  const [note, setNote] = useState(originalNote);
+  return (
+    <TextField
+      spellCheck={true}
+      value={note}
+      onChange={(event) => setNote(event.target.value)}
+      onBlur={async () => {
+        await changeNote(note);
+      }}
+      className="w-10/12"
+      label={disabled ? "Note" : "Edit note"}
+      multiline
+      variant="filled"
+      disabled={disabled}
+    />
+  );
+};

src/renderer/components/Task.tsx

@@ -37,9 +37,6 @@ const Task = ({
   const [newTitle, setNewTitle] = useState(title);
   const [taskPriority, setTaskPriority] = useState(priority);
   const [taskStatus, setTaskStatus] = useState(status);
-  const [taskNote, setTaskNote] = useState(note);
-  const [isEditingNote, setIsEditingNote] = useState(false);
-  const [newNote, setNewNote] = useState(note);
 
   // Change handlers
   const changePriority = async (event: SelectChangeEvent) => {
@@ -61,8 +58,6 @@ const Task = ({
   };
   const changeNote = async (note: string) => {
     await window.api.changeTaskNote(_id, note);
-    setTaskNote(note);
-    setIsEditingNote(false);
   };
   const deleteTask = async () => {
     await window.api.deleteTask(_id);
@@ -133,27 +128,7 @@ const Task = ({
       <AccordionDetails>
         <div className="ml-4">
           <div className="flex flex-row mb-2">
-            {notesEditor(newNote, setNewNote, !isEditingNote)}
-            {isEditingNote ? (
-              <ButtonGroup size="small" aria-label="Submit or cancel">
-                <IconButton aria-label="done" onClick={() => changeNote(newNote)}>
-                  <DoneIcon />
-                </IconButton>
-                <IconButton
-                  aria-label="cancel"
-                  onClick={() => {
-                    setNewNote(taskNote);
-                    setIsEditingNote(false);
-                  }}
-                >
-                  <CancelIcon />
-                </IconButton>
-              </ButtonGroup>
-            ) : (
-              <IconButton aria-label="edit" onClick={() => setIsEditingNote(true)}>
-                <EditIcon />
-              </IconButton>
-            )}
+            {notesEditor(note, changeNote, taskStatus === STATUS.COMPLETED)}
           </div>
           <TaskList parentId={_id} parentIsCompleted={status == STATUS.COMPLETED} />
         </div>