~repos /edge-city

import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { Helmet } from "react-helmet-async";
import { cache, useMutation } from "edge-city/data";
import { useForm } from "react-hook-form";
import { Button, TextField, Input } from "react-aria-components";
import Spinner from "@/components/Spinner/Spinner";
import TodoList from "./TodoList";
import { createTodo } from "@/services/todos.service";
import "./page.css";

export default function Page() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm();
  const { mutate, isMutating, err } = useMutation(async ({ text }) => {
    await createTodo({
      text,
      completed: false,
    });
    await cache.invalidate("todos");
    reset();
  });
  return (
    <div className="todos-page">
      <h1 className="title">Todo List</h1>
      <Helmet>
        <title>Todo List</title>
      </Helmet>
      <div className="container">
        <p className="subtitle">Share this page to collaborate with others.</p>
        <form onSubmit={handleSubmit(mutate)}>
          <TextField isRequired isReadOnly={isMutating} aria-label="add-todo">
            <Input id="text" aria-labelledby="text" aria-describedby="text" {...register("text")} placeholder="Add a todo item" />
            {err?.text && <p>{err.text._errors[0]}</p>}
          </TextField>
          <Button className="add-button" type="submit" isDisabled={isMutating}>
            Add
          </Button>
        </form>
        <ErrorBoundary onError={(err) => console.log("err", err)} fallback={<p>Oops something went wrong</p>}>
          <Suspense fallback={<Spinner />}>
            <TodoList isMutating={isMutating} />
          </Suspense>
        </ErrorBoundary>
      </div>
    </div>
  );
}