diff --git a/src/components/todolist/Todolist.jsx b/src/components/todolist/Todolist.jsx index a0f591ca6b8472c579b3f1c4d7beb8a378b9320d..157e6324b7833fd96158d86662fca2cdca242b8c 100644 --- a/src/components/todolist/Todolist.jsx +++ b/src/components/todolist/Todolist.jsx @@ -4,18 +4,19 @@ import TaskList from "@components/todolist/TaskList"; import { useState } from "react"; import { useTasks } from "@context/TasksContext"; -export default function Todolist({ selectedDate=null }) { - const { tasks, setTasks } = useTasks() +export default function Todolist({ selectedDate = null }) { + const { tasks, setTasks } = useTasks(); + const [searchQuery, setSearchQuery] = useState(""); const newTask = () => { const currentUser = JSON.parse(localStorage.getItem("currentUser")); return { - email : currentUser.email, + email: currentUser.email, name: "", isCompleted: false, dueDate: new Date().toISOString().split("T")[0], - } - } + }; + }; const saveTask = (task) => { const newTask = { @@ -24,65 +25,79 @@ export default function Todolist({ selectedDate=null }) { }; if (newTask?.id) { - replaceTask(task) + replaceTask(task); } else { - newTask.id = crypto.randomUUID() + newTask.id = crypto.randomUUID(); setTasks([...tasks, newTask]); } }; const replaceTask = (task) => { - const nextTasks = tasks.map((t) => { - if (t.id === task.id) { - return task - } else { - return t - } - }) - - setTasks(nextTasks) - } - - const [editedTask, setEditedTask ] = useState(newTask()) + const nextTasks = tasks.map((t) => (t.id === task.id ? task : t)); + setTasks(nextTasks); + }; + const [editedTask, setEditedTask] = useState(newTask()); const [isModalOpen, setIsModalOpen] = useState(false); + const openModal = () => setIsModalOpen(true); const closeModal = () => setIsModalOpen(false); + const editTask = (task) => { - setEditedTask(task) - openModal() - } + setEditedTask(task); + openModal(); + }; const createNewTask = () => { - setEditedTask(newTask()) - openModal() - } + setEditedTask(newTask()); + openModal(); + }; - const filteredTasks = selectedDate ? tasks.filter(task => { - const currentUser = JSON.parse(localStorage.getItem("currentUser")); - if (!task.dueDate || task.email != currentUser.email) return false; - const taskDate = new Date(task.dueDate); - return taskDate.toDateString() === selectedDate.toDateString(); - }) : tasks; + const filteredTasks = selectedDate + ? tasks.filter((task) => { + const currentUser = JSON.parse(localStorage.getItem("currentUser")); + if (!task.dueDate || task.email !== currentUser.email) return false; + const taskDate = new Date(task.dueDate); + return taskDate.toDateString() === selectedDate.toDateString(); + }) + : tasks; + + // 🔍 Filtrer les tâches en fonction de la recherche + const searchedTasks = filteredTasks.filter((task) => + task.name.toLowerCase().includes(searchQuery.toLowerCase()) + ); return ( <div> - <div> - <h1 className="text-3xl font-bold text-left mb-6 text-gray-900 dark:text-white"> - Tasks for {selectedDate.toDateString()} - </h1> - </div> - <div> - <AddTaskButton onClick={createNewTask} /> - </div> - <div className="text-gray-700 dark:text-gray-300"> - {filteredTasks.length > 0 ? ( - <TaskList tasks={filteredTasks} onClickItem={editTask} /> - ) : ( - "You are done for the day!" - )} - </div> - <Modal task={editedTask} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask}/> - </div> - ) -} \ No newline at end of file + <div> + <h1 className="text-3xl font-bold text-left mb-6 text-gray-900 dark:text-white"> + Tasks for {selectedDate.toDateString()} + </h1> + </div> + + <div className="mb-4"> + <input + type="text" + placeholder="Search tasks..." + value={searchQuery} + onChange={(e) => setSearchQuery(e.target.value)} + className="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" + /> + </div> + + <div> + <AddTaskButton onClick={createNewTask} /> + </div> + + <div className="text-gray-700 dark:text-gray-300"> + {searchedTasks.length > 0 ? ( + <TaskList tasks={searchedTasks} onClickItem={editTask} /> + ) : ( + "No matching tasks found." + )} + </div> + + <Modal task={editedTask} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} /> + </div> + ); +}