Se agrega una lista desplegable para seleccionar el estado a consultar los...

import { useEffect, useState } from "react";

import { Dispatch, SetStateAction, useState } from "react";

import { useTown } from "../../../hooks/useTown";

import { State } from "../../../infraestructure/entities/state";

import axios, { AxiosError } from "axios";

import DataTable, { TableColumn } from "react-data-table-component";

import { LoadingSpinner } from "../../loading_spinner/loading_spinner";

import { showErrorAxios } from "../../../utils/Messages";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faEdit } from "@fortawesome/free-solid-svg-icons";

import { SuperadminPanelTownRegister } from "../sa_panel_town_register/sa_panel_town_register";

interface props {

  windowActive: boolean;

  setWindowActive: Dispatch<SetStateAction<boolean>>;

  statesList: State[];

}

export const SuperadminPanelTownList = ({statesList}: props) => {

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

export const SuperadminPanelTownList = ({windowActive, setWindowActive, statesList}: props) => {

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

  const [pending, setPending] = useState(false);

  const [isLoading, setIsLoading] = useState(false);

  const [renderCount, setRenderCount] = useState(0);

  const [actualWindowsActive, setActualWindowActive] = useState(false);

  const [form, setForm] = useState<Town>(townsList[0]);

  const forceRenderList = () =>{

    setRenderCount(prevCount => prevCount + 1);

  }

  const setData = async (idTown: number) => {

    setIsLoading(true);

    setActualWindowActive(true);

    setWindowActive(true);

    const actualTown = await getTownById(idTown);

    if(actualTown){

      setForm(actualTown);

    }

    setIsLoading(false);

  }

  const columns : TableColumn<Town>[] = [

    {

      name: "Identificador", 

      selector: row => row.idTown

      selector: row => row.idTown,

      sortable: true

    },

    {

      name: "Nombre", 

    }, 

    {

      name: "Estado", 

      selector: row => row.state

      selector: row => row.state,

      sortable: true

    },

    {

      name: "Acciones",

      cell: (row) => {

        return (

          <FontAwesomeIcon style={{cursor: 'pointer'}} icon={faEdit} 

            onClick={

              ()=> setData(row.idTown)

            }

          />

        );

      }

    }

  ];

  const refreshList = () => {

  const refreshList = (stateId: number, name: string) => {

    setPending(true);

    const getTownsList = async () => {

      try {

        if (statesList) {

          const townsListBackup: Town[] = [];

          statesList.forEach((state) => {

            getTownsByState(state.stateId, state.name);

            if (townsList) {

              townsListBackup.push(...townsList);

            }

          });

          setTownsList(townsListBackup);

        }

        getTownsByState(stateId, name);

      } catch (error: any) {

        if (axios.isAxiosError(error)) {

          error as AxiosError;

    setPending(false);

  };

  useEffect(() => {

    refreshList();

  }, []);

  return (

    <div className="town_list_cnt">

      <div className="town_list_header">

      Estado

      <select

        disabled={windowActive}

        name="state_select" 

        onChange={(event) => {

          const index = Number(event.target.value);

          const state = statesList[index];

          refreshList(state.stateId, state.name);

          }}

        >

          {statesList === null || statesList.length===0 ? 

          <option disabled defaultValue="" value="">No hay estados</option>

          : 

          <>

            <option disabled selected value={0}>Selecciona el estado</option>

            {statesList.map((state, index) => {

            return (

              <option key={state.stateId} value={index}>{state.name}</option>

            );

            })}

          </>

          }

        </select>

      </div>

      <div className="town_list_body">

        {

            actualWindowsActive && !isLoading

          && 

            <SuperadminPanelTownRegister 

              setWindowActive={setWindowActive}

              setActualWindowActive={setActualWindowActive}

              statesList={statesList}

              forceRenderList={forceRenderList}

              isRegister={false}

              form={form}

            />

        }

        <DataTable noDataComponent="No hay pueblos que mostrar" progressPending={pending}

        disabled={windowActive}

          progressComponent={

            <LoadingSpinner style={{display: 'flex'}}/>

          }

          columns={columns} data={townsList} selectableRows className="data_table"

        />

      </div>

    </div> 

  );

}

 No newline at end of file