Filters, summary, ship it

function FilterBar({ filter, onFilterChange }) {
  return (
    <div>
      {["all", "active", "done"].map(f => (
        <button
          key={f}
          disabled={f === filter}
          onClick={() => onFilterChange(f)}
        >
          {f}
        </button>
      ))}
    </div>
  );
}

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;

  function handleAdd(e) {
    e.preventDefault();
    if (text.trim() === "") return;
    setTasks(ts => [...ts, { id: Date.now(), title: text.trim(), done: false }]);
    setText("");
  }

  return (
    <div>
      <h1>Tasks</h1>
      <form onSubmit={handleAdd}>
        <input value={text} onChange={e => setText(e.target.value)} />
        <button>Add</button>
      </form>
      <FilterBar filter={filter} onFilterChange={setFilter} />
      <TaskList tasks={visible}
                onToggle={id => setTasks(ts => toggleTask(ts, id))}
                onDelete={id => setTasks(ts => deleteTask(ts, id))} />
      <p>{left === 0 ? "All done!" : left + " task(s) left"}</p>
    </div>
  );
}