edge-city

import { useState } from "react";
import { useForm } from "react-hook-form";
import { TextField, Input } from "react-aria-components";
import { cache, useMutation } from "edge-city/data";
import { updateTodo, deleteTodo } from "@/services/todos.service";
import "./Todo.css";

const Todo = ({ item }) => {
  const [editing, setEditing] = useState(false);
  const {
    register,
    handleSubmit,
    reset,
  } = useForm();
  const updateMutation = useMutation(async ({ text }) => {
    await updateTodo({ id: item.id, text, completed: item.completed });
    await cache.invalidate("todos", false);
    setEditing(false);
  });
  const deleteMutation = useMutation(async (id) => {
    await deleteTodo(id);
    await cache.invalidate("todos", false);
  });
  return (
    <li className="todo" style={{ opacity: deleteMutation.isMutating || updateMutation.isMutating ? 0.5 : 1 }}>
      {!editing && (
        <>
          <input type="checkbox" />
          <div className="text">
            <p>{item.text}</p>
            <p className="timestamp">{item.createdAt}</p>
          </div>
          <button className="edit-button" title="Edit" onClick={() => setEditing(true)}>
            ✏️
          </button>
          <button className="delete-button" title="Delete" onClick={() => deleteMutation.mutate(item.id)}>
            🗑️
          </button>
        </>
      )}
      {editing && (
        <form onSubmit={handleSubmit(updateMutation.mutate)}>
          <TextField isRequired isReadOnly={updateMutation.isMutating} isDisabled={updateMutation.isMutating}>
            <Input {...register("text")} defaultValue={item.text} />
            {/* {err?.text && <p>{err.text._errors[0]}</p>} */}
          </TextField>
          <button
            type="submit"
            className="edit-button"
            title="Save"
            disabled={updateMutation.isMutating}
          >
            💾
          </button>
          <button
            className="delete-button"
            title="Cancel"
            onClick={() => {
              reset({ text: item.text });
              setEditing(false);
            }}
            disabled={updateMutation.isMutating}
          >
            🚫
          </button>
        </form>
      )}
    </li>
  );
};

export default Todo;