fixed empty time input

Author: Precipicee

client/src/components/task_form.tsx

@@ -66,6 +66,9 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
       const new_topics = topics
         .filter((t) => t.type === "new")
         .map((t) => ({ name: t.name, color_hex: t.color_hex }));
+
+      const validTimes = times.filter(t => t.start_time && t.end_time);
+
       const response = await fetch("http://localhost:8000/api/planner/tasks/", {
         method: "POST",
         headers: {
@@ -77,7 +80,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
           description: description,
           completed: false,
           user_id: userId,
-          times: times,
+          times: validTimes,
           existing_topic_ids: existing_topic_ids,
           new_topics: new_topics,
         }),

client/src/components/task_item.tsx

@@ -93,6 +93,8 @@ export function TaskItem({
           color_hex: t.color_hex,
         }));
 
+      const validTimes = draftTimes.filter(t => t.start_time && t.end_time);
+
       const response = await fetch(
         `http://localhost:8000/api/planner/tasks/${item.id}/`,
         {
@@ -107,7 +109,7 @@ export function TaskItem({
             completed: item.completed,
             existing_topic_ids: existing_topic_ids,
             new_topics: new_topics,
-            times: draftTimes,
+            times: validTimes,
           }),
         },
       );

client/src/components/time_input.tsx

@@ -22,17 +22,35 @@ const daysOfWeek = [
 ];
 
 export function TimeInput({ times, setTimes }: TimeInputProps) {
+  
+  const addTime = () => {
+    // Add a new empty draft time only if there isn't already an empty one
+    const hasEmpty = times.some(t => !t.start_time || !t.end_time);
+    if (!hasEmpty) {
+      setTimes([
+        ...times,
+        { id: 0, day: 1, start_time: "", end_time: "", repeating: false },
+      ]);
+    }
+  };
+
+  const updateTime = (index: number, field: keyof Time, value: any) => {
+    const newTimes = [...times];
+    newTimes[index] = { ...newTimes[index], [field]: value };
+    setTimes(newTimes);
+  };
+
+  const removeTime = (index: number) => {
+    setTimes(times.filter((_, i) => i !== index));
+  };
+
   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);
-            }}
+            onChange={(e) => updateTime(index, "day", parseInt(e.target.value))}
           >
             {daysOfWeek.map((day) => (
               <option key={day.value} value={day.value}>
@@ -43,46 +61,29 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
           <input
             type="time"
             value={time.start_time}
-            onChange={(e) => {
-              const newTimes = [...times];
-              newTimes[index].start_time = e.target.value;
-              setTimes(newTimes);
-            }}
+            onChange={(e) => updateTime(index, "start_time", e.target.value)}
           />
           <input
             type="time"
             value={time.end_time}
-            onChange={(e) => {
-              const newTimes = [...times];
-              newTimes[index].end_time = e.target.value;
-              setTimes(newTimes);
-            }}
+            onChange={(e) => updateTime(index, "end_time", e.target.value)}
           />
           <input
             type="checkbox"
             checked={time.repeating}
-            onChange={(e) => {
-              const newTimes = [...times];
-              newTimes[index].repeating = e.target.checked;
-              setTimes(newTimes);
-            }}
+            onChange={(e) => updateTime(index, "repeating", e.target.checked)}
           />
           <button
             type="button"
-            onClick={() => setTimes(times.filter((_, i) => i !== index))}
+            onClick={() => removeTime(index)}
           >
             Remove
           </button>
         </div>
       ))}
       <button
         type="button"
-        onClick={() =>
-          setTimes([
-            ...times,
-            { id: 0, day: 1, start_time: "", end_time: "", repeating: false },
-          ])
-        }
+        onClick={addTime}
       >
         Add Time
       </button>