Se agregan validaciones a los campos del formulario y se agregan estados para... (caed1184) · Commits · Omar Luna / PueblosMagicosConIA

web/src/hooks/usePlaceRegister.tsx

+84 −28

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 { useEffect, useState } from "react";
		import axios, { AxiosError } from "axios";
		import { languaguesList } from "../constants/languages";
		import { useGetStatesList } from "./useGetStatesList";
		import { useTown } from "./useTown";

		const resolver: Resolver<PlaceFormValues> = async (data) => {
		const errors: FieldErrors<PlaceFormValues> = {};
		@@ -14,33 +17,21 @@ const resolver: Resolver<PlaceFormValues> = async (data) => {
		}
		}

		if(!data.nameES){
		errors.nameES = {
		for(var index = languaguesList.length-1; index>=0; index--){
		if(!data.names \|\| !data.names[index]){
		errors.names = {
		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"
		message: "El nombre del lugar en "+languaguesList[index]+" es requerido"
		};
		}

		if (!data.descriptionEN) {
		errors.descriptionEN = {
		if(!data.descriptions \|\| !data.descriptions[index]){
		errors.descriptions = {
		type: "required",
		message: "La descripción del lugar en inglés es requerida"
		message: "La descripción del lugar en "+languaguesList[index]+" es requerida"
		};
		}
		}

		if(!data.latitude \|\| !data.longitude){
		errors.latitude = {
		@@ -68,13 +59,59 @@ export const usePlaceRegister = () => {
		handleSubmit,
		setValue,
		formState: {errors},
		clearErrors,
		} = useForm<PlaceFormValues>({resolver});
		const [errorMessage, setErrorMessage] = useState("");
		const [languageNameIndexSelected, setLanguageNameIndexSelected] = useState(0);
		const [languageDescriptionIndexSelected, setLanguageDescriptionIndexSelected] = useState(0);
		const [names, setNames] = useState<string[]>(new Array(languaguesList.length).fill(""));
		const [descriptions, setDescriptions] = useState<string[]>(new Array(languaguesList.length).fill(""));
		const [isLoading, setIsLoading] = useState(false);
		const {townsList, getTownsByState} = useTown();
		const {getStates, statesList} = useGetStatesList();

		useEffect(() => {
		setIsLoading(true);
		const getStatesList = async () => {
		try{
		getStates();
		}catch(error: any){
		if(axios.isAxiosError(error)){
		error as AxiosError;
		let message = "";
		switch(error.code){
		case(axios.AxiosError.ERR_BAD_REQUEST):
		message = "Acceso no autorizado";
		break;
		case(axios.AxiosError.ERR_NETWORK):
		message = "Conexión con el servidor fallida";
		break;
		}
		toast.error(message, {
		position: "bottom-right",
		autoClose: 1500,
		hideProgressBar: false,
		closeOnClick: true,
		pauseOnHover: false,
		draggable: true,
		progress: undefined,
		theme: "colored"
		});
		}
		}
		}
		getStatesList();
		setIsLoading(false);
		},[]);

		const updateTownsList = (idState: number, stateName: string) => {
		getTownsByState(idState, stateName);
		}

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

		console.log(data);
		}catch(error: any){
		if(axios.isAxiosError(error)){
		error as AxiosError;
		@@ -87,7 +124,7 @@ export const usePlaceRegister = () => {
		break;
		}
		}
		throw new Error;
		throw new Error();
		}
		}
		toast.promise(
		@@ -99,5 +136,24 @@ export const usePlaceRegister = () => {
		)
		}

		return {register, handleSubmit, errors, onSubmit, setValue};
		return {
		register,
		handleSubmit,
		errors,
		onSubmit,
		setValue,
		languageNameIndexSelected,
		setLanguageNameIndexSelected,
		languageDescriptionIndexSelected,
		setLanguageDescriptionIndexSelected,
		names,
		setNames,
		descriptions,
		setDescriptions,
		clearErrors,
		isLoading,
		statesList,
		townsList,
		updateTownsList
		};
		}