remove context && change design & modals & function && add folder lib

app/component/modalSearchCity/index.js

@@ -3,44 +3,24 @@
 import { useState, useEffect } from "react";
 import { Modal, Box } from "@mui/material";
 import { styleDefault } from "@/mui";
+import { addLabelToList } from "@/helper";
 
 // Data
 import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
 import Content from "./Content";
-import { useProvince } from "@/context/ProvinceProvider";
 
-function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
+function ModalSearchCity({ children, selected, state, setSelected, open, setOpen }) {
   const provinceSelected = selected.province;
-  const { isProvinceInclude } = useProvince();
-  const newProvinceData =
-    isProvinceInclude && isProvinceInclude.id === "63"
-      ? false
-      : isProvinceInclude;
 
-  const [states, setStates] = useState([]);
-  const [cities, setCities] = useState([]);
+  const states = addLabelToList(statesData);
+  const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
 
   const handleClose = () => setOpen(false);
 
   useEffect(() => {
-    const formattedStates = statesData.map((state) => ({
-      label: state.name,
-      id: state.id,
-    }));
 
-    const formattedCities = citiesData.map((city) => ({
-      label: city.name,
-      id: city.id,
-      province_id: city.province_id,
-    }));
-
-    setStates(formattedStates);
-    setCities(formattedCities);
-  }, []);
-
-  useEffect(() => {
     if (provinceSelected) {
       const selectedState = states.find(
         (state) => state.label === provinceSelected
@@ -52,18 +32,10 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
         );
         setFilteredCities(filteredCities);
       }
-    } else if (newProvinceData) {
-      setSelected({
-        ...selected,
-        province: statesData.find(
-          (state) => state.id === newProvinceData.province_id
-        )?.name,
-      });
     } else {
       setFilteredCities([]);
-      setSelected({ ...selected, city: "" });
     }
-  }, [provinceSelected, cities, states]);
+  }, [provinceSelected]);
 
   const updateData = (event, name) => {
     if (name === "province" && event !== provinceSelected) {
@@ -82,13 +54,12 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
       <Modal open={open} onClose={handleClose}>
         <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
           <Content
+            state={state}
             states={states}
             selected={selected}
             updateData={updateData}
             handleClose={handleClose}
             filteredCities={filteredCities}
-            provinceSelected={provinceSelected}
-            isProvinceInclude={newProvinceData}
           />
         </Box>
       </Modal>