Refactor Modal

src/components/todolist/Modal.jsx

@@ -2,76 +2,85 @@ import { useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
-export default function Modal({ isOpen, closeModal, saveTask }) {
+export default function Modal({task, isOpen, closeModal, saveTask }) {
     if (!isOpen) return null;
 
-    const [taskName, setTaskName] = useState("");
-    const [dueDate, setDueDate] = useState(new Date());
+    const [editedTask, setEditedTask] = useState({...task});
 
-    const createTask = () => {
-        return {
-            id: crypto.randomUUID(),
-            name: taskName,
-            isCompleted: false,
-            dueDate: dueDate
-        }
-    }
-
-    const handleSaveTask = () => {
-        const task = createTask()
-        saveTask(task)
+    const handleSave = () => {
+        saveTask(editedTask)
         closeModal()
     }
 
-    const handleInputChange = (e) => {
-        setTaskName(e.target.value);
+    const handleChange = (e) => {
+      const { name, value, type, checked } = e.target;
+      setEditedTask({
+        ...editedTask,
+        [name]: type === 'checkbox' ? checked : value
+      });
     };
 
+
   return (
+    <div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-50">
           <div 
-  className="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center z-50"
-  style={{ pointerEvents: 'none' }}
+            className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4"
           >
-  <div
-    className="absolute inset-0 bg-gray-500 bg-opacity-50"
-    style={{ pointerEvents: 'none' }}
-  ></div>
-
-  <div
-    className="relative bg-white p-6 rounded-lg shadow-lg w-1/3 z-10"
-    style={{ pointerEvents: 'auto' }}
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-medium">Edit Task</h3>
+              <button 
+                onClick={closeModal}
+                className="text-gray-400 hover:text-gray-500"
               >
-    <h2 className="text-xl mb-4">Add a New Task</h2>
-    <p className="mb-4">Enter the task details below:</p>
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
             
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+                  Task Name
+                </label>
                 <input
-      type="text"
-      className="w-full p-2 mb-4 border border-gray-300 rounded-md"
-      placeholder="Task Name"
-      value={taskName}
-      onChange={handleInputChange}
+                  id="name"
+                  name="name"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+                  value={editedTask.name}
+                  onChange={handleChange}
                 />
+              </div>
               
               <div>
-    <DatePicker
-      showIcon
-      selected={dueDate}
-      onChange={(date) => setDueDate(date)}
+                <label htmlFor="dueDate" className="block text-sm font-medium text-gray-700 mb-1">
+                  Due Date
+                </label>
+                <input
+                  id="dueDate"
+                  name="dueDate"
+                  type="date"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+                  value={editedTask.dueDate}
+                  onChange={handleChange}
                 />
               </div>
+            </div>
             
-    <div className="flex justify-between">
+            <div className="mt-6 flex justify-end space-x-3">
               <button
+                type="button"
+                className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                 onClick={closeModal}
-        className="px-4 py-2 bg-red-500 text-white rounded-md"
               >
-        Close
+                Cancel
               </button>
               <button
-        className="px-4 py-2 bg-blue-500 text-white rounded-md"
-        onClick={handleSaveTask}
+                type="button"
+                className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                onClick={handleSave}
               >
-        Save Task
+                Save
               </button>
             </div>
           </div>

src/pages/Todolist.jsx

@@ -6,6 +6,16 @@ import { useTasks } from "@context/TasksContext";
 
 export default function Todolist() {
     const { tasks, setTasks } = useTasks()
+
+    const newTask = () => {
+        return {
+            id: crypto.randomUUID(),
+            name: "",
+            isCompleted: false,
+            dueDate: ""
+        }
+    }
+
     const saveTask = (task) => {
         const newTask = {
             ...task,
@@ -36,7 +46,7 @@ export default function Todolist() {
         </div>
       </div>
 
-      <Modal isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask}/>
+      <Modal task={newTask()} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask}/>
     </div>
     )
 }
\ No newline at end of file