Merge pull request #373 from pankona/move-tasks-on-move

implement onMoveTask
pankona · Dec 9, 2021 · 79ffd24 · 79ffd24
2 parents bec4ce9 + 09e1c82
commit 79ffd24
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 2 deletions.
diff --git a/hashira-web/src/App.tsx b/hashira-web/src/App.tsx
@@ -38,6 +38,46 @@ const App: React.VFC = () => {
     setIsUploading(false);
   };
 
+  const onMoveTask = async (taskId: string, direction: "left" | "right") => {
+    if (!user) {
+      return;
+    }
+    const tasksToMove: firebase.TasksObject = {};
+    const task = tasksAndPriorities["Tasks"][taskId];
+    const currentIndex = firebase.Place.indexOf(task.Place);
+    const nextIndex = ((): number => {
+      if (direction === "left") {
+        if (currentIndex === 0) {
+          return firebase.Place.length - 1;
+        }
+        return currentIndex - 1;
+      }
+
+      if (currentIndex === firebase.Place.length - 1) {
+        return 0;
+      }
+      return currentIndex + 1;
+    })();
+
+    tasksToMove[taskId] = {
+      ID: task.ID,
+      IsDeleted: false,
+      Name: task.Name,
+      Place: firebase.Place[nextIndex],
+    };
+
+    setIsUploading(true);
+
+    await firebase.updateTasks(tasksToMove);
+
+    // refresh tasks and priorities
+    const tp = await firebase.fetchTaskAndPriorities(user.uid);
+    setTasksAndPriorities(tp);
+    setCheckedTasks({});
+
+    setIsUploading(false);
+  };
+
   React.useEffect(() => {
     firebase.onAuthStateChanged((user: firebase.User | null) => {
       if (!user) {
@@ -141,6 +181,7 @@ const App: React.VFC = () => {
                 setCheckedTasks={setCheckedTasks}
                 setTasksAndPriorities={setTasksAndPriorities}
                 mode={mode}
+                onMoveTask={onMoveTask}
               />
               <TaskList
                 user={user}
@@ -150,6 +191,7 @@ const App: React.VFC = () => {
                 setCheckedTasks={setCheckedTasks}
                 setTasksAndPriorities={setTasksAndPriorities}
                 mode={mode}
+                onMoveTask={onMoveTask}
               />
               <TaskList
                 user={user}
@@ -159,6 +201,7 @@ const App: React.VFC = () => {
                 setCheckedTasks={setCheckedTasks}
                 setTasksAndPriorities={setTasksAndPriorities}
                 mode={mode}
+                onMoveTask={onMoveTask}
               />
               <TaskList
                 user={user}
@@ -168,6 +211,7 @@ const App: React.VFC = () => {
                 setCheckedTasks={setCheckedTasks}
                 setTasksAndPriorities={setTasksAndPriorities}
                 mode={mode}
+                onMoveTask={onMoveTask}
               />
             </div>
           ) : undefined}

diff --git a/hashira-web/src/TaskList.tsx b/hashira-web/src/TaskList.tsx
@@ -59,6 +59,7 @@ export const TaskList: React.VFC<{
   setCheckedTasks: (a: { [key: string]: boolean }) => void;
   setTasksAndPriorities: (tp: any | undefined) => void;
   mode: "move" | "select";
+  onMoveTask: (taskId: string, direction: "left" | "right") => void;
 }> = ({
   user,
   place,
@@ -67,6 +68,7 @@ export const TaskList: React.VFC<{
   setCheckedTasks,
   setTasksAndPriorities,
   mode,
+  onMoveTask,
 }) => {
   const [updatedTasks, setUpdatedTasks] = React.useState<{
     [key: string]: string;
@@ -145,8 +147,20 @@ export const TaskList: React.VFC<{
                     />
                   ) : (
                     <StyledArrow>
-                      <div style={{ cursor: "pointer" }}>👈</div>
-                      <div style={{ cursor: "pointer" }}>👉</div>
+                      <div
+                        id={taskId}
+                        style={{ cursor: "pointer" }}
+                        onClick={(e) => onMoveTask(e.currentTarget.id, "left")}
+                      >
+                        👈
+                      </div>
+                      <div
+                        id={taskId}
+                        style={{ cursor: "pointer" }}
+                        onClick={(e) => onMoveTask(e.currentTarget.id, "right")}
+                      >
+                        👉
+                      </div>
                     </StyledArrow>
                   )}
                 </>