added editing functionality for TASK NAME ONLY

Author: Precipicee

client/src/components/task_item.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 interface Time {
   id: number;
   day: number;
@@ -24,9 +26,52 @@ interface Item {
 type ItemProps = {
   item: Item;
   onToggle?: (id: number) => void;
+  onUpdate: (item: Item) => void;
 };
 
-export function TaskItem({ item, onToggle }: ItemProps) {
+export function TaskItem({ item, onToggle, onUpdate }: ItemProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftName, setDraftName] = useState(item.name);
+  const [saving, setSaving] = useState(false);
+
+  function startEdit() {
+    setDraftName(item.name);
+    setIsEditing(true);
+  }
+
+  function cancelEdit() {
+    setIsEditing(false);
+    setDraftName(item.name);
+  }
+
+  async function saveEdit() {
+    setSaving(true);
+    try {
+      const response = await fetch(
+        `http://localhost:8000/api/planner/tasks/${item.id}/`,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            name: draftName,
+            description: item.description,
+            completed: item.completed,
+          }),
+        },
+      );
+      if (!response.ok) {
+        throw new Error("Failed to update task");
+      }
+      const updatedItem = await response.json();
+      onUpdate(updatedItem);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Error saving task:", error);
+    } finally {
+      setSaving(false);
+    }
+  }
+
   return (
     <label className="m-1 flex w-96 flex-col rounded-md border-2 border-zinc-200 bg-zinc-700 p-2">
       <div className="flex items-center justify-between">
@@ -37,13 +82,21 @@ export function TaskItem({ item, onToggle }: ItemProps) {
             onChange={() => onToggle?.(item.id)}
             className="w-xl h-xl accent-zinc-600"
           />
-          <span
-            className={
-              item.completed ? "text-zinc-400 line-through" : "text-zinc-300"
-            }
-          >
-            {item.name}
-          </span>
+          {isEditing ? (
+            <input
+              value={draftName}
+              onChange={(e) => setDraftName(e.target.value)}
+              className="rounded border-2 bg-zinc-600 p-1 text-zinc-200"
+            />
+          ) : (
+            <span
+              className={
+                item.completed ? "text-zinc-400 line-through" : "text-zinc-300"
+              }
+            >
+              {item.name}
+            </span>
+          )}
         </div>
         <div className="flex flex-col items-end text-sm text-zinc-300">
           {item.times?.length > 0
@@ -75,6 +128,27 @@ export function TaskItem({ item, onToggle }: ItemProps) {
             ))
           : "No topics"}
       </div>
+      <div>
+        {item.description ? (
+          <span className="mt-2 block text-zinc-300">{item.description}</span>
+        ) : (
+          <span className="mt-2 block italic text-zinc-500">
+            No description.
+          </span>
+        )}
+      </div>
+      <div className="mt-2 flex gap-2">
+        {isEditing ? (
+          <>
+            <button onClick={saveEdit} disabled={saving}>
+              Save
+            </button>
+            <button onClick={cancelEdit}>Cancel</button>
+          </>
+        ) : (
+          <button onClick={startEdit}>Edit</button>
+        )}
+      </div>
     </label>
   );
 }

client/src/components/task_list.tsx

@@ -26,9 +26,10 @@ interface Item {
 type ListProps = {
   items: Item[];
   onToggleTask?: (id: number) => void;
+  onUpdate: (item: Item) => void;
 };
 
-export function TaskList({ items, onToggleTask }: ListProps) {
+export function TaskList({ items, onToggleTask, onUpdate }: ListProps) {
   if (items.length === 0) {
     return (
       <div>
@@ -41,7 +42,7 @@ export function TaskList({ items, onToggleTask }: ListProps) {
       <ul className="space-y-2">
         {items.map((item) => (
           <li key={item.id}>
-            <TaskItem item={item} onToggle={onToggleTask} />
+            <TaskItem item={item} onToggle={onToggleTask} onUpdate={onUpdate} />
           </li>
         ))}
       </ul>

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

@@ -91,11 +91,19 @@ export default function TasksPage() {
     }
   }
 
+  function handleTaskUpdated(updated: Item) {
+    setItems((prev) => prev.map((t) => (t.id === updated.id ? updated : t)));
+  }
+
   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">
         <h1 className="mb-4 text-3xl font-bold text-zinc-300">Task List</h1>
-        <TaskList items={items} onToggleTask={handleToggleTask} />
+        <TaskList
+          items={items}
+          onToggleTask={handleToggleTask}
+          onUpdate={handleTaskUpdated}
+        />
       </div>
       <div className="m-4 h-fit w-fit rounded-xl bg-zinc-700 p-4 text-center">
         <h1 className="mb-4 text-3xl font-bold text-zinc-300">Add Task</h1>

server/task_planner/views.py

@@ -79,5 +79,16 @@ def toggle_complete(self, request, pk=None):
         serializer = TaskCompleteSerializer(task, data=request.data, partial=True)
         serializer.is_valid(raise_exception=True)
         serializer.save()
+        read_serializer = TaskReadSerializer(task)
+        return Response(read_serializer.data)
+    
+    def update(self, request, *args, **kwargs):
+        partial = kwargs.pop('partial', False)
+        instance = self.get_object()
+
+        write_serializer = TaskWriteSerializer(instance, data=request.data, partial=partial)
+        write_serializer.is_valid(raise_exception=True)
+        task = write_serializer.save()
+
         read_serializer = TaskReadSerializer(task)
         return Response(read_serializer.data)