使用 Neon Postgres 的 Todo 应用

"use client";
import { ChangeEvent, FC, useState } from "react";
import { todoType } from "@/types/todoType";

interface Props {
  todo: todoType;
  changeTodoText: (id: number, text: string) => void;
  toggleIsTodoDone: (id: number, done: boolean) => void;
  deleteTodoItem: (id: number) => void;
}

const Todo: FC<Props> = ({
  todo,
  changeTodoText,
  toggleIsTodoDone,
  deleteTodoItem,
}) => {
  // 处理编辑模式的状态
  const [editing, setEditing] = useState(false);

  // 处理文本输入的状态
  const [text, setText] = useState(todo.text);

  // 处理完成状态的状态
  const [isDone, setIsDone] = useState(todo.done);

  // 文本输入变化的事件处理
  const handleTextChange = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  // 切换完成状态的事件处理
  const handleIsDone = async () => {
    toggleIsTodoDone(todo.id, !isDone);
    setIsDone((prev) => !prev);
  };

  // 启动编辑模式的事件处理
  const handleEdit = () => {
    setEditing(true);
  };

  // 保存编辑文本的事件处理
  const handleSave = async () => {
    changeTodoText(todo.id, text);
    setEditing(false);
  };

  // 取消编辑模式的事件处理
  const handleCancel = () => {
    setEditing(false);
    setText(todo.text);
  };

  // 删除 todo 项目的事件处理
  const handleDelete = () => {
    if (confirm("你确定要删除这个 todo 吗？")) {
      deleteTodoItem(todo.id);
    }
  };

  // 渲染 Todo 组件
  return (
    <div className="flex items-center gap-2 p-4 border-gray-200 border-solid border rounded-lg">
      {/* 用于标记 todo 为完成的复选框 */}
      <input
        type="checkbox"
        className="text-blue-200 rounded-sm h-4 w-4"
        checked={isDone}
        onChange={handleIsDone}
      />
      {/* todo 文本的输入字段 */}
      <input
        type="text"
        value={text}
        onChange={handleTextChange}
        readOnly={!editing}
        className={`${
          todo.done ? "line-through" : ""
        } outline-none read-only:border-transparent focus:border border-gray-200 rounded px-2 py-1 w-full`}
      />
      {/* 编辑、保存、取消和删除的操作按钮 */}
      <div className="flex gap-1 ml-auto">
        {editing ? (
          <button
            onClick={handleSave}
            className="bg-green-600 text-green-50 rounded px-2 w-14 py-1"
          >
            保存
          </button>
        ) : (
          <button
            onClick={handleEdit}
            className="bg-blue-400 text-blue-50 rounded w-14 px-2 py-1"
          >
            编辑
          </button>
        )}
        {editing ? (
          <button
            onClick={handleCancel}
            className="bg-red-400 w-16 text-red-50 rounded px-2 py-1"
          >
            关闭
          </button>
        ) : (
          <button
            onClick={handleDelete}
            className="bg-red-400 w-16 text-red-50 rounded px-2 py-1"
          >
            删除
          </button>
        )}
      </div>
    </div>
  );
};

export default Todo;