react-component-form/example/components/FormExample.tsx

"use client"

import { Form, useForm } from "react-component-form"
import type { HandleUseFormCallback } from "react-component-form"
import useTranslation from "next-translate/useTranslation"

import { Input } from "./design/Input"
import { Button } from "./design/Button"
import { useFormTranslation } from "../hooks/useFormTranslation"
import { userSchema } from "../models/User"
import { FormState } from "./design/FormState"

const fakeServerRequest = async (ms: number): Promise<void> => {
  return await new Promise((resolve) => {
    setTimeout(resolve, ms)
  })
}

export const FormExample: React.FC = () => {
  const { handleUseForm, errors, fetchState, message } = useForm(userSchema)
  const { getFirstErrorTranslation } = useFormTranslation()
  const { t } = useTranslation()

  const onSubmit: HandleUseFormCallback<typeof userSchema> = async (
    formData,
    formElement,
  ) => {
    await fakeServerRequest(2_000)
    console.log("onSubmit:", formData)
    formElement.reset()
    return {
      type: "success",
      message: "common:success-message",
    }
  }

  return (
    <section>
      <Form
        className="mt-6 w-[90%] max-w-xs"
        noValidate
        onSubmit={handleUseForm(onSubmit)}
      >
        <Input
          type="text"
          placeholder={t("common:name")}
          name="name"
          label={t("common:name")}
          error={getFirstErrorTranslation(errors.name)}
        />

        <Input
          type="text"
          placeholder="Email"
          name="email"
          label="Email"
          error={getFirstErrorTranslation(errors.email)}
        />

        <Button className="mt-6 w-full" type="submit" data-cy="submit">
          Submit
        </Button>
      </Form>

      <FormState
        id="message"
        state={fetchState}
        message={message != null ? t(message) : undefined}
      />
    </section>
  )
}