Completed State Events Mini Project

src/components/App.js

@@ -1,21 +1,37 @@
-import React from "react";
+import React, { useState } from "react";
 import CategoryFilter from "./CategoryFilter";
 import NewTaskForm from "./NewTaskForm";
 import TaskList from "./TaskList";
 
 import { CATEGORIES, TASKS } from "../data";
-console.log("Here's the data you're working with");
-console.log({ CATEGORIES, TASKS });
 
 function App() {
+  const [allTasks, setAllTasks] = useState(TASKS)
+
+  function onTaskFormSubmit(addTask) {
+    const updatedTasks = [...allTasks, addTask]
+    setAllTasks(updatedTasks)
+  }
+
   return (
     <div className="App">
       <h2>My tasks</h2>
-      <CategoryFilter />
-      <NewTaskForm />
-      <TaskList />
+      <CategoryFilter
+        categories={CATEGORIES}
+        TASKS={TASKS}
+        allTasks={allTasks}
+        setAllTasks={setAllTasks}
+      />
+      <NewTaskForm
+        categories={CATEGORIES}
+        onTaskFormSubmit={onTaskFormSubmit}
+      />
+      <TaskList
+        tasks={allTasks}
+        setAllTasks={setAllTasks}
+      />
     </div>
-  );
+  )
 }
 
 export default App;

src/components/CategoryFilter.js

@@ -1,12 +1,37 @@
-import React from "react";
+import React, { useState } from "react";
+
+function CategoryFilter({ categories, TASKS, setAllTasks }) {
+  const [selectedCategory, setSelectedCategory] = useState("All")
+
+  const handleCategoryClick = (category) => {
+    setSelectedCategory(category)
+    if (category === "All") {
+      setAllTasks(TASKS)
+    } else {
+      const filteredTasks = TASKS.filter((task) => task.category === category)
+      setAllTasks(filteredTasks)
+    }
+  }
+
+  const createButtons = categories.map((category) => {
+    const isSelected = selectedCategory === category
+    return (
+      <button
+        onClick={() => handleCategoryClick(category)}
+        className={isSelected ? "selected" : ""}
+        key={category}
+      >
+        {category}
+      </button>
+    )
+  })
 
-function CategoryFilter() {
   return (
     <div className="categories">
       <h5>Category filters</h5>
-      {/* render <button> elements for each category here */}
+      {createButtons}
     </div>
-  );
+  )
 }
 
 export default CategoryFilter;

src/components/NewTaskForm.js

@@ -1,21 +1,56 @@
-import React from "react";
+import React, { useState } from "react";
+
+function NewTaskForm({ categories, onTaskFormSubmit }) {
+  const [newTask, setNewTask] = useState('')
+  const [newTaskCat, setNewTaskCat] = useState('Code')
+
+  function handleTaskChange(event) {
+    setNewTask(event.target.value)
+  }
+
+  function handleCatChange(event) {
+    setNewTaskCat(event.target.value)
+  }
+
+  const filteredOptions = categories.filter(category => category !== 'All')
+  const createOptions = filteredOptions.map((category) => {
+      return (
+        <option key={category}>{category}</option>
+      )
+  })
+
+  function handleSubmit(event) {
+    event.preventDefault()
+
+    const addTask = {
+      text: newTask,
+      category: newTaskCat
+    }
+    onTaskFormSubmit(addTask)
+    setNewTask('')
+    setNewTaskCat('Code')
+  }
 
-function NewTaskForm() {
   return (
-    <form className="new-task-form">
+    <form onSubmit={handleSubmit} className="new-task-form">
       <label>
         Details
-        <input type="text" name="text" />
+        <input
+          type="text"
+          name="text"
+          value={newTask}
+          onChange={handleTaskChange}
+        />
       </label>
       <label>
         Category
-        <select name="category">
-          {/* render <option> elements for each category here */}
+        <select onChange={handleCatChange} name="category">
+          {createOptions}
         </select>
       </label>
       <input type="submit" value="Add task" />
     </form>
-  );
+  )
 }
 
 export default NewTaskForm;

src/components/Task.js

@@ -1,11 +1,11 @@
 import React from "react";
 
-function Task() {
+function Task({ text, category, handleDelete }) {
   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 onClick={handleDelete} className="delete">X</button>
     </div>
   );
 }

src/components/TaskList.js

@@ -1,11 +1,26 @@
 import React from "react";
+import Task from "./Task";
+
+function TaskList({ tasks, setAllTasks }) {
+  function handleDelete(taskToDelete) {
+    const updatedTasks = tasks.filter(task => task.text !== taskToDelete.text)
+    setAllTasks(updatedTasks)
+  }
+
+  const displayAllTasks = tasks.map((task, index) => {
+    return <Task
+    key={index}
+    text={task.text}
+    category={task.category}
+    handleDelete={() => handleDelete(task)}
+  />
+  })
 
-function TaskList() {
   return (
     <div className="tasks">
-      {/* display a list of tasks using Task component */}
+      {displayAllTasks}
     </div>
-  );
+  )
 }
 
 export default TaskList;