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

app/component/modalSearchCity/ButtonFilter.js

@@ -1,12 +1,10 @@
 // Icons
 import ArrowBottomH from "@/components/icons/ArrowBottomH";
 import Location from "@/components/icons/Location";
-import { useProvince } from "@/context/ProvinceProvider";
 import { Button } from "@mui/material";
 
 function ButtonFilter({ selected, setOpen }) {
   const handleOpen = () => setOpen(true);
-  const { isProvinceInclude } = useProvince();
 
   return (
     <div>
@@ -20,17 +18,12 @@ function ButtonFilter({ selected, setOpen }) {
           <Location />
         </div>
         <p
-          className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
-                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
-                    ${
-                      selected && selected.province && selected.city ? "" : ""
-                    }`}
+          className='text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
+                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1'
         >
-          {selected && selected.province && selected.city
-            ? `${selected.province} | ${selected.city}`
-            : isProvinceInclude?.name
-            ? isProvinceInclude.name
-            : "انتخاب شهر"}
+          {selected.province || 'استان'}
+          {' | '}
+          {selected.city || 'شهر'}
         </p>
         <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
           <ArrowBottomH />

app/component/modalSearchCity/Content.js

@@ -6,13 +6,12 @@ import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
 
 function Content({
+  state,
   states,
   selected,
   updateData,
   handleClose,
   filteredCities,
-  provinceSelected,
-  isProvinceInclude,
 }) {
   const citySelected = selected.city;
   const listboxProps = {
@@ -35,8 +34,8 @@ function Content({
         </p>
         <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
           <AutoCompleteSelect
-            value={selected && provinceSelected}
-            disabled={isProvinceInclude}
+            value={selected.province}
+            disabled={state}
             listboxProps={listboxProps}
             updateData={updateData}
             list={states}
@@ -49,19 +48,13 @@ function Content({
             value={
               selected &&
               citySelected &&
-              filteredCities.find((item) => item.label === citySelected) &&
+              filteredCities.find((item) => item.name === citySelected) &&
               citySelected
             }
             list={filteredCities}
             name="city"
             label="شهر"
-            disabled={
-              isProvinceInclude
-                ? !isProvinceInclude ||
-                !provinceSelected ||
-                filteredCities.length === 0
-                : !provinceSelected || filteredCities.length === 0
-            }
+            disabled={!selected.province}
           />
         </div>
         <div className="w-full flex justify-end">
@@ -70,7 +63,7 @@ function Content({
             onClick={handleClose}
             variant="contained"
             color="primary"
-            disabled={!provinceSelected || !citySelected}
+            disabled={!selected.city || !selected.province}
           >
             تایید و ادامه
             <ArrowLeftM />

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>