Form submission

"use client";
import {useRef, useState} from "react";
import {Alert, Button, Field, Input, Stack} from "@flood-md/react";

export function ProjectForm({save}: {save: (data: FormData) => Promise<void>}) {
  const locked = useRef(false);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState("");
  const [saved, setSaved] = useState(false);
  return <form onSubmit={async event => {
    event.preventDefault();
    if (locked.current) return;
    const data = new FormData(event.currentTarget);
    locked.current = true;
    setPending(true); setError(""); setSaved(false);
    try { await save(data); setSaved(true); }
    catch { setError("Could not save. Your changes are still here. Try again."); }
    finally { locked.current = false; setPending(false); }
  }} aria-busy={pending}>
    <Stack gap="4">
      <Field label="Project name">{props => <Input {...props} name="name" required readOnly={pending} />}</Field>
      {error && <Alert tone="error" announcement="assertive">{error}</Alert>}
      {saved && <Alert tone="success" announcement="polite">Project saved.</Alert>}
      <Button type="submit" loading={pending}>Save project</Button>
    </Stack>
  </form>;
}