From 0d33a2ab340b5d8beb01ec926ef14a9e82be3c87 Mon Sep 17 00:00:00 2001
From: Miaritiana <hei.miaritiana@gmail.com>
Date: Thu, 15 Jun 2023 11:23:06 +0300
Subject: [PATCH 1/3] feat: Store creation using Zustand to manage tasks

---
 src/pages/tasks.tsx         | 51 ++++++++++++++++++++-----------------
 src/store/useTaskManager.ts | 43 ++++++++++++++++++++++++++++++-
 2 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/src/pages/tasks.tsx b/src/pages/tasks.tsx
index f392f95..e52b580 100644
--- a/src/pages/tasks.tsx
+++ b/src/pages/tasks.tsx
@@ -1,3 +1,5 @@
+
+import { useTaskManager } from '@/store/useTaskManager';
 import React, { ChangeEvent, useRef } from 'react';
 
 interface Task {
@@ -7,68 +9,71 @@ 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())
+  );
 
   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>
   );
diff --git a/src/store/useTaskManager.ts b/src/store/useTaskManager.ts
index 9b5c715..066e4a0 100644
--- a/src/store/useTaskManager.ts
+++ b/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
 }
\ No newline at end of file

From 70d053a7df141411277ab0e5102308d311b43338 Mon Sep 17 00:00:00 2001
From: Miaritiana <hei.miaritiana@gmail.com>
Date: Thu, 15 Jun 2023 11:31:47 +0300
Subject: [PATCH 2/3] feat: add useLocalStorage hooks

---
 src/hooks/useLocalStorage.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index fefb06f..36e79a5 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -1,6 +1,17 @@
-const useLocalStorage = () => {
+import { useEffect, useState } from "react";
 
-}
+const useLocalStorage = (key : string, initialValue : string) => {
+  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

From db67667b8d63c9e12ca483576e65f8ea75d224da Mon Sep 17 00:00:00 2001
From: Miaritiana <hei.miaritiana@gmail.com>
Date: Thu, 15 Jun 2023 11:49:40 +0300
Subject: [PATCH 3/3] feat: Integration of the Local Storage hook in the Task
 Manager

---
 src/hooks/useLocalStorage.ts |  2 +-
 src/pages/tasks.tsx          | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index 36e79a5..37adc19 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-const useLocalStorage = (key : string, initialValue : string) => {
+const useLocalStorage = (key : string, initialValue : any) => {
   const [value, setValue] = useState(() => {
     const storedValue = localStorage.getItem(key);
     return storedValue ? JSON.parse(storedValue) : initialValue;
diff --git a/src/pages/tasks.tsx b/src/pages/tasks.tsx
index e52b580..47be19f 100644
--- a/src/pages/tasks.tsx
+++ b/src/pages/tasks.tsx
@@ -1,6 +1,7 @@
 
+import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useTaskManager } from '@/store/useTaskManager';
-import React, { ChangeEvent, useRef } from 'react';
+import React, { ChangeEvent, useEffect, useRef } from 'react';
 
 interface Task {
   id: number,
@@ -46,6 +47,13 @@ const TaskManager = () => {
     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>