Designing the task tracker

Designing the task tracker

We finish the course by building a complete task tracker, the app you have been circling since unit 2. Features:

• add a task by typing and submitting a form
• toggle a task done or not done
• delete a task
• filter buttons: All, Active, Done
• a remaining-count summary

Step 1, the hierarchy:

TaskApp
├── NewTaskForm    (controlled input + submit)
├── FilterBar      (All / Active / Done buttons)
├── TaskList       (the visible tasks)
│   └── TaskItem   (checkbox, title, delete button)
└── Summary        ("2 task(s) left")

Step 3, minimal state. Candidates: the tasks, the filter choice, the input text, the visible tasks, the remaining count. Apply the tests from lesson 8-3:

• tasks: changes, not computable → state
• filter: changes, not computable → state
• text (the input draft): changes, not computable → state (controlled input, lesson 6-1)
• visible tasks → derived from tasks + filter
• remaining count → derived from tasks (lesson 8-2)

Step 4, placement. Every consumer meets at TaskApp, so all three pieces of state live there.

The skeleton

function TaskApp() {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState("all");
  const [text, setText] = useState("");

  const visible = visibleTasks(tasks, filter);
  const left = tasks.filter(t => !t.done).length;

  return (
    <div>
      <h1>Tasks</h1>
      <NewTaskForm text={text} onTextChange={setText} onAdd={handleAdd} />
      <FilterBar filter={filter} onFilterChange={setFilter} />
      <TaskList tasks={visible} onToggle={handleToggle} onDelete={handleDelete} />
      <Summary tasks={tasks} />
    </div>
  );
}

Each task is an object: { id: 1, title: "Water plants", done: false }, the shape from lesson 5-1, with id serving as the key from lesson 5-2. Data flows down as props, changes flow up through onAdd, onToggle, onDelete, onFilterChange, and onTextChange, the lifted-state pattern from lesson 8-1. The handlers are what we build next.