implement changes after review

7_react/react1/week3/vite-project/src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import "./App.css";
 
 import AddTodo from "./components/AddTodo";
@@ -7,20 +7,30 @@ import Timer from "./components/Timer";
 
 const App = () => {
   const [todos, setTodos] = useState([]);
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
-    fetch(
-      "https://gist.githubusercontent.com/benna100/391eee7a119b50bd2c5960ab51622532/raw"
-    )
-      .then((response) => response.json())
-      .then((data) => {
-        setTodos(data);
-        data.map((todo) => ({
-          id: todo.id,
-          description: todo.description,
-          deadline: todo.deadline,
-          done: todo.done,
+    const fetchTodos = async () => {
+      try {
+        const response = await fetch(
+          "https://gist.githubusercontent.com/benna100/391eee7a119b50bd2c5960ab51622532/raw"
+        );
+        if (!response.ok) {
+          throw new Error("Failed to fetch todos");
+        }
+        const data = await response.json();
+        const processedData = data.map((todo) => ({
+          ...todo,
+          done: false,
         }));
-      });
+        setTodos(processedData);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching todos:", error);
+        setLoading(false);
+      }
+    };
+
+    fetchTodos();
   }, []);
 
   const addTodo = (newTodo) => {

7_react/react1/week3/vite-project/src/components/AddTodo.jsx

@@ -1,34 +1,42 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 
-function AddTodo({addTodo}){
-    const [description, setDescription] = useState("");
-    const [deadline, setDeadline] = useState("");
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        addTodo({ description, deadline });
-        setDescription("");
-        setDeadline("");
-    };
+function AddTodo({ addTodo }) {
+  const [description, setDescription] = useState("");
+  const [deadline, setDeadline] = useState("");
+  const handleSubmit = (e) => {
+    e.preventDefault();
 
-    return (
-        <form onSubmit={handleSubmit} className='add_todo_form'>
-            <input
-            placeholder="Add Todo..."
-            className='add_todo_input'
-            type ="text"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            />
-            <input
-            placeholder="Deadline..."
-            className='add_todo_input'
-            type ="date"
-            value={deadline}
-            onChange={(e) => setDeadline(e.target.value)}
-            />
-            <button type="submit" className='add_todo_button'>Add</button>
-        </form>
-    );
-};
-export default AddTodo
+    if (!description.trim() || !deadline.trim()) {
+      alert("Please fill out all fields");
+      return;
+    }
+    addTodo({ description, deadline });
+    setDescription("");
+    setDeadline("");
+  };
 
+  return (
+    <form onSubmit={handleSubmit} className="add_todo_form">
+      <input
+        placeholder="Add Todo..."
+        className="add_todo_input"
+        type="text"
+        required
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+      />
+      <input
+        placeholder="Deadline..."
+        className="add_todo_input"
+        type="date"
+        required
+        value={deadline}
+        onChange={(e) => setDeadline(e.target.value)}
+      />
+      <button type="submit" className="add_todo_button">
+        Add
+      </button>
+    </form>
+  );
+}
+export default AddTodo;

7_react/react1/week3/vite-project/src/components/Timer.jsx

@@ -1,15 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
 const Timer = () => {
-  const [startTime] = useState(Date.now());
   const [elapsedTime, setElapsedTime] = useState(0);
 
   useEffect(() => {
     const interval = setInterval(() => {
-        setElapsedTime(prevElapsedTime => prevElapsedTime + 1000);
-      }, 1000);
+      setElapsedTime((prevElapsedTime) => prevElapsedTime + 1000);
+    }, 1000);
     return () => clearInterval(interval);
-  }, [startTime]);
+  }, []);
 
   const formatTime = (milliseconds) => {
     const seconds = Math.floor(milliseconds / 1000) % 60;