Overview

Refactor the existing ToDo app by moving all task-related logic into a custom hook useTodo, and persist tasks in localStorage through a separate useLocalStorage hook.

Requirements

• Move the current ToDo logic (state, handlers, etc.) into a custom hook called useTodo.
• Implement a useLocalStorage hook responsible for synchronizing the ToDo list with localStorage.
• The ToDo list must:
  • Load saved tasks from localStorage on mount.
  • Save updated tasks to localStorage whenever the list changes.
• The useTodo hook should expose:
  • The list of tasks.
  • Functions to:
    • Add a task when submitting the form.
    • Delete a task.
    • Toggle a task's completion status, applying a line-through style when completed.
    • Clear completed tasks.
• Show the "Clear complete" button only when there is at least one completed task.

Notes

• The main goal is to separate responsibilities:
  • useTodo handles app logic.
  • useLocalStorage handles persistence.
• The starter app is already functional: add, toggle, delete and clear all work in App.tsx, so the behavior tests already pass. The tests verify behavior, not implementation — they don't care whether the logic lives in App or in a custom hook.
• The real objective is the refactor: extract all task logic into useTodo and move persistence into useLocalStorage without changing the UI. The persistence test (06) is the only one failing with the starter — it passes once tasks are saved to and loaded from localStorage.
• A natural API for useTodo is to return the list, a derived hasCompleted flag, and the handlers the UI needs:
  The exact names are up to you — the tests only check behavior.
• Keep your hooks pure and reusable — avoid ToDo-specific logic in useLocalStorage.
• When initializing state from localStorage, remember to handle missing or malformed data safely.
• The UI code should not change beyond using useTodo instead of local state.
• How you manage the input is up to you:
  • Controlled: store the input value in state and expose it (value + setter) from useTodo.
  • Uncontrolled: read the value from the form on submit (e.g. FormData) and reset the form. The reference solution does this, so useTodo doesn't expose an input setter.

Tests

1. adds a task when submitting the form
2. toggles task completion and apply line-through when checkbox is clicked
3. deletes a task when delete button is clicked
4. shows only 'Clear complete' button when there is at least one completed task
5. clears completed tasks when 'Clear complete' is clicked
6. persists tasks in localStorage across mounts