fixed for eslint

Author: Precipicee

client/src/components/task_form.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
 
+import { TimeInput } from "@/components/time_input";
+
 interface Time {
   id: number;
   day: number;
@@ -31,6 +33,9 @@ interface TaskFormProps {
 export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
   const [taskName, setTaskName] = useState("");
   const [description, setDescription] = useState("");
+  const [times, setTimes] = useState<Time[]>([]);
+  //const [existingTopicIds, setExistingTopicIds] = useState<number[]>([]);
+  //const [newTopics, setNewTopics] = useState<{ name: string; color_hex: string }[]>([]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -45,6 +50,9 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
           description: description,
           completed: false,
           user_id: userId,
+          times: times,
+          //existing_topic_ids: existingTopicIds,
+          //new_topics: newTopics,
         }),
       });
 
@@ -80,6 +88,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
         placeholder="Description"
         className="h-32 w-full resize-none rounded border-2 bg-zinc-700 p-2 text-zinc-200"
       />
+      <TimeInput times={times} setTimes={setTimes} />
       <button
         type="submit"
         className="rounded border-2 border-zinc-200 bg-blue-600 px-4 py-2 text-zinc-200 hover:bg-blue-700"

client/src/components/time_input.tsx

@@ -0,0 +1,91 @@
+interface Time {
+  id: number;
+  day: number;
+  start_time: string;
+  end_time: string;
+  repeating: boolean;
+}
+
+interface TimeInputProps {
+  times: Time[];
+  setTimes: (times: Time[]) => void;
+}
+
+const daysOfWeek = [
+  { label: "Mon", value: 1 },
+  { label: "Tue", value: 2 },
+  { label: "Wed", value: 3 },
+  { label: "Thu", value: 4 },
+  { label: "Fri", value: 5 },
+  { label: "Sat", value: 6 },
+  { label: "Sun", value: 7 },
+];
+
+export function TimeInput({ times, setTimes }: TimeInputProps) {
+  return (
+    <div>
+      {times.map((time, index) => (
+        <div key={index}>
+          <select
+            value={time.day}
+            onChange={(e) => {
+              const newTimes = [...times];
+              newTimes[index].day = parseInt(e.target.value);
+              setTimes(newTimes);
+            }}
+          >
+            {daysOfWeek.map((day) => (
+              <option key={day.value} value={day.value}>
+                {day.label}
+              </option>
+            ))}
+          </select>
+          <input
+            type="time"
+            value={time.start_time}
+            onChange={(e) => {
+              const newTimes = [...times];
+              newTimes[index].start_time = e.target.value;
+              setTimes(newTimes);
+            }}
+          />
+          <input
+            type="time"
+            value={time.end_time}
+            onChange={(e) => {
+              const newTimes = [...times];
+              newTimes[index].end_time = e.target.value;
+              setTimes(newTimes);
+            }}
+          />
+          <input
+            type="checkbox"
+            checked={time.repeating}
+            onChange={(e) => {
+              const newTimes = [...times];
+              newTimes[index].repeating = e.target.checked;
+              setTimes(newTimes);
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => setTimes(times.filter((_, i) => i !== index))}
+          >
+            Remove
+          </button>
+        </div>
+      ))}
+      <button
+        type="button"
+        onClick={() =>
+          setTimes([
+            ...times,
+            { id: 0, day: 1, start_time: "", end_time: "", repeating: false },
+          ])
+        }
+      >
+        Add Time
+      </button>
+    </div>
+  );
+}

client/src/components/topic_input.tsx

@@ -0,0 +1,44 @@
+interface Topic {
+  id: number;
+  name: string;
+  color_hex: number;
+}
+
+type TopicSelection =
+  | { type: "existing"; id: number }
+  | { type: "new"; name: string; color_hex: number };
+
+interface TopicInputProps {
+  availableTopics: Topic[];
+  topics: TopicSelection[];
+  setTopics: React.Dispatch<React.SetStateAction<TopicSelection[]>>;
+}
+
+export function TopicInput({
+  availableTopics,
+  topics,
+  setTopics,
+}: TopicInputProps) {
+  return (
+    <div className="mb-4">
+      <select
+        className="w-full rounded border-2 bg-zinc-700 p-2 text-zinc-200"
+        onChange={(e) => {
+          const id = Number(e.target.value);
+          if (!id) return;
+          if (!topics.some((t) => t.type === "existing" && t.id === id)) {
+            setTopics([...topics, { type: "existing", id }]);
+          }
+          e.target.value = "";
+        }}
+      >
+        <option value="">Select Existing Topic</option>
+        {availableTopics.map((topic) => (
+          <option key={topic.id} value={topic.id}>
+            {topic.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

server/task_planner/serializers.py

@@ -1,28 +1,71 @@
 from rest_framework import serializers
+from django.db import transaction
 from .models import Task, Topic, Time
 
 
-class TopicSerializer(serializers.ModelSerializer):
+class TopicReadSerializer(serializers.ModelSerializer):
     class Meta:
         model = Topic
         fields = "__all__"
 
 
-class TimeSerializer(serializers.ModelSerializer):
+class TimeReadSerializer(serializers.ModelSerializer):
     class Meta:
         model = Time
         fields = "__all__"
 
 
 class TaskReadSerializer(serializers.ModelSerializer):
-    topics = TopicSerializer(many=True, read_only=True)
-    times = TimeSerializer(many=True, read_only=True)
+    topics = TopicReadSerializer(many=True, read_only=True)
+    times = TimeReadSerializer(many=True, read_only=True)
 
     class Meta:
         model = Task
         fields = "__all__"
 
+class TopicWriteSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Topic
+        fields = ["name", "color_hex"]
+
+class TimeWriteSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Time
+        fields = ["day", "start_time", "end_time", "repeating"]
+
 class TaskWriteSerializer(serializers.ModelSerializer):
+    existing_topic_ids = serializers.PrimaryKeyRelatedField(
+        many=True, queryset=Topic.objects.all(), write_only=True, required=False
+    )
+    new_topics = TopicWriteSerializer(many=True, write_only=True, required=False)
+    times = TimeWriteSerializer(many=True,  required=False)
+
     class Meta:
         model = Task
-        fields = ["name", "description", "completed"]
+        fields = ["name", "description", "completed", "existing_topic_ids", "new_topics", "times"]
+
+    @transaction.atomic
+    def create(self, validated_data):
+        existing_topics = validated_data.pop("existing_topic_ids", [])
+        new_topics_data = validated_data.pop("new_topics", [])
+        times_data = validated_data.pop("times", [])
+
+        task = Task.objects.create(**validated_data)
+        user = task.user
+
+        if not user:
+            raise serializers.ValidationError("Task user is required to create topics.")
+
+        for topic in existing_topics:
+            task.topics.add(topic)
+
+        for topic_data in new_topics_data:
+            topic = Topic.objects.create(**topic_data, user=task.user)
+            task.topics.add(topic)
+
+        Time.objects.bulk_create([
+            Time(task=task, **time_data)
+            for time_data in times_data
+        ])
+
+        return task

server/task_planner/views.py

@@ -8,22 +8,22 @@
 #from rest_framework.permissions import IsAuthenticated
 
 from .models import Task, Topic, Time
-from .serializers import TaskReadSerializer, TaskWriteSerializer, TopicSerializer, TimeSerializer
+from .serializers import TaskReadSerializer, TaskWriteSerializer, TopicReadSerializer, TimeReadSerializer
 
 
 # Create your views here.
 
 class TopicList(APIView):
     def get(self, request):
         topics = Topic.objects.all()
-        serializer = TopicSerializer(topics, many=True)
+        serializer = TopicReadSerializer(topics, many=True)
         return Response(serializer.data)
 
 
 class TimeList(APIView):
     def get(self, request):
         times = Time.objects.all()
-        serializer = TimeSerializer(times, many=True)
+        serializer = TimeReadSerializer(times, many=True)
         return Response(serializer.data)
 
 class TaskViewSet(ModelViewSet):