Bài 6: Thực hành với Todo List App

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

const [todos, setTodos] = useState<Todo[]>([]);

import { useState } from "react";

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

export default function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [input, setInput] = useState<string>("");
  
  // State cho việc sửa: lưu id của item đang sửa và nội dung sửa
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editText, setEditText] = useState<string>("");

  // Thêm
  const addTodo = () => {
    if (!input) return;
    setTodos([...todos, { id: Date.now(), text: input, completed: false }]);
    setInput("");
  };

  // Xóa
  const deleteTodo = (id: number) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  // Hoàn thành/chưa
  const completeTodo = (id: number) => {
    setTodos(
      todos.map((todo) => ({
        ...todo,
        completed: todo.id === id ? !todo.completed : todo.completed,
      }))
    );
  };

  // Bắt đầu sửa
  const startEdit = (id: number, text: string) => {
    setEditingId(id);
    setEditText(text);
  };

  // Lưu nội dung đã sửa
  const saveEdit = (id: number) => {
    setTodos(todos.map(todo => todo.id === id ? { ...todo, text: editText } : todo));
    setEditingId(null);
  };

  return (
    <div>
      {/* Form nhập liệu */}
      <form onSubmit={(e) => e.preventDefault()}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit" onClick={addTodo}>
          Thêm
        </button>
      </form>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {editingId === todo.id ? (
              // Nếu đang ở chế độ sửa thì hiện ô input và nút Lưu
              <>
                <input
                  value={editText}
                  onChange={(e) => setEditText(e.target.value)}
                />
                <button onClick={() => saveEdit(todo.id)}>Lưu</button>
              </>
            ) : (
              // Nếu không thì hiện text bình thường kèm nút Sửa và Xóa
              <>
                <span onClick={() => /* logic toggle ở đây */ null}>
                  {" "}
                  {todo.text}{" "}
                </span>
                <button onClick={() => startEdit(todo.id, todo.text)}>
                  Sửa
                </button>
                <button onClick={() => deleteTodo(todo.id)}>Xóa</button>
                <input
                  type="checkbox"
                  checked={todo.completed}
                  onChange={() => completeTodo(todo.id)}
                />
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Hàm này tách riêng, có thể unit test dễ 
const loadTodos = (): Todo[] => {
  try {
    const savedTodos = localStorage.getItem("my-todos");
    return savedTodos ? JSON.parse(savedTodos) : [];
  } catch (error) {
    console.error("Lỗi đọc LocalStorage:", error);
    return [];
  }
};

export default function TodoList() {
  // Gọi hàm này vào trong useState để lấy dữ liệu lúc khởi tạo
  const [todos, setTodos] = useState<Todo[]>(loadTodos);

  // useEffect lưu dữ liệu mỗi khi state 'todos'
  useEffect(() => {
    localStorage.setItem("my-todos", JSON.stringify(todos));
  }, [todos]);

  // ... các hàm khác
}

import { createContext, useState, ReactNode, useEffect } from "react";

type Todo = { id: number; text: string; completed: boolean };

// Tạo context
export const TodoContext = createContext<{
  todos: Todo[];
  setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;
} | null>(null);

// loadTodos()

// Context Provider để bọc component và cung cấp các state, hàm
export const TodoProvider = ({ children }: { children: ReactNode }) => {
  const [todos, setTodos] = useState<Todo[]>(loadTodos); // hàm loadTodos như bước trước

  useEffect(() => {
    localStorage.setItem("my-todos", JSON.stringify(todos));
  }, [todos]);

  return (
    <TodoContext.Provider value={{ todos, setTodos }}>
      {/* Các component bên trong này sẽ sử dụng được các giá trị: todos,
      setTodos */}
      {children}
    </TodoContext.Provider>
  );
};

import { TodoProvider } from "./TodoContext";
import TodoList from "./TodoList";

function App() {
  return (
    <TodoProvider>
      <TodoList />
    </TodoProvider>
  );
}

import { useContext, useState } from "react";
import { TodoContext } from "./TodoContext";

function TodoList() {
  const context = useContext(TodoContext);
  if (!context) return null; // Xử lý trường hợp lỗi do quên bọc Provider
  
  const { todos, setTodos } = context; // Trích xuát các giá trị của context cung cấp
  const [input, setInput] = useState("");

  const addTodo = () => {
    if (!input) return;
    setTodos([...todos, { id: Date.now(), text: input, completed: false }]);
    setInput("");
  };

  // ... các hàm khác ...
  
  return (
    <div>
      <form onSubmit={(e) => e.preventDefault()}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit" onClick={addTodo}>
          Thêm
        </button>
      </form>
      {/* Hiển thị danh sách todos lấy từ context, code không đổi */}
    </div>
  );
}

import { useContext } from "react";
import { TodoContext } from "./TodoContext";

export default function Header() {
  const context = useContext(TodoContext);
  if (!context) return null; // Tránh lỗi nếu Header chưa được bọc bằng context

  const { todos } = context;
  const total = todos.length; // Đếm tổng số lượng công việc
  const completed = todos.filter((t) => t.completed).length; // Đếm tổng số công việc đã hoàn thành

  return (
    <header
      style={{
        padding: 16,
        marginBottom: 16,
        background: "#eeeeee",
      }}
    >
      <h1>Todo App</h1>
      <p>
        Tổng: {total} | Đã xong: {completed}
      </p>
    </header>
  );
}

import TodoList from "./TodoList";
import { TodoProvider } from "./TodoContext";
import Header from "./Header";

export default function App() {
  return (
    <TodoProvider>
      <Header />
      <TodoList />
    </TodoProvider>
  );
}