79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Modal, Box } from "@mui/material";
|
|
import { styleDefault } from "@/mui";
|
|
import { addLabelToList } from "@/helper";
|
|
|
|
// Data
|
|
import states from "@/data/state.json";
|
|
import cities from "@/data/city.json";
|
|
import Content from "./Content";
|
|
|
|
function ModalSearchCity({
|
|
open,
|
|
state,
|
|
filter,
|
|
setOpen,
|
|
children,
|
|
setFilter,
|
|
modalLocate,
|
|
}) {
|
|
const stateSelected = filter?.state?.name;
|
|
|
|
// const states = addLabelToList(statesData);
|
|
// const cities = addLabelToList(citiesData);
|
|
const [filteredCities, setFilteredCities] = useState([]);
|
|
|
|
const handleClose = () => setOpen(false);
|
|
|
|
useEffect(() => {
|
|
if (stateSelected) {
|
|
const selectedState = states.find(
|
|
(state) => state.name === stateSelected
|
|
);
|
|
if (selectedState) {
|
|
const stateId = selectedState.id;
|
|
const filteredCities = cities.filter(
|
|
(city) => city.province_id === stateId
|
|
);
|
|
setFilteredCities(filteredCities);
|
|
}
|
|
} else {
|
|
setFilteredCities([]);
|
|
}
|
|
}, [stateSelected]);
|
|
|
|
// const updateData = (event, name) => {
|
|
// if (name === "province" && event !== stateSelected) {
|
|
// setSelected({ province: event.name, city: "" });
|
|
// } else {
|
|
// setSelected({ ...selected, [name]: event.name });
|
|
// }
|
|
// };
|
|
|
|
return (
|
|
<>
|
|
{/* Button Modal */}
|
|
{children}
|
|
|
|
{/* Content Modal */}
|
|
<Modal open={open} onClose={handleClose}>
|
|
<Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
|
|
<Content
|
|
state={state}
|
|
states={states}
|
|
filter={filter}
|
|
setFilter={setFilter}
|
|
handleClose={handleClose}
|
|
modalLocate={modalLocate}
|
|
filteredCities={filteredCities}
|
|
/>
|
|
</Box>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ModalSearchCity;
|