created basic add form and altered backend to be more extensible

Author: Precipicee

client/src/components/task_form.tsx

@@ -0,0 +1,91 @@
+import { useState } from "react";
+
+interface Time {
+  id: number;
+  day: number;
+  start_time: string;
+  end_time: string;
+  repeating: boolean;
+}
+
+interface Topic {
+  id: number;
+  name: string;
+  color_hex: number;
+}
+
+interface Item {
+  id: number;
+  name: string;
+  completed: boolean;
+  description: string;
+  times: Time[];
+  topics: Topic[];
+}
+
+interface TaskFormProps {
+  userId: number;
+  onTaskCreated: (task: Item) => void;
+}
+
+export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
+  const [taskName, setTaskName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const response = await fetch("http://localhost:8000/api/planner/tasks/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: taskName,
+          description: description,
+          completed: false,
+          user_id: userId,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to create task");
+      }
+
+      const newTask = await response.json();
+      onTaskCreated(newTask);
+      setTaskName("");
+      setDescription("");
+    } catch (error) {
+      console.error("Error creating task:", error);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="space-y-4 rounded-xl border bg-zinc-700 p-4"
+    >
+      <input
+        type="text"
+        value={taskName}
+        onChange={(e) => setTaskName(e.target.value)}
+        placeholder="Task Name"
+        className="w-full rounded border bg-zinc-800 p-2 text-zinc-200"
+        required
+      />
+      <textarea
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        placeholder="Description"
+        className="w-full rounded border bg-zinc-800 p-2 text-zinc-200"
+      />
+      <button
+        type="submit"
+        className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+      >
+        Add Task
+      </button>
+    </form>
+  );
+}

client/src/components/task_item.tsx

@@ -1,25 +1,25 @@
-type Time = {
+interface Time {
   id: number;
   day: number;
   start_time: string;
   end_time: string;
   repeating: boolean;
-};
+}
 
-type Topic = {
+interface Topic {
   id: number;
   name: string;
   color_hex: number;
-};
+}
 
-type Item = {
+interface Item {
   id: number;
   name: string;
   completed: boolean;
   description: string;
   times: Time[];
   topics: Topic[];
-};
+}
 
 type ItemProps = {
   item: Item;

client/src/components/task_list.tsx

@@ -1,27 +1,27 @@
 import { TaskItem } from "./task_item";
 
-type Time = {
+interface Time {
   id: number;
   day: number;
   start_time: string;
   end_time: string;
   repeating: boolean;
-};
+}
 
-type Topic = {
+interface Topic {
   id: number;
   name: string;
   color_hex: number;
-};
+}
 
-type Item = {
+interface Item {
   id: number;
   name: string;
   completed: boolean;
   description: string;
   times: Time[];
   topics: Topic[];
-};
+}
 
 type ListProps = {
   items: Item[];

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

@@ -1,30 +1,31 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
+import { TaskForm } from "@/components/task_form";
 import { TaskList } from "@/components/task_list";
 
-type Time = {
+interface Time {
   id: number;
   day: number;
   start_time: string;
   end_time: string;
   repeating: boolean;
-};
+}
 
-type Topic = {
+interface Topic {
   id: number;
   name: string;
   color_hex: number;
-};
+}
 
-type Item = {
+interface Item {
   id: number;
   name: string;
   completed: boolean;
   description: string;
   times: Time[];
   topics: Topic[];
-};
+}
 
 export default function TasksPage() {
   const router = useRouter();
@@ -43,7 +44,6 @@ export default function TasksPage() {
         );
         const data = await response.json();
         setItems(data);
-        console.log(data);
       } catch (err) {
         console.error("Failed to load tasks:", err);
       } finally {
@@ -57,6 +57,10 @@ export default function TasksPage() {
     return <p>Loading tasks...</p>;
   }
 
+  const handleTaskCreated = (task: Item) => {
+    setItems((prev) => [...prev, task]);
+  };
+
   function handleToggleTask(id: number) {
     setItems((prevItems) =>
       prevItems.map((item) =>
@@ -66,9 +70,15 @@ export default function TasksPage() {
   }
 
   return (
-    <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} />
+    <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">Task List</h1>
+        <TaskList items={items} onToggleTask={handleToggleTask} />
+      </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>
+        <TaskForm userId={Number(id)} onTaskCreated={handleTaskCreated} />
+      </div>
     </div>
   );
 }

server/task_planner/views.py

@@ -1,9 +1,11 @@
 from django.shortcuts import render
 
 # from rest_framework import generics, permissions
+from rest_framework.exceptions import ValidationError
 from rest_framework.response import Response
 from rest_framework.views import APIView
 from rest_framework.viewsets import ModelViewSet
+#from rest_framework.permissions import IsAuthenticated
 
 from .models import Task, Topic, Time
 from .serializers import TaskReadSerializer, TaskWriteSerializer, TopicSerializer, TimeSerializer
@@ -25,6 +27,9 @@ def get(self, request):
         return Response(serializer.data)
 
 class TaskViewSet(ModelViewSet):
+
+    #permission_classes = [IsAuthenticated]  # Uncomment when authentication is added.
+
     def get_serializer_class(self):
         if self.action in ['list', 'retrieve']:
             return TaskReadSerializer
@@ -41,4 +46,12 @@ def get_queryset(self):
         return Task.objects.all()
 
     def perform_create(self, serializer):
-        serializer.save(user=self.request.user)
+        # Use explicit user_id when provided (no auth yet); otherwise require auth
+        user_id = self.request.data.get("user_id")
+        if user_id:
+            serializer.save(user_id=user_id)
+            return
+        if self.request.user and self.request.user.is_authenticated:
+            serializer.save(user=self.request.user)
+            return
+        raise ValidationError({"user_id": "Provide user_id or authenticate."})