Presupuestador_web/client/src/app/quotes/create.tsx

import {
  BackHistoryButton,
  FormDatePickerField,
  FormTextAreaField,
  FormTextField,
  LoadingOverlay,
} from "@/components";
import { t } from "i18next";

import { SubmitButton } from "@/components";
import { useUnsavedChangesNotifier } from "@/lib/hooks";
import { Button, Form } from "@/ui";
import { joiResolver } from "@hookform/resolvers/joi";
import { ICreateQuote_Request_DTO } from "@shared/contexts";
import Joi from "joi";
import { useMemo } from "react";
import { SubmitHandler, useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import { useQuotes } from "./hooks";

interface QuoteDataForm extends ICreateQuote_Request_DTO {}

export const QuoteCreate = () => {
  const navigate = useNavigate();
  const { useCreate } = useQuotes();
  const { mutate, isPending } = useCreate();

  const defaultValues = useMemo(
    () => ({
      date: new Date(Date.now()).toUTCString(),
      customer_information: "",
      reference: "",
    }),
    []
  );

  const form = useForm<QuoteDataForm>({
    mode: "onBlur",
    defaultValues,
    resolver: joiResolver(
      Joi.object({
        reference: Joi.string().required(),
        date: Joi.string().required(),
        customer_information: Joi.string().required(),
      }),
      {
        //messages: SpanishJoiMessages,
      }
    ),
  });

  const { formState, reset, getValues, handleSubmit } = form;
  const { isSubmitting, isDirty } = formState;

  useUnsavedChangesNotifier({
    isDirty,
  });

  const onSubmit: SubmitHandler<QuoteDataForm> = async (formData) => {
    try {
      mutate(formData, {
        onError: (error) => {
          console.debug(error);
          toast.error(error.message);
        },
        onSuccess: (data) => {
          reset(getValues());
          toast.success("Cotización guardada");
          navigate(`/quotes/edit/${data.id}`, { relative: "path", replace: true });
        },
      });
    } finally {
      //setLoading(false);
    }
  };

  if (isSubmitting) {
    return <LoadingOverlay title='Guardando ajustes' />;
  }

  /*if (isError) {
    return <ErrorOverlay errorMessage={mutateError?.message} />;
  }*/

  if (isPending) {
    return <LoadingOverlay />;
  }

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className='mx-auto grid max-w-[90rem] flex-1 auto-rows-max gap-6'>
          <div className='flex items-center gap-4'>
            <BackHistoryButton />
            <h1 className='flex-1 text-xl font-semibold tracking-tight shrink-0 whitespace-nowrap sm:grow-0'>
              {t("quotes.create.title")}
            </h1>
          </div>

          <div className='grid w-6/12 gap-6 mx-auto'>
            <FormTextField
              className='row-span-2'
              name='reference'
              required
              label={t("quotes.form_fields.reference.label")}
              description={t("quotes.form_fields.reference.desc")}
              placeholder={t("quotes.form_fields.reference.placeholder")}
            />

            <FormDatePickerField
              required
              label={t("quotes.form_fields.date.label")}
              description={t("quotes.form_fields.date.desc")}
              placeholder={t("quotes.form_fields.date.placeholder")}
              name='date'
            />

            <FormTextAreaField
              rows={4}
              className='row-span-2'
              name='customer_information'
              required
              label={t("quotes.form_fields.customer_information.label")}
              description={t("quotes.form_fields.customer_information.desc")}
              placeholder={t("quotes.form_fields.customer_information.placeholder")}
            />

            <div className='flex items-center justify-around gap-2'>
              <Button size='sm' variant={"outline"} onClick={() => navigate("/quotes")}>
                {t("common.discard")}
              </Button>

              <SubmitButton size='sm' label={t("common.continue")}></SubmitButton>
            </div>
          </div>
        </div>
      </form>
    </Form>
  );
};