Merge branch 'feature/manage-tasks' into 'main'

added edit task

See merge request !18

src/components/todolist/TaskItem.jsx

 import { useTasks } from "@context/TasksContext"
-import { TrashIcon } from '@heroicons/react/24/outline'
+import { TrashIcon, PencilIcon } from '@heroicons/react/24/outline'
 
-export default function TaskItem({ task }) {
+export default function TaskItem({ task, onClick }) {
 
     const { tasks, setTasks } = useTasks()
 
@@ -46,7 +46,9 @@ export default function TaskItem({ task }) {
 
     return (
         <li>
-            <div className="flex items-start p-4 border rounded-lg shadow-sm bg-white dark:bg-gray-700 dark:border-gray-600 my-2 hover:shadow-md transition-shadow">
+            <div  
+            // onClick={() => onClick(task)} 
+            className="flex items-start p-4 border rounded-lg shadow-sm bg-white dark:bg-gray-700 dark:border-gray-600 my-2 hover:shadow-md transition-shadow">
                 <div className="flex-shrink-0 pt-1">
                     <input
                         id={task.id}
@@ -71,12 +73,19 @@ export default function TaskItem({ task }) {
     {formattedDate}
 </p>
                 </div>
+                <button
+                    onClick={() => onClick(task)}
+                    className="ml-auto p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none"
+                >
+                    <PencilIcon className="w-5 h-5 text-red-500 hover:text-red-700"/>
+                </button>
                 <button
                     onClick={() => onDelete(task.id)}
                     className="ml-auto p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none"
                 >
                     <TrashIcon className="w-5 h-5 text-red-500 hover:text-red-700" />
                 </button>
+                
             </div>
         </li>
     )

src/components/todolist/TaskList.jsx

 import TaskItem from "./TaskItem"
 
-export default function TaskList({ tasks }) {
-    const taskItems = tasks.map((task) => <TaskItem key={task.id} task={task}/>)
+export default function TaskList({ tasks, onClickItem }) {
+    const taskItems = tasks.map((task) => <TaskItem key={task.id} task={task} onClick={onClickItem}/>)
 
     return (
         <ul className="space-y-4">

src/pages/Todolist.jsx

@@ -9,7 +9,6 @@ export default function Todolist() {
 
     const newTask = () => {
         return {
-            id: crypto.randomUUID(),
             name: "",
             isCompleted: false,
             dueDate: ""
@@ -21,12 +20,40 @@ export default function Todolist() {
             ...task,
             dueDate: task.dueDate || new Date().toISOString().split("T")[0],
         };
+
+        if (newTask?.id) {
+            replaceTask(task)
+        } else {
+            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 [isModalOpen, setIsModalOpen] = useState(false);
     const openModal = () => setIsModalOpen(true);
     const closeModal = () => setIsModalOpen(false);
+    const editTask = (task) => {
+        setEditedTask(task)
+        openModal()
+    }
+    const createNewTask = () => {
+        setEditedTask(newTask())
+        openModal()
+    }
 
     return (
         <div className="w-full h-screen bg-gray-200 dark:bg-gray-900 flex justify-center items-start transition-colors">
@@ -37,18 +64,18 @@ export default function Todolist() {
                     </h1>
                 </div>
                 <div>
-                    <AddTaskButton onClick={openModal} />
+                    <AddTaskButton onClick={createNewTask} />
                 </div>
                 <div className="text-gray-700 dark:text-gray-300">
                     {tasks.length > 0 ? (
-                        <TaskList tasks={tasks} />
+                        <TaskList tasks={tasks} onClickItem={editTask} />
                     ) : (
                         "You are done for the day!"
                     )}
                 </div>
             </div>
 
-      <Modal task={newTask()} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask}/>
+      <Modal task={editedTask} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask}/>
     </div>
     )
 }
\ No newline at end of file