Se agrega el campo del apellido y se modifica la forma en que se selecciona el pueblo (46c6cc1b) · Commits · Lorenzo Trujillo Rojas / PueblosMagicosConIAFK

web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx

+50 −66

Original line number	Diff line number	Diff line
		import { Dispatch, SetStateAction, useEffect, useState } from "react";
		import { Dispatch, SetStateAction } from "react";
		import './assets/css/styles.css'
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { faWindowClose, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
		import { useAdminRegister } from "../../../hooks/useAdminRegister";
		import { useAdmin } from "../../../hooks/useAdmin";
		import { usePasswoordVisibility } from "../../../hooks/usePasswordVisibility";
		import { State } from "../../../infraestructure/entities/state";
		import { useTown } from "../../../hooks/useTown";
		import { Town } from "../../../infraestructure/entities/town";
		import axios, { AxiosError } from "axios";
		import { ToastContainer, toast } from "react-toastify";

		interface props {
		setWindowActive: Dispatch<SetStateAction<boolean>>,
		@@ -22,7 +19,7 @@ export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPa
		errors,
		handleSubmit,
		onSubmit,
		} = useAdminRegister();
		} = useAdmin();

		const {
		values,
		@@ -32,47 +29,6 @@ export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPa

		const {townsList, getTownsByState, setTownsList} = useTown();

		useEffect(() => {
		const getTownsList = async () => {
		try {
		if (statesList) {
		const townsListBackup: Town[] = [];
		statesList.forEach((state) => {
		getTownsByState(state.stateId, state.name);
		if (townsList) {
		townsListBackup.push(...townsList);
		}
		});
		setTownsList(townsListBackup);
		}
		} 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"
		});
		}
		}
		}
		getTownsList();
		}, []);

		return (
		<div className="admin_register_wrap">
		<div className="admin_register_header">
		@@ -102,6 +58,16 @@ export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPa
		<p className="error">{errors.name?.message}</p>
		</div>

		<div className="admin_input_cnt">
		<label>Apellido</label>
		<input
		type="text"
		{...register('lastName')}
		autoComplete="off"
		/>
		<p className="error">{errors.lastName?.message}</p>
		</div>

		<div className="admin_input_cnt">
		<label>Contraseña</label>
		<input
		@@ -139,31 +105,49 @@ export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPa

		<div className="admin_input_cnt">
		<label>Pueblo mágico al que representa</label>
		{townsList === null \|\| townsList.length===0
		?
		<label>No hay pueblo registrados</label>
		:
		<div>
		Estado
		<select
		{...register('townAdmin')}>
		{townsList.map((town) => {
		name="state_select"
		onChange={(event) => {
		getTownsByState(Number(event.target.value),
		event.target.options[event.target.selectedIndex].text);
		}}
		>
		{statesList === null \|\| statesList.length===0 ?
		<option disabled defaultValue="" value="">No hay estados</option>
		:
		<>
		<option disabled selected value="">Selecciona el estado</option>
		{statesList.map((state) => {
		return (
		<option key={town.idTown} value={town.idTown}>{town.name}</option>
		<option key={state.stateId} value={state.stateId}>{state.name}</option>
		);
		})}
		</>
		}
		</select>
		</div>
		<div>
		Pueblo mágico
		<select {...register("townAdmin")}>
		{
		townsList === null \|\| townsList.length===0 ?
		<option disabled defaultValue="" value="">No hay pueblos</option>
		:
		<>
		<option disabled selected value="">Selecciona el pueblo</option>
		{townsList.map((towns) => {
		return (
		<option key={towns.idTown} value={towns.idTown}>{towns.name}</option>
		);
		})}
		</>
		}
		</select>
		</div>
		<p className="error">{errors.townAdmin?.message}</p>
		</div>

		<ToastContainer
		position='bottom-right'
		autoClose = {1000}
		hideProgressBar = {true}
		closeOnClick
		rtl={false}
		pauseOnFocusLoss
		/>

		<div className="admin_input_cnt">
		<input className="submit_btn" type="submit" content="Registrar"/>
		</div>