Se crea el custom hook que guarda la lógica de validación y la que realiza la... (8a8a1cad) · Commits · Omar Luna / PueblosMagicosConIA

web/src/hooks/usePlaceRegister.tsx

0 → 100644

+103 −0

Original line number	Diff line number	Diff line
		import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form"
		import { PlaceFormValues } from "../infraestructure/entities/place";
		import { toast } from "react-toastify";
		import { useState } from "react";
		import axios, { AxiosError } from "axios";

		const resolver: Resolver<PlaceFormValues> = async (data) => {
		const errors: FieldErrors<PlaceFormValues> = {};

		if(!data.idTown){
		errors.idTown = {
		type : "required",
		message : "Debe seleccionar el pueblo mágico al que pertenece el lugar"
		}
		}

		if(!data.nameES){
		errors.nameES = {
		type : "required",
		message : "El nombre del lugar en español es requerido"
		}
		}

		if(!data.nameEN){
		errors.nameEN = {
		type : "required",
		message : "El nombre del lugar en inglés es requerido"
		}
		}

		if (!data.descriptionES) {
		errors.descriptionES = {
		type: "required",
		message: "La descripción del lugar en español es requerida"
		};
		}

		if (!data.descriptionEN) {
		errors.descriptionEN = {
		type: "required",
		message: "La descripción del lugar en inglés es requerida"
		};
		}

		if(!data.latitude \|\| !data.longitude){
		errors.latitude = {
		type: "required",
		message: "Debe de seleccionar la ubicación del lugar"
		}
		}

		if(!data.imagesList \|\| data.imagesList.length<3){
		errors.imagesList = {
		type: "required",
		message: "Debe de haber al menos 3 imagénes representativas del lugar"
		}
		}

		return {
		values: Object.keys(errors).length > 0 ? {} : data,
		errors: errors
		};
		};

		export const usePlaceRegister = () => {
		const {
		register,
		handleSubmit,
		setValue,
		formState: {errors},
		} = useForm<PlaceFormValues>({resolver});
		const [errorMessage, setErrorMessage] = useState("");

		const onSubmit : SubmitHandler<PlaceFormValues> = (data: PlaceFormValues) => {
		const fetch = async () => {
		try{

		}catch(error: any){
		if(axios.isAxiosError(error)){
		error as AxiosError;
		switch(error.code){
		case(axios.AxiosError.ERR_BAD_REQUEST):
		setErrorMessage("Acceso no autorizado");
		break;
		case(axios.AxiosError.ERR_NETWORK):
		setErrorMessage("Conexión con el servidor fallida");
		break;
		}
		}
		throw new Error;
		}
		}
		toast.promise(
		fetch(),{
		pending: "Subiendo datos...",
		success: "Los datos se han subido correctamente",
		error: errorMessage
		}
		)
		}

		return {register, handleSubmit, errors, onSubmit, setValue};
		}
		No newline at end of file