auto reloads

frontend/src/api/tasks.ts

@@ -1,73 +1,75 @@
 // Define a type for the task (adjust according to your task schema)
-export interface Task  {
-    _id: string;
-    date: string;
-    title: string; 
-    label: string;
-    priority: string;
-    description?: string;
-};
+export interface Task {
+  _id: string;
+  date: string;
+  title: string;
+  label: string;
+  priority: string;
+  description?: string;
+}
 
 const tasksURL: string = "http://localhost:8000/api/tasks";
 
 export const getTasks = async (): Promise<Task[] | null> => {
-    try {
-        const res = await fetch(tasksURL, {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            cache: "no-store", 
-        });
+  try {
+    const res = await fetch(tasksURL, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      cache: "no-store",
+    });
 
-        // Check if the response is OK (status code 200-299)
-        if (!res.ok) {
-            throw new Error(`HTTP error! status: ${res.status}`);
-        }
+    // Check if the response is OK (status code 200-299)
+    if (!res.ok) {
+      throw new Error(`HTTP error! status: ${res.status}`);
+    }
 
-        // Parse the JSON response
-        const tasks: Task[] = await res.json();
-        console.log("Fetched tasks:", tasks); // Remove this log in production if not necessary
+    // Parse the JSON response
+    const tasks: Task[] = await res.json();
+    console.log("Fetched tasks:", tasks); // Remove this log in production if not necessary
 
-        return tasks;
-    } catch (error) {
-        console.error("Error fetching tasks:", error);
-        return null;
-    }
+    return tasks;
+  } catch (error) {
+    console.error("Error fetching tasks:", error);
+    return null;
+  }
 };
 
-export const addTask = async (task: Task) => {
-    try {
-        const res = await fetch(tasksURL, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            cache: "no-store", 
-            body: JSON.stringify({
-                _id: task._id,
-                date: task.date,
-                title: task.title, 
-                label: task.label,
-                priority: task.priority,
-                description: task.description,
-            }),
-        })
-        .then(async (res) => {
-            const response = await res.json();
-            console.log(res.ok);
-            if (!res.ok) {
-              // check server response
-              throw new Error(res.status + "-" + res.statusText)
-            }
-            return true;
-          })
-          .catch((error) => {
-            console.error("Error: ", error);
-            return false;
-          });
-        } catch (error) {
-            console.error("Error fetching tasks:", error);
-            return null;
-        }
-    };
+export const addTask = async (task: Task): Promise<boolean> => {
+  try {
+    const res = await fetch(tasksURL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      cache: "no-store",
+      body: JSON.stringify({
+        _id: task._id,
+        date: task.date,
+        title: task.title,
+        label: task.label,
+        priority: task.priority,
+        description: task.description,
+      }),
+    });
+
+    // Check if the response is OK (status code 200-299)
+    if (!res.ok) {
+      // If not, throw an error with the status and message
+      const response = await res.json();
+      console.error(
+        `Failed to add task: ${response.message || res.statusText}`
+      );
+      return false; // Return false if the task was not added successfully
+    }
+
+    // If the task was added successfully
+    console.log("Task added successfully!");
+    return true;
+  } catch (error) {
+    // Log any errors that occur during the fetch or handling process
+    console.error("Error adding task:", error);
+    return false; // Return false if an error occurs
+  }
+};

frontend/src/components/todolist/addTask.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import style from "./addTask.module.css"; // Assuming the correct path for your CSS
 import { addTask } from "../../api/tasks";
 
-const AddTask = () => {
+const AddTask = ({ onTaskAdded }) => {
   const [title, setTitle] = useState(""); // Track task title
   const [date, setDate] = useState(""); // Track task date
   const [priority, setPriority] = useState(""); // Track task priority
@@ -32,6 +32,8 @@ const AddTask = () => {
       const isTaskAdded = await addTask(newTask);
 
       if (isTaskAdded) {
+        console.log("here");
+        onTaskAdded(newTask);
         // Clear form fields after submitting
         setTitle("");
         setDate("");
@@ -42,7 +44,6 @@ const AddTask = () => {
         console.log("Task posted successfully!");
 
         // Notify the parent component to update the task list
-        onTaskAdded(newTask);
       }
     } catch (err) {
       console.error("Error posting task:", err);

frontend/src/components/todolist/page.tsx

@@ -19,7 +19,7 @@ function MyApp() {
       });
   }, []); // Empty dependency array ensures this runs once on component mount
 
-    const handleTaskAdded = (newTask) => {
+    const handleTaskAdded = (newTask: Task) => {
       setTasks((prevTasks) => [...prevTasks, newTask]); // Add the new task to the task list
     };
   return (
@@ -41,7 +41,7 @@ function MyApp() {
         )}
       </div>
       <div className="add-task-container">
-        <AddTask />
+        <AddTask onTaskAdded={handleTaskAdded} />
       </div>
     </div>
   );