feat: add immediate UI change on Task delete

client/src/components/MonthCard.tsx

@@ -1,38 +1,55 @@
+import { useState } from "react";
+import mongoose from "mongoose";
+
 import { CreateTaskForm } from "./CreateTaskForm";
 import { MonthDaysRow } from "./MonthDaysRow";
 import { MonthCardHeader } from "./MonthCardHeader";
 import { Notice } from "./Notice";
 import { Task } from "./Task";
 
+import { useAppContext } from "~/hooks";
 import { IMonthData } from "~/api/users";
+import { ITask } from "~/~/models/Task";
+import { deleteTask } from "~/api/tasks";
 
 interface MonthCardProps {
   year: number;
   monthData: IMonthData;
 }
 
 export function MonthCard({ year, monthData }: MonthCardProps) {
-  const { month, tasks } = monthData;
+  const { userId } = useAppContext();
+
+  const [monthTasks, setMonthTasks] = useState<ITask[]>(monthData.tasks);
+
+  // Handle Delete
+  async function handleDelete(taskId: mongoose.Types.ObjectId) {
+    const updatedTasks = monthTasks.filter((task) => task._id !== taskId);
+
+    setMonthTasks(updatedTasks); // Delete from UI
+    await deleteTask(userId, taskId); // Delete from DB
+  }
 
   return (
     <div className="w-fit min-w-[680px] rounded-xl bg-stone-100/75 p-6">
-      <MonthCardHeader year={year} month={month} classes="mb-6" />
+      <MonthCardHeader year={year} month={monthData.month} classes="mb-6" />
 
       <div className="mb-4">
-        {tasks?.length === 0 && (
+        {monthTasks?.length === 0 && (
           <Notice text="You haven't created any tasks yet." />
         )}
 
-        {tasks && tasks?.length > 0 && (
+        {monthTasks && monthTasks?.length > 0 && (
           <div className="flex w-full flex-col justify-center gap-2">
-            <MonthDaysRow year={year} month={month} />
+            <MonthDaysRow year={year} month={monthData.month} />
 
             <div className="space-y-0.5">
-              {tasks.map((task) => (
+              {monthTasks.map((task) => (
                 <Task
                   task={task}
                   year={year}
-                  month={month}
+                  month={monthData.month}
+                  onDelete={handleDelete}
                   key={String(task._id)}
                 />
               ))}

client/src/components/Task.tsx

@@ -1,21 +1,23 @@
 import { useState } from "react";
+import mongoose from "mongoose";
 
 import { Button } from "./ui/Button";
 import { Entry } from "./Entry";
 
-import { deleteTask, updateTask } from "~/api/tasks";
 import { useAppContext, useEntries } from "~/hooks";
-import { cn } from "~/utils";
+import { updateTask } from "~/api/tasks";
 import { ITask } from "~/~/models/Task";
+import { cn } from "~/utils";
 
 interface TaskProps {
   year: number;
   month: number;
   task: ITask;
+  onDelete: (id: mongoose.Types.ObjectId) => void;
 }
 
 // Task
-export function Task({ task, year, month }: TaskProps) {
+export function Task({ task, year, month, onDelete }: TaskProps) {
   const { userId } = useAppContext();
 
   const [newTaskTitle, setNewTaskTitle] = useState(task.title);
@@ -30,13 +32,6 @@ export function Task({ task, year, month }: TaskProps) {
   const firstEntryDay = entries && entries.length > 0 ? entries[0].day : 1;
   const invalidEntries = firstEntryDay - 1;
 
-  // Delete
-  async function handleDeleteTask() {
-    if (task._id) {
-      await deleteTask(userId, task._id);
-    }
-  }
-
   // Edit title
   async function handleEditTitle() {
     if (task._id) {
@@ -77,7 +72,7 @@ export function Task({ task, year, month }: TaskProps) {
       </div>
 
       <Button
-        onClick={handleDeleteTask}
+        onClick={() => onDelete(task._id)}
         classes="size-6 p-0 rounded-[4px] text-sm"
       >
         X