Como usar useSendData

Guía para usar el hook useSendData.

Formularios

Ejemplo de useSendData en formularios.

ejemplo.tsx

import { FC, useState } from "react";
import Button from "@components/Button";
import { useSendData } from "@hooks/useSendData";

const CapturarOyL: FC = () => {
  const [body, setBody] = useState<{
    fecha?: string;
    idEmpleado?: number;
    idEstacionServicio?: string;
    idTurno?: string;
    isla?: string;
    evaluaciones: { cumple: 1 | 0; idcumplimiento: number }[];
  }>({ evaluaciones: [] });

  const send = useSendData("ordenLimpieza", {
    method: "post",
    refetchFn: () => {
      setBody({ evaluaciones: [] });
    },
  });

  return (
    <div className="w-full">
      <form
        onSubmit={(ev) => {
          ev.preventDefault();
          send.mutate(body);
        }}
      >
        {/* ... */}
        <div className="mt-4">
          <Button
            buttonType="submit"
            text="Enviar"
            block
            isPending={send.isPending}
          />
        </div>
      </form>
    </div>
  );
};
export default CapturarOyL;

Al dar click en el componente Button de tipo submit, se llama al evento onSubmit del formulario, que a su vez llama a la variable send que contiene la propiedad mutate(), la cual recibe los datos almacenados en body y los envia a la petición. De ser correcto se llama a refetchFn que limpia la variable de estado.