done

src/__tests__/NewTaskForm.test.js

@@ -1,49 +1,46 @@
 import "@testing-library/jest-dom";
 import { render, screen, fireEvent } from "@testing-library/react";
-import NewTaskForm from "../components/NewTaskForm";
-import { CATEGORIES } from "../data";
+import CategoryFilter from "../components/CategoryFilter";
 import App from "../components/App";
+import { CATEGORIES } from "../data";
 
-test("calls the onTaskFormSubmit callback prop when the form is submitted", () => {
-  const onTaskFormSubmit = jest.fn();
-  render(
-    <NewTaskForm categories={CATEGORIES} onTaskFormSubmit={onTaskFormSubmit} />
-  );
+test("displays a button for each category", () => {
+  render(<CategoryFilter categories={CATEGORIES} />);
+  for (const category of CATEGORIES) {
+    expect(screen.queryByText(category)).toBeInTheDocument();
+  }
+});
 
-  fireEvent.change(screen.queryByLabelText(/Details/), {
-    target: { value: "Pass the tests" },
-  });
+test("clicking the category button adds a class of 'selected' to the button", () => {
+  render(<App />);
 
-  fireEvent.change(screen.queryByLabelText(/Category/), {
-    target: { value: "Code" },
-  });
+  const codeButton = screen.queryByRole("button", { name: "Code" });
+  const allButton = screen.queryByRole("button", { name: "All" });
 
-  fireEvent.submit(screen.queryByText(/Add task/));
+  fireEvent.click(codeButton);
 
-  expect(onTaskFormSubmit).toHaveBeenCalledWith(
-    expect.objectContaining({
-      text: "Pass the tests",
-      category: "Code",
-    })
-  );
+  expect(codeButton.classList).toContain("selected");
+  expect(allButton.classList).not.toContain("selected");
 });
 
-test("adds a new item to the list when the form is submitted", () => {
+test("clicking the category button filters the task list", () => {
   render(<App />);
 
-  const codeCount = screen.queryAllByText(/Code/).length;
+  const codeButton = screen.queryByRole("button", { name: "Code" });
 
-  fireEvent.change(screen.queryByLabelText(/Details/), {
-    target: { value: "Pass the tests" },
-  });
+  fireEvent.click(codeButton);
 
-  fireEvent.change(screen.queryByLabelText(/Category/), {
-    target: { value: "Code" },
-  });
+  expect(screen.queryByText("Build a todo app")).toBeInTheDocument();
+  expect(screen.queryByText("Buy rice")).not.toBeInTheDocument();
+});
+
+test("displays all tasks when the 'All' button is clicked", () => {
+  render(<App />);
 
-  fireEvent.submit(screen.queryByText(/Add task/));
+  const allButton = screen.queryByRole("button", { name: "All" });
 
-  expect(screen.queryByText(/Pass the tests/)).toBeInTheDocument();
+  fireEvent.click(allButton);
 
-  expect(screen.queryAllByText(/Code/).length).toBe(codeCount + 1);
+  expect(screen.queryByText("Build a todo app")).toBeInTheDocument();
+  expect(screen.queryByText("Buy rice")).toBeInTheDocument();
 });

src/components/App.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import CategoryFilter from "./CategoryFilter";
 import NewTaskForm from "./NewTaskForm";
 import TaskList from "./TaskList";
@@ -8,14 +8,36 @@ console.log("Here's the data you're working with");
 console.log({ CATEGORIES, TASKS });
 
 function App() {
+  const [tasks, setTask] = useState(TASKS)
+  const [category, setCategory] = useState("All")
+
+  function handleDeleteTask(deletedTask) {
+    const newTaskList = tasks.filter((task) => {
+      return task.text !== deletedTask
+    })
+    setTask(newTaskList)
+  }
+
+  function handleAddTask(newTask) {
+    setTask([...tasks, newTask])
+  }
+
+  const displayTaskList = tasks.filter((task) => {
+    if (category === "All") {
+      return true
+    } else {
+      return task.category === category
+    }
+  })
+
   return (
     <div className="App">
       <h2>My tasks</h2>
-      <CategoryFilter />
-      <NewTaskForm />
-      <TaskList />
+      <CategoryFilter categories={CATEGORIES} Scategory={category} onCategoryClick={setCategory} />
+      <NewTaskForm categories={CATEGORIES} onTaskFormSubmit={handleAddTask} />
+      <TaskList tasks={displayTaskList} onDeleteTask={handleDeleteTask} />
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/CategoryFilter.js

@@ -1,10 +1,16 @@
 import React from "react";
 
-function CategoryFilter() {
+function CategoryFilter({categories,Scategory, onCategoryClick}) {
+
+  const categoryButtons = categories.map((category)=>{
+    const categoryClass = category===Scategory ? "selected" : ""
+    return <button key={category} className={categoryClass} onClick={()=> onCategoryClick(category)}>{category}</button>
+  })
+
   return (
     <div className="categories">
       <h5>Category filters</h5>
-      {/* render <button> elements for each category here */}
+      {categoryButtons}
     </div>
   );
 }

src/components/NewTaskForm.js

@@ -1,16 +1,36 @@
-import React from "react";
+import React, { useState } from "react";
 
-function NewTaskForm() {
+function NewTaskForm({categories,onTaskFormSubmit}) {
+  const [newTask,setNewTask] = useState({
+    text:"",
+    category:"Code"
+  })
+
+  const newCat = categories.filter((category)=> category!=="All")
+  const catOptions = newCat.map((category)=>{
+    return <option key={category} value={category}>{category}</option>
+  })
+
+  function handleChange(evt){
+    setNewTask({
+      ...newTask,
+      [evt.target.name]: evt.target.value
+    })
+  }
+  function handleSubmit(evt){
+    evt.preventDefault()
+    onTaskFormSubmit(newTask)
+  }
   return (
-    <form className="new-task-form">
+    <form className="new-task-form" onSubmit={handleSubmit}>
       <label>
         Details
-        <input type="text" name="text" />
+        <input type="text" name="text" onChange={handleChange}/>
       </label>
       <label>
         Category
-        <select name="category">
-          {/* render <option> elements for each category here */}
+        <select name="category" onChange={handleChange}>
+          {catOptions}
         </select>
       </label>
       <input type="submit" value="Add task" />

src/components/Task.js

@@ -1,11 +1,15 @@
 import React from "react";
 
-function Task() {
+function Task({category, text, onDeleteTask}) {
+  function handleDelete(){
+    onDeleteTask(text)
+  }
+
   return (
     <div className="task">
-      <div className="label">CATEGORY HERE</div>
-      <div className="text">TEXT HERE</div>
-      <button className="delete">X</button>
+      <div className="label">{category}</div>
+      <div className="text">{text}</div>
+      <button className="delete" onClick={handleDelete}>X</button>
     </div>
   );
 }

src/components/TaskList.js

@@ -1,9 +1,15 @@
 import React from "react";
+import Task from "./Task";
+
+function TaskList({tasks, onDeleteTask}) {
+
+  const displayTask = tasks.map((task)=>{
+    return <Task key={task.text} text={task.text} category={task.category} onDeleteTask={onDeleteTask} />
+  })
 
-function TaskList() {
   return (
     <div className="tasks">
-      {/* display a list of tasks using Task component */}
+      {displayTask}
     </div>
   );
 }