Merge pull request #377 from pankona/refactoring

refactor long function and add some comments
pankona · Dec 9, 2021 · 4089149 · 4089149
2 parents 706c2ad + 336b740
commit 4089149
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/hashira-web/src/TaskList.tsx b/hashira-web/src/TaskList.tsx
@@ -71,6 +71,38 @@ export const TaskList: React.VFC<{
   const [updatedTasks, setUpdatedTasks] = React.useState<{
     [key: string]: string;
   }>({});
+
+  // onEditCompleted は、どれかひとつの task の変更が終わると呼び出される (onBlur)。
+  //
+  // validation の後、string を firebase.TasksObject の形に変換して onEditTasks を呼び出す。
+  //
+  // 典型的な使い方をすると一度に更新される task はたかだかひとつであるが、onEditTasks 内で
+  // 通信エラーが起こるなどすると、変更が DB に反映されていない task が取り残される可能性がありそう。
+  // そのため、変更候補のものはすべていっぺんに更新するような処理にしている。
+  const onEditCompleted = async () => {
+    const tasksToUpdate: firebase.TasksObject = {};
+    for (const v in updatedTasks) {
+      if (updatedTasks[v] === "") {
+        delete updatedTasks[v];
+        setUpdatedTasks({
+          ...updatedTasks,
+        });
+        return;
+      }
+
+      const task = tasksAndPriorities["Tasks"][v];
+      tasksToUpdate[v] = {
+        ID: task.ID,
+        IsDeleted: false,
+        Name: updatedTasks[v],
+        Place: task.Place,
+      };
+    }
+
+    await onEditTasks(tasksToUpdate);
+    setUpdatedTasks({});
+  };
+
   return (
     <StyledList>
       {tasksAndPriorities["Priority"][place] &&
@@ -93,43 +125,20 @@ export const TaskList: React.VFC<{
                         ? updatedTasks[taskId]
                         : taskName
                     }
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    onChange={(e) => {
                       setUpdatedTasks({
                         ...updatedTasks,
                         [e.target.id]: e.target.value,
                       });
                     }}
-                    onBlur={async (_e: React.ChangeEvent<HTMLInputElement>) => {
-                      const tasksToUpdate: firebase.TasksObject = {};
-                      for (const v in updatedTasks) {
-                        if (updatedTasks[v] === "") {
-                          delete updatedTasks[v];
-                          setUpdatedTasks({
-                            ...updatedTasks,
-                          });
-                          return;
-                        }
-
-                        const task = tasksAndPriorities["Tasks"][v];
-                        tasksToUpdate[v] = {
-                          ID: task.ID,
-                          IsDeleted: false,
-                          Name:
-                            updatedTasks[v] !== "" ? updatedTasks[v] : taskName,
-                          Place: task.Place,
-                        };
-                      }
-
-                      await onEditTasks(tasksToUpdate);
-                      setUpdatedTasks({});
-                    }}
+                    onBlur={() => onEditCompleted()}
                   />
 
                   {mode === "select" ? (
                     <StyledCheckbox
                       id={taskId}
                       value={taskName}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      onChange={(e) => {
                         setCheckedTasks({
                           ...checkedTasks,
                           [e.target.id]: e.target.checked,

diff --git a/hashira-web/src/firebase.ts b/hashira-web/src/firebase.ts
@@ -207,6 +207,7 @@ export const updateTasks = async (tasksObject: TasksObject) => {
 // updateTasks2
 // task の状態を変更するために用いる。変更があった task の場所はそのまま維持される。
 // もっぱら、task の中身を編集するときに用いられる。
+// FIXME: 名前がひどいので直すこと
 export const updateTasks2 = async (tasksObject: TasksObject) => {
   try {
     await functions.httpsCallable(