Real Project: Todo App

import { useEffect, useReducer } from "react";

const initialState = { todos: [], filter: "all" };

function reducer(state, action) {
  switch (action.type) {
    case "ADD": {
      const todo = { id: crypto.randomUUID(), text: action.text, done: false };
      return { ...state, todos: [...state.todos, todo] };
    }
    case "TOGGLE": {
      return {
        ...state,
        todos: state.todos.map((t) =>
          t.id === action.id ? { ...t, done: !t.done } : t
        ),
      };
    }
    case "REMOVE": {
      return { ...state, todos: state.todos.filter((t) => t.id !== action.id) };
    }
    case "FILTER": {
      return { ...state, filter: action.filter };
    }
    default:
      return state;
  }
}

const STORAGE_KEY = "todos";

function useTodos() {
  const [state, dispatch] = useReducer(reducer, initialState, () => {
    const stored = localStorage.getItem(STORAGE_KEY);
    return stored ? JSON.parse(stored) : initialState;
  });

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(state.todos));
  }, [state.todos]);

  return { state, dispatch };
}

import { useMemo, useState } from "react";
import { useTodos } from "./useTodos";

function TodoApp() {
  const { state, dispatch } = useTodos();
  const [text, setText] = useState("");

  // derived — filter অনুযায়ী list
  const visibleTodos = useMemo(() => {
    if (state.filter === "active") {
      return state.todos.filter((t) => !t.done);
    }
    if (state.filter === "completed") {
      return state.todos.filter((t) => t.done);
    }
    return state.todos;
  }, [state.todos, state.filter]);

  const addTodo = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    dispatch({ type: "ADD", text: text.trim() });
    setText("");
  };

  return (
    <div className="todo-app">
      <h1>Todo List</h1>

      <form onSubmit={addTodo}>
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="নতুন কাজ…"
        />
        <button type="submit">Add</button>
      </form>

      <div className="filters">
        {["all", "active", "completed"].map((f) => (
          <button
            key={f}
            className={state.filter === f ? "active" : ""}
            onClick={() => dispatch({ type: "FILTER", filter: f })}
          >
            {f}
          </button>
        ))}
      </div>

      <ul>
        {visibleTodos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => dispatch({ type: "TOGGLE", id: todo.id })}
            />
            <span className={todo.done ? "done" : ""}>{todo.text}</span>
            <button onClick={() => dispatch({ type: "REMOVE", id: todo.id })}>✕</button>
          </li>
        ))}
      </ul>

      <p>{visibleTodos.length}টি কাজ</p>
    </div>
  );
}

export default TodoApp;