Merge pull request #13 from codersforcauses/issue-7-Allow_CRUD_Operations_on_Tasks

added a delete button to complete CRUD

Author: Precipicee

client/src/components/task_item.tsx

@@ -30,6 +30,7 @@ type ItemProps = {
   item: Item;
   onToggle?: (id: number) => void;
   onUpdate: (item: Item) => void;
+  onDelete: (id: number) => void;
   availableTopics: Topic[];
 };
 
@@ -41,6 +42,7 @@ export function TaskItem({
   item,
   onToggle,
   onUpdate,
+  onDelete,
   availableTopics,
 }: ItemProps) {
   {
@@ -210,6 +212,8 @@ export function TaskItem({
           </span>
         )}
       </div>
+
+      {/* Edit Button */}
       <div className="mt-2 flex gap-2">
         {isEditing ? (
           <>
@@ -222,6 +226,18 @@ export function TaskItem({
           <button onClick={startEdit}>Edit</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) {
@@ -52,6 +54,7 @@ export function TaskList({
               item={item}
               onToggle={onToggleTask}
               onUpdate={onUpdate}
+              onDelete={onDelete}
               availableTopics={availableTopics}
             />
           </li>

client/src/pages/tasks.tsx

@@ -126,6 +126,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="container mx-auto flex flex-row items-center justify-center p-4">
       <div className="m-4 h-fit w-fit rounded-xl bg-zinc-700 p-4 text-center">
@@ -134,6 +153,7 @@ export default function TasksPage() {
           items={items}
           onToggleTask={handleToggleTask}
           onUpdate={handleTaskUpdated}
+          onDelete={handleTaskDeleted}
           availableTopics={availableTopics}
         />
       </div>