Function BirthdayForm

components/BirthdayForm.tsx:4–92

()

import { Button } from "./Button";

export const BirthdayForm = () => {
  const [email, setEmail] = React.useState("");
  const [okToContact, setOkToContact] = React.useState(false);
  const [sendingState, setSendingState] = useState<
    "initial" | "sending" | "sent" | "failed"
  >("initial");

  const submit = () => {
    setSendingState("sending");
    fetch("/api/attend-birthday", {
      method: "POST",
      body: JSON.stringify({ email, okToContact }),
      headers: {
        "Content-Type": "application/json",
      },
    }).then(() => {
      setSendingState("sent");
      alert(
        "Thanks for RSVPing! We'll be in touch closer to the date. See you soon!"
      );
    });
  };

  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        submit();
      }}
    >
      <label>
        Your E-Mail Address
        <input
          value={email}
          onChange={e => setEmail(e.target.value)}
          type="email"
          placeholder="lea@artemov.de"
        />
      </label>
      <label className="inline">
        <input
          type="checkbox"
          checked={okToContact}
          onChange={() => setOkToContact(!okToContact)}
        />
        I'm OK to be contacted closer to the date with more details. I'm
        genuinely interested to come.
      </label>
      <Button
        disabled={
          sendingState !== "initial" ||
          !(
            okToContact &&
            /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)
          )
        }
      >
        {sendingState === "sent"