add search in todoList

src/components/todolist/Todolist.jsx

@@ -5,7 +5,8 @@ import { useState } from "react";
 import { useTasks } from "@context/TasksContext";
 
 export default function Todolist({ selectedDate = null }) {
-    const { tasks, setTasks } = useTasks()
+    const { tasks, setTasks } = useTasks();
+    const [searchQuery, setSearchQuery] = useState("");
 
     const newTask = () => {
         const currentUser = JSON.parse(localStorage.getItem("currentUser"));
@@ -14,8 +15,8 @@ export default function Todolist({ selectedDate=null }) {
             name: "",
             isCompleted: false,
             dueDate: new Date().toISOString().split("T")[0],
-        }
-    }
+        };
+    };
 
     const saveTask = (task) => {
         const newTask = {
@@ -24,46 +25,47 @@ 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 filteredTasks = selectedDate
+        ? tasks.filter((task) => {
               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);
               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 (
         <div>
@@ -72,17 +74,30 @@ export default function Todolist({ selectedDate=null }) {
                     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">
-                    {filteredTasks.length > 0 ? (
-                        <TaskList tasks={filteredTasks} onClickItem={editTask} />
+                {searchedTasks.length > 0 ? (
+                    <TaskList tasks={searchedTasks} onClickItem={editTask} />
                 ) : (
-                        "You are done for the day!"
+                    "No matching tasks found."
                 )}
             </div>
+
             <Modal task={editedTask} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} />
         </div>
-    )
+    );
 }