From 66e2b5b28871082a665af5a4ae2b466aeaab642b Mon Sep 17 00:00:00 2001 From: Bildad Ochieng Masaga Date: Fri, 6 Feb 2026 01:32:56 +0300 Subject: [PATCH 1/7] added functions to add task and mark complete/incomplete --- src/context/TaskContext.jsx | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/context/TaskContext.jsx b/src/context/TaskContext.jsx index 6781cdd..7682a54 100644 --- a/src/context/TaskContext.jsx +++ b/src/context/TaskContext.jsx @@ -3,4 +3,38 @@ import React, { createContext, useState } from "react"; export const TaskContext = createContext(); export function TaskProvider({ children }) { + const [tasks, setTasks] = useState([]); + + function toggleComplete(id, currentStatus) { + fetch(`http://localhost:6001/tasks/${id}`, { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ completed: !currentStatus }) + }) + .then(r => r.json()) + .then(updatedTask => { + setTasks(prev => prev.map(task => (task.id == id ? updatedTask : task))) + }); + } + + function addTask(taskTitle) { + fetch("http://localhost:6001/tasks", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + title: taskTitle, + completed: false + }) + }) + .then(r => r.json()) + .then(savedTask => { + setTasks(prevTasks => [...prevTasks, savedTask]) + }) + } + + return ( + < TaskContext.Provider value={{ tasks, setTasks, toggleComplete, addTask }} > + {children} + + ) } From f76404c26ba175ac4ca76af4a7a08e2f861c3c14 Mon Sep 17 00:00:00 2001 From: Bildad Ochieng Masaga Date: Fri, 6 Feb 2026 01:33:37 +0300 Subject: [PATCH 2/7] implemented useContext --- src/components/App.jsx | 8 ++++---- src/components/TaskForm.jsx | 6 +++++- src/components/TaskList.jsx | 11 ++++++----- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 9394aab..1068f28 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -4,13 +4,13 @@ import TaskForm from "./TaskForm"; import SearchBar from "./SearchBar"; function App() { - const [tasks, setTasks] = useState([]); + const { tasks, setTasks } = useContext(TaskContext); useEffect(() => { fetch('http://localhost:6001/tasks') - .then(r=>r.json()) - .then(data=>setTasks(data)) - + .then(r => r.json()) + .then(data => setTasks(data)) + }, []); return ( diff --git a/src/components/TaskForm.jsx b/src/components/TaskForm.jsx index ab2b6f9..eb0d0e6 100644 --- a/src/components/TaskForm.jsx +++ b/src/components/TaskForm.jsx @@ -3,17 +3,21 @@ import { TaskContext } from "../context/TaskContext"; function TaskForm() { const [taskName, setTaskName] = useState(""); + const inputId = useId(null); + const { addTask } = useContext(TaskContext); function handleSubmit(e) { e.preventDefault(); if (taskName.trim() === "") return; + addTask(taskName); setTaskName(""); } return (
- + setTaskName(e.target.value)} diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx index 0bf6249..5b43a2b 100644 --- a/src/components/TaskList.jsx +++ b/src/components/TaskList.jsx @@ -1,9 +1,10 @@ -import React, { useContext,useState } from "react"; +import React, { useContext, useState } from "react"; import { TaskContext } from "../context/TaskContext"; -function TaskList({query}) { - const [tasks, setTasks] = useState([]); - const filteredTasks = tasks.filter(task => +function TaskList({ query }) { + const { tasks, toggleComplete } = useContext(TaskContext); + + const filteredTasks = tasks.filter(task => task.title.toLowerCase().includes(query.toLowerCase()) ); @@ -14,7 +15,7 @@ function TaskList({query}) { {task.title} - From 7e24352b03b507e2446858520e84353c85ccbaf8 Mon Sep 17 00:00:00 2001 From: Bildad Ochieng Masaga Date: Fri, 6 Feb 2026 01:34:06 +0300 Subject: [PATCH 3/7] wrapped App in context --- src/main.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/main.jsx b/src/main.jsx index cb48fb7..5f73088 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -4,7 +4,7 @@ import './index.css' import App from './components/App.jsx' import { TaskProvider } from './context/TaskContext.jsx' createRoot(document.getElementById('root')).render( - - - , + + + , ) From ced2533c7b67366747e5a7efe09fcc5fa4cae483 Mon Sep 17 00:00:00 2001 From: Bildad Ochieng Masaga Date: Fri, 6 Feb 2026 01:34:39 +0300 Subject: [PATCH 4/7] implemented useRef --- src/components/SearchBar.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx index ef44c20..cf17a96 100644 --- a/src/components/SearchBar.jsx +++ b/src/components/SearchBar.jsx @@ -1,24 +1,28 @@ -import React, { useRef, useState, useContext } from "react"; +import React, { useRef, useState, useContext, useEffect } from "react"; import TaskList from "./TaskList"; import { TaskContext } from "../context/TaskContext"; function SearchBar() { const [query, setQuery] = useState(""); - + const searchRef = useRef(null); function handleSearch(e) { setQuery(e.target.value); } + useEffect(() => { + searchRef.current.focus(); + }, []); return (
- +
); } From 08bee65a9fd60126d489ff1e6fc45c13f7ab399f Mon Sep 17 00:00:00 2001 From: Bildad Ochieng Masaga Date: Fri, 6 Feb 2026 01:35:04 +0300 Subject: [PATCH 5/7] added packages to run the site --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index d365b3d..52e8957 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "technical-lesson-react-hooks-task-manager", + "name": "react-hooks-task-manager-lab", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "technical-lesson-react-hooks-task-manager", + "name": "react-hooks-task-manager-lab", "version": "0.0.0", "dependencies": { "@vitejs/plugin-react": "^4.3.4", From 208106dbee63e7ef5eaf6e89159283b275dd7eae Mon Sep 17 00:00:00 2001 From: Bildad Ochieng Masaga Date: Fri, 6 Feb 2026 01:35:17 +0300 Subject: [PATCH 6/7] added a task in the list --- db.json | 60 ++++++++++++++++++++++++++++++--------------------------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/db.json b/db.json index b7b09cf..7eab90a 100644 --- a/db.json +++ b/db.json @@ -1,30 +1,34 @@ { - "tasks": - [ - { - "id": 1, - "title": "Buy groceries", - "completed": false - }, - { - "id": 2, - "title": "Finish React project", - "completed": false - }, - { - "id": 3, - "title": "Call the bank", - "completed": true - }, - { - "id": 4, - "title": "Walk the dog", - "completed": false - }, - { - "id": 5, - "title": "Read a book", - "completed": true - } - ] + "tasks": [ + { + "id": "1", + "title": "Buy groceries", + "completed": false + }, + { + "id": "2", + "title": "Finish React project", + "completed": false + }, + { + "id": "3", + "title": "Call the bank", + "completed": false + }, + { + "id": "4", + "title": "Walk the dog", + "completed": false + }, + { + "id": "5", + "title": "Read a book", + "completed": false + }, + { + "id": "0526", + "title": "Exercise", + "completed": false + } + ] } \ No newline at end of file From fd5f955b466dfc8ea31e52b83f70d94741156099 Mon Sep 17 00:00:00 2001 From: Bildad Ochieng Masaga Date: Fri, 6 Feb 2026 01:44:59 +0300 Subject: [PATCH 7/7] fixed syntax errors --- src/components/App.jsx | 2 +- src/components/TaskForm.jsx | 2 +- src/context/TaskContext.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index 1068f28..48693a5 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -11,7 +11,7 @@ function App() { .then(r => r.json()) .then(data => setTasks(data)) - }, []); + }, [setTasks]); return (
diff --git a/src/components/TaskForm.jsx b/src/components/TaskForm.jsx index eb0d0e6..0d54216 100644 --- a/src/components/TaskForm.jsx +++ b/src/components/TaskForm.jsx @@ -3,7 +3,7 @@ import { TaskContext } from "../context/TaskContext"; function TaskForm() { const [taskName, setTaskName] = useState(""); - const inputId = useId(null); + const inputId = useId(); const { addTask } = useContext(TaskContext); function handleSubmit(e) { diff --git a/src/context/TaskContext.jsx b/src/context/TaskContext.jsx index 7682a54..c7ac048 100644 --- a/src/context/TaskContext.jsx +++ b/src/context/TaskContext.jsx @@ -13,7 +13,7 @@ export function TaskProvider({ children }) { }) .then(r => r.json()) .then(updatedTask => { - setTasks(prev => prev.map(task => (task.id == id ? updatedTask : task))) + setTasks(prev => prev.map(task => (task.id === id ? updatedTask : task))) }); }