Skip to content
Snippets Groups Projects
Commit 41b40ace authored by alphamine123's avatar alphamine123
Browse files

add search in todoList

parent 2a030777
No related branches found
No related tags found
No related merge requests found
...@@ -5,7 +5,8 @@ import { useState } from "react"; ...@@ -5,7 +5,8 @@ import { useState } from "react";
import { useTasks } from "@context/TasksContext"; import { useTasks } from "@context/TasksContext";
export default function Todolist({ selectedDate = null }) { export default function Todolist({ selectedDate = null }) {
const { tasks, setTasks } = useTasks() const { tasks, setTasks } = useTasks();
const [searchQuery, setSearchQuery] = useState("");
const newTask = () => { const newTask = () => {
const currentUser = JSON.parse(localStorage.getItem("currentUser")); const currentUser = JSON.parse(localStorage.getItem("currentUser"));
...@@ -14,8 +15,8 @@ export default function Todolist({ selectedDate=null }) { ...@@ -14,8 +15,8 @@ export default function Todolist({ selectedDate=null }) {
name: "", name: "",
isCompleted: false, isCompleted: false,
dueDate: new Date().toISOString().split("T")[0], dueDate: new Date().toISOString().split("T")[0],
} };
} };
const saveTask = (task) => { const saveTask = (task) => {
const newTask = { const newTask = {
...@@ -24,46 +25,47 @@ export default function Todolist({ selectedDate=null }) { ...@@ -24,46 +25,47 @@ export default function Todolist({ selectedDate=null }) {
}; };
if (newTask?.id) { if (newTask?.id) {
replaceTask(task) replaceTask(task);
} else { } else {
newTask.id = crypto.randomUUID() newTask.id = crypto.randomUUID();
setTasks([...tasks, newTask]); setTasks([...tasks, newTask]);
} }
}; };
const replaceTask = (task) => { const replaceTask = (task) => {
const nextTasks = tasks.map((t) => { const nextTasks = tasks.map((t) => (t.id === task.id ? task : t));
if (t.id === task.id) { setTasks(nextTasks);
return task };
} else {
return t
}
})
setTasks(nextTasks)
}
const [editedTask, setEditedTask ] = useState(newTask())
const [editedTask, setEditedTask] = useState(newTask());
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => setIsModalOpen(true); const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false); const closeModal = () => setIsModalOpen(false);
const editTask = (task) => { const editTask = (task) => {
setEditedTask(task) setEditedTask(task);
openModal() openModal();
} };
const createNewTask = () => { const createNewTask = () => {
setEditedTask(newTask()) setEditedTask(newTask());
openModal() openModal();
} };
const filteredTasks = selectedDate ? tasks.filter(task => { const filteredTasks = selectedDate
? tasks.filter((task) => {
const currentUser = JSON.parse(localStorage.getItem("currentUser")); const currentUser = JSON.parse(localStorage.getItem("currentUser"));
if (!task.dueDate || task.email != currentUser.email) return false; if (!task.dueDate || task.email !== currentUser.email) return false;
const taskDate = new Date(task.dueDate); const taskDate = new Date(task.dueDate);
return taskDate.toDateString() === selectedDate.toDateString(); return taskDate.toDateString() === selectedDate.toDateString();
}) : tasks; })
: tasks;
// 🔍 Filtrer les tâches en fonction de la recherche
const searchedTasks = filteredTasks.filter((task) =>
task.name.toLowerCase().includes(searchQuery.toLowerCase())
);
return ( return (
<div> <div>
...@@ -72,17 +74,30 @@ export default function Todolist({ selectedDate=null }) { ...@@ -72,17 +74,30 @@ export default function Todolist({ selectedDate=null }) {
Tasks for {selectedDate.toDateString()} Tasks for {selectedDate.toDateString()}
</h1> </h1>
</div> </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> <div>
<AddTaskButton onClick={createNewTask} /> <AddTaskButton onClick={createNewTask} />
</div> </div>
<div className="text-gray-700 dark:text-gray-300"> <div className="text-gray-700 dark:text-gray-300">
{filteredTasks.length > 0 ? ( {searchedTasks.length > 0 ? (
<TaskList tasks={filteredTasks} onClickItem={editTask} /> <TaskList tasks={searchedTasks} onClickItem={editTask} />
) : ( ) : (
"You are done for the day!" "No matching tasks found."
)} )}
</div> </div>
<Modal task={editedTask} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} /> <Modal task={editedTask} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} />
</div> </div>
) );
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment