STD21033 : Examen WEB2

src/hooks/useLocalStorage.ts

@@ -1,6 +1,17 @@
-const useLocalStorage = () => {
+import { useEffect, useState } from "react";
 
-}
+const useLocalStorage = (key : string, initialValue : any) => {
+  const [value, setValue] = useState(() => {
+    const storedValue = localStorage.getItem(key);
+    return storedValue ? JSON.parse(storedValue) : initialValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue];
+};
 
 export {
   useLocalStorage

src/pages/tasks.tsx

@@ -1,4 +1,7 @@
-import React, { ChangeEvent, useRef } from 'react';
+
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useTaskManager } from '@/store/useTaskManager';
+import React, { ChangeEvent, useEffect, useRef } from 'react';
 
 interface Task {
   id: number,
@@ -7,68 +10,78 @@ interface Task {
 }
 
 const TaskManager = () => {
-  // const createTaskRef = ...:
-  // const {
-  //   tasks,
-  //   searchTask,
-  //   addTask,
-  //   updateTask,
-  //   deleteTask,
-  //   setSearchTask,
-  // } = useTaskManager();
+   const createTaskRef = useRef<HTMLInputElement>(null);
+   const {
+     tasks,
+     searchTask,
+     addTask,
+     updateTask,
+     deleteTask,
+     setSearchTask,
+   } = useTaskManager();
 
   const handleAddTask = () => {
-    const title = ""; // Replace with the value in the createTaskRef 
+    const title = createTaskRef.current?.value || ""; // Replace with the value in the createTaskRef 
     const newTask = {
       id: Date.now(),
       title,
       completed: false,
     };
-    // addTask(newTask);
+    addTask(newTask);
   };
 
   const handleUpdateTask = (taskId: number, updatedTask: Task) => {
-    // updateTask(taskId, updatedTask);
+     updateTask(taskId, updatedTask);
   };
 
   const handleDeleteTask = (taskId: number) => {
-    // deleteTask(taskId);
+     deleteTask(taskId);
   };
 
   const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
-    // setSearchTask(e.target.value);
+     setSearchTask(e.target.value);
   };
 
   // See! I already give you everything!
-  // const filteredTasks = tasks.filter((task) =>
-  //   task.title.toLowerCase().includes(searchTask.toLowerCase())
-  // );
+  const filteredTasks = tasks.filter((task) =>
+    task.title.toLowerCase().includes(searchTask.toLowerCase())
+  );
+
+  // integrate useLocalStorage to task
+  const [storedTasks, setStoredTasks] = useLocalStorage('tasks', []);
+
+  useEffect(() => {
+    setStoredTasks(tasks);
+  }, [tasks, setStoredTasks]);
 
   return (
     <div>
       <h1>Task Manager</h1>
 
-      <input type="text" /*ref={}*//>
+      <input type="text" ref={createTaskRef}/>
 
-      <button onClick={handleAddTask}>Add Task</button>
+      <button onClick={handleAddTask} >Add Task</button>
 
       <input type="text" onChange={handleSearch} placeholder="Search Task" />
 
-      <ul>
-        {/* 
+      <ul> 
         {filteredTasks.map((task) => (
           <li key={task.id}>
             <input
               type="text"
               value={task.title}
               onChange={(e) =>
-                handleUpdateTask(task.id, { title: e.target.value })
+                handleUpdateTask(task.id, { 
+                  id: task.id,
+                  title: e.target.value,
+                  completed: task.completed
+                 })
               }
             />
             <button onClick={() => handleDeleteTask(task.id)}>Delete</button>
+            <span>{task.title}</span>
           </li>
         ))}
-        */}
       </ul>
     </div>
   );

src/store/useTaskManager.ts

@@ -1,7 +1,48 @@
-const useTaskManager = () => {
+import { title } from "process"
+import { create } from "zustand"
 
+interface Task {
+  id: number;
+  title: string;
+  completed: boolean;
 }
 
+type Tasks = {
+  task : Task
+}
+
+interface TaskManagerState {
+  tasks: Task[];
+  searchTask: string;
+  addTask: (task: Task) => void;
+  updateTask: (taskId: number, updatedTask: Task) => void;
+  deleteTask: (taskId: number) => void;
+  setSearchTask: (search: string) => void;
+}
+
+const useTaskManager = create<TaskManagerState>((set) => ({
+  tasks: [],
+  searchTask: '',
+  addTask: (task) =>
+    set((state) => ({
+      tasks: [...state.tasks, task],
+    })),
+  updateTask: (taskId, updatedTask) =>
+    set((state) => ({
+      tasks: state.tasks.map((task) =>
+        task.id === taskId ? { ...task, ...updatedTask } : task
+      ),
+    })),
+  deleteTask: (taskId) =>
+    set((state) => ({
+      tasks: state.tasks.filter((task) => task.id !== taskId),
+    })),
+  setSearchTask: (search) =>
+    set((state) => ({
+      searchTask: search,
+    })),
+}));
+
 export {
   useTaskManager
 }