Lab: Standard Hooks - Task Manager

src/components/App.jsx

@@ -2,10 +2,16 @@ import React, { useEffect, useContext, useState } from "react";
 import { TaskContext } from "../context/TaskContext";
 import TaskForm from "./TaskForm";
 import SearchBar from "./SearchBar";
+import TaskList from "./TaskList";
 
 function App() {
-  const [tasks, setTasks] = useState([]);
+// get global statee and updater from context
+  const { tasks, setTasks } = useContext(TaskContext);
 
+  //search state
+  const [query, setQuery] = useState("");
+
+  //lad tasks from db.json into context on page load
   useEffect(() => {
     fetch('http://localhost:6001/tasks')
     .then(r=>r.json())
@@ -17,7 +23,8 @@ function App() {
     <div>
       <h1>Task Manager</h1>
       <TaskForm />
-      <SearchBar />
+      <SearchBar setQuery={setQuery} />
+      <TaskList query={query} />
     </div>
   );
 }

src/components/SearchBar.jsx

@@ -1,25 +1,25 @@
-import React, { useRef, useState, useContext } from "react";
-import TaskList from "./TaskList";
-import { TaskContext } from "../context/TaskContext";
+import React, { useRef } from "react";
 
-function SearchBar() {
-  const [query, setQuery] = useState("");
+
+function SearchBar({setQuery}) {
+  const searchRef = useRef("");  
 
   function handleSearch(e) {
-    setQuery(e.target.value);
+    const value = e.target.value;
+    searchRef.current = value;
+    setQuery(value); 
   }
 
 
   return (
-    <div>
+
       <input
         type="text"
         placeholder="Search tasks..."
-        value={query}
+
         onChange={handleSearch}
       />
-      <TaskList query={query}/>
-    </div>
+
   );
 }
 

src/components/TaskForm.jsx

@@ -4,16 +4,26 @@ import { TaskContext } from "../context/TaskContext";
 function TaskForm() {
   const [taskName, setTaskName] = useState("");
 
+  // required: useId for the input
+  const inputId = useId();
+
+    // get addTask from context
+  const { addTask } = useContext(TaskContext);
+
   function handleSubmit(e) {
     e.preventDefault();
     if (taskName.trim() === "") return;
+      // call addTask from context
+    addTask(taskName);
+    //clear imput
     setTaskName("");
   }
 
   return (
     <form onSubmit={handleSubmit}>
-      <label>New Task:</label>
+      <label htmlFor={inputId}>New Task:</label>
       <input
+      id={inputId}
         type="text"
         value={taskName}
         onChange={(e) => setTaskName(e.target.value)}

src/components/TaskList.jsx

@@ -2,7 +2,8 @@ import React, { useContext,useState } from "react";
 import { TaskContext } from "../context/TaskContext";
 
 function TaskList({query}) {
-    const [tasks, setTasks] = useState([]);
+  //gets tasks and toggleComplete from context
+   const { tasks, toggleComplete } = useContext(TaskContext);
     const filteredTasks = tasks.filter(task =>
     task.title.toLowerCase().includes(query.toLowerCase())
   );
@@ -14,7 +15,7 @@ function TaskList({query}) {
           <span style={{ textDecoration: task.completed ? "line-through" : "none" }}>
             {task.title}
           </span>
-          <button data-testid={task.id}>
+          <button data-testid={task.id} onClick={() => toggleComplete(task.id)}>
             {task.completed ? "Undo" : "Complete"}
           </button>
         </li>

src/context/TaskContext.jsx

@@ -3,4 +3,51 @@ import React, { createContext, useState } from "react";
 export const TaskContext = createContext();
 
 export function TaskProvider({ children }) {
+  const [tasks, setTasks] = useState([]);
+
+  //mark task complete or incomplete
+  async function toggleComplete(id) {
+    const taskToUpdate = tasks.find((task) => task.id === id);
+    if (!taskToUpdate) return;
+
+    const updatedTask = {
+      ...taskToUpdate,
+      completed: !taskToUpdate.completed,
+    };
+
+    // update page
+    setTasks((prevTasks) =>
+      prevTasks.map((task) =>
+        task.id === id ? updatedTask : task
+      )
+    );
+
+    // update db.json
+    await fetch(`http://localhost:6001/tasks/${id}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ completed: updatedTask.completed }),
+    });
+  }
+
+  //create a new task (only updates)
+  function addTask(title) {
+    const newTask = {
+      id: tasks.length + 1,
+      title,
+      completed: false,
+    };
+
+    setTasks((prevTasks) => [...prevTasks, newTask]);
+  }
+
+  return (
+    <TaskContext.Provider
+      value={{ tasks, setTasks, toggleComplete, addTask }}
+    >
+      {children}
+    </TaskContext.Provider>
+  );
 }

src/main.jsx

@@ -7,4 +7,4 @@ createRoot(document.getElementById('root')).render(
   <StrictMode>
       <App />
   </StrictMode>,
-)
+);