merged issue-7-Allow_CRUD_Operations_on_Tasks's latest change to add delete button to tasks

Author: Archer-Key

client/src/components/task_item.tsx

@@ -32,6 +32,7 @@ type ItemProps = {
   item: Item;
   onToggle?: (id: number) => void;
   onUpdate: (item: Item) => void;
+  onDelete: (id: number) => void;
   availableTopics: Topic[];
 };
 
@@ -43,6 +44,7 @@ export function TaskItem({
   item,
   onToggle,
   onUpdate,
+  onDelete,
   availableTopics,
 }: ItemProps) {
   {
@@ -210,6 +212,8 @@ export function TaskItem({
         )}
       </div>
 
+      {/* Edit Button */}
+
       <div className="task-edit flex gap-2">
         {isEditing ? (
           <div className="flex w-full flex-row justify-center text-lg">
@@ -233,6 +237,18 @@ export function TaskItem({
           </button>
         )}
       </div>
+
+      {/* Delete Button */}
+      <div>
+        {!isEditing && (
+          <button
+            onClick={() => onDelete(item.id)}
+            className="mt-2 text-red-500"
+          >
+            Delete Task
+          </button>
+        )}
+      </div>
     </div>
   );
 }

client/src/components/task_list.tsx

@@ -27,13 +27,15 @@ type ListProps = {
   items: Item[];
   onToggleTask?: (id: number) => void;
   onUpdate: (item: Item) => void;
+  onDelete: (id: number) => void;
   availableTopics: Topic[];
 };
 
 export function TaskList({
   items,
   onToggleTask,
   onUpdate,
+  onDelete,
   availableTopics,
 }: ListProps) {
   if (items.length === 0) {
@@ -51,6 +53,7 @@ export function TaskList({
             item={item}
             onToggle={onToggleTask}
             onUpdate={onUpdate}
+            onDelete={onDelete}
             availableTopics={availableTopics}
           />
         </li>

client/src/pages/[id]/tasks.tsx

@@ -103,6 +103,25 @@ export default function TasksPage() {
     setItems((prev) => prev.map((t) => (t.id === updated.id ? updated : t)));
   }
 
+  async function handleTaskDeleted(id: number) {
+    if (!window.confirm("Delete this task?")) return;
+
+    try {
+      const response = await fetch(
+        `http://localhost:8000/api/planner/tasks/${id}/`,
+        { method: "DELETE" },
+      );
+
+      if (!response.ok) {
+        throw new Error("Failed to delete task");
+      }
+
+      setItems((prev) => prev.filter((item) => item.id !== id));
+    } catch (error) {
+      console.error("Error deleting task:", error);
+    }
+  }
+
   return (
     <div className="content-container min-w-screen flex h-[85vh] flex-row items-center justify-center bg-slate-950 p-3">
       <div className="task-list-border h-full w-full rounded-lg bg-slate-900 p-3">
@@ -122,6 +141,7 @@ export default function TasksPage() {
                   items={items}
                   onToggleTask={handleToggleTask}
                   onUpdate={handleTaskUpdated}
+                  onDelete={handleTaskDeleted}
                   availableTopics={availableTopics}
                 />
               </div>