From 5df1b3f94571a2fb905c6948db70400470874593 Mon Sep 17 00:00:00 2001
From: Anas OUKASSOU <anas.oukassou@etu.univ-amu.fr>
Date: Mon, 10 Mar 2025 14:51:01 +0100
Subject: [PATCH] Refactor Modal
---
src/components/todolist/Modal.jsx | 141 ++++++++++++++++--------------
src/pages/Todolist.jsx | 12 ++-
2 files changed, 86 insertions(+), 67 deletions(-)
diff --git a/src/components/todolist/Modal.jsx b/src/components/todolist/Modal.jsx
index ef53a57..6eb49fe 100644
--- a/src/components/todolist/Modal.jsx
+++ b/src/components/todolist/Modal.jsx
@@ -2,79 +2,88 @@ 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);
- };
-
- return (
- <div
- className="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center z-50"
- style={{ pointerEvents: 'none' }}
->
- <div
- className="absolute inset-0 bg-gray-500 bg-opacity-50"
- style={{ pointerEvents: 'none' }}
- ></div>
+ const handleChange = (e) => {
+ const { name, value, type, checked } = e.target;
+ setEditedTask({
+ ...editedTask,
+ [name]: type === 'checkbox' ? checked : value
+ });
+ };
- <div
- className="relative bg-white p-6 rounded-lg shadow-lg w-1/3 z-10"
- style={{ pointerEvents: 'auto' }}
- >
- <h2 className="text-xl mb-4">Add a New Task</h2>
- <p className="mb-4">Enter the task details below:</p>
- <input
- type="text"
- className="w-full p-2 mb-4 border border-gray-300 rounded-md"
- placeholder="Task Name"
- value={taskName}
- onChange={handleInputChange}
- />
-
- <div>
- <DatePicker
- showIcon
- selected={dueDate}
- onChange={(date) => setDueDate(date)}
- />
- </div>
-
- <div className="flex justify-between">
- <button
- onClick={closeModal}
- className="px-4 py-2 bg-red-500 text-white rounded-md"
- >
- Close
- </button>
- <button
- className="px-4 py-2 bg-blue-500 text-white rounded-md"
- onClick={handleSaveTask}
- >
- Save Task
- </button>
- </div>
- </div>
-</div>
+ return (
+ <div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-50">
+ <div
+ className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4"
+ >
+ <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"
+ >
+ <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
+ 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>
+ <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="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}
+ >
+ Cancel
+ </button>
+ <button
+ 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
+ </button>
+ </div>
+ </div>
+ </div>
);
}
\ No newline at end of file
diff --git a/src/pages/Todolist.jsx b/src/pages/Todolist.jsx
index 1a648e7..b74fb81 100644
--- a/src/pages/Todolist.jsx
+++ b/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
--
GitLab