change function of fliter sort, modal and locate set new data and change it and update

app/component/element/AutoCompleteSelect.js

@@ -18,7 +18,12 @@ function AutoCompleteSelect({
       disablePortal
       options={list}
       disabled={disabled}
-      ListboxProps={listboxProps}
+      ListboxProps={{
+        style: {
+          maxHeight: 200,
+          overflow: "auto",
+        },
+      }}
       value={value || null}
       getOptionLabel={(option) => {
         if (typeof option === "string") return option;

app/component/modalSearchCity/AddressSelector.js

@@ -0,0 +1,93 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function AddressSelector({
+  list,
+  value,
+  isError,
+  updateData,
+  label,
+  disabled,
+  listboxProps,
+  name,
+}) {
+  return (
+    <Autocomplete
+      disablePortal
+      options={list}
+      disabled={disabled}
+      ListboxProps={listboxProps}
+      value={value || null}
+      getOptionLabel={(option) => option?.name || ""}
+      className="!w-full !rounded-lg auto-complete-selector"
+      onChange={(_, value) => updateData(name, value)}
+      sx={{
+        ...styleTextSelectRight,
+        // Hide Icon Number
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+          {
+            display: "none",
+          },
+        "& input[type=number]": {
+          MozAppearance: "textfield",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+        "& .MuiInputBase-root": {
+          borderRadius: 2,
+          padding: "0 !important",
+          height: {
+            xs: "43px !important",
+            sm: "43px !important",
+            md: "46px !important",
+            lg: "48px !important",
+          },
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #D7D7D7",
+        },
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: "#D7D7D7 !important",
+          },
+        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+          {
+            border: "1px solid #5559CE !important",
+          },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: isError ? "1px solid red !important" : "",
+        },
+      }}
+      renderOption={(props, option) => (
+        <Button
+          fullWidth
+          {...props}
+          key={props.id}
+          className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+        >
+          {option.name}
+        </Button>
+      )}
+      renderInput={(params) => (
+        <TextField
+          fullWidth
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <div className="absolute left-4">
+                <BottomSelect />
+              </div>
+            ),
+          }}
+          placeholder={label}
+          sx={{
+            borderRadius: "8px",
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default AddressSelector;

app/component/modalSearchCity/Content.js

@@ -2,85 +2,37 @@ import { Button } from "@mui/material";
 
 // Icon
 import CloseModalD from "@/components/icons/CloseModalD";
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
 import { useState } from "react";
-import { request } from "@/services/response";
+import AddressSelector from "./AddressSelector";
 
 function Content({
   state,
   states,
-  selected,
+  filter,
-  setDoctors,
+  setFilter,
-  updateData,
   handleClose,
+  modalLocate,
   filteredCities,
-  handleSearch,
 }) {
-  const citySelected = selected.city;
   const [loading, setLoading] = useState(false);
-  const listboxProps = {
+
-    style: {
+  const updateData = (name, value) => {
-      maxHeight: 200,
+    setFilter((prev) => {
-      overflow: "auto",
+      if (name === "state") {
-    },
+        return {
+          ...prev,
+          state: value,
+          city: null,
+        };
+      }
+      return {
+        ...prev,
+        [name]: value,
+      };
+    });
   };
 
-  const handleFilter = (city) => {
-    const current = new URLSearchParams(window.location.search);
-    current.set("province", city.id);
-    const newUrl = `${window.location.pathname}?${current.toString()}`;
-    window.history.replaceState({}, "", newUrl);
-
-    handleSearch && handleSearch("");
-    handleClose();
-  };
-
-  const sendReq = () => {
-    setLoading(true);
-    const itemCity =
-      selected &&
-      citySelected &&
-      filteredCities.find((item) => item.name === citySelected);
-
-    const params = new URLSearchParams(window.location.search);
-    const specialty = params.get("specialty");
-    const gender = params.get("gender");
-    const degree = params.get("degree");
-    const active = params.get("turn");
-
-    const city =
-      states.find((item) => item.name === selected.province)?.id || null;
-    const state =
-      filteredCities.find((item) => item.name === selected.city)?.id || null;
-
-    const requestData = {
-      specialty: specialty === "null" ? null : specialty,
-      gender,
-      degree,
-      active,
-      city,
-      state,
-    };
-
-    request
-      .getDoctors(requestData)
-      .then((res) => {
-        if (res && res.data) setDoctors(res.data);
-      })
-      .catch(() => {})
-      .finally(() => {
-        setLoading(false);
-        handleFilter(itemCity);
-      });
-  };
-
-  const valState =
-    selected &&
-    citySelected &&
-    filteredCities.find((item) => item.name === citySelected) &&
-    citySelected;
-
   return (
     <div>
       <div className="flex justify-end w-full">
@@ -93,35 +45,31 @@ 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
+          <AddressSelector
-            value={selected.province}
+            name="state"
-            disabled={state}
-            sendAll={true}
-            listboxProps={listboxProps}
-            updateData={updateData}
             list={states}
             label="استان"
-            name="province"
+            disabled={state}
-          />
+            value={filter.state}
-          <AutoCompleteSelect
             updateData={updateData}
-            listboxProps={listboxProps}
+          />
-            sendAll={true}
+          <AddressSelector
-            value={valState}
-            list={filteredCities}
             name="city"
             label="شهر"
-            disabled={!selected.province}
+            value={filter.city}
+            list={filteredCities}
+            updateData={updateData}
+            disabled={!filter.state}
           />
         </div>
         <div className="w-full flex justify-end">
           <Button
             loading={loading}
             className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
-            onClick={sendReq}
+            onClick={modalLocate}
             variant="contained"
             color="primary"
-            disabled={!selected.city || !selected.province}
+            disabled={!filter.city || !filter.state}
           >
             تایید و ادامه
             <ArrowLeftM />

app/component/modalSearchCity/index.js

@@ -6,32 +6,31 @@ import { styleDefault } from "@/mui";
 import { addLabelToList } from "@/helper";
 
 // Data
-import statesData from "@/data/state.json";
+import states from "@/data/state.json";
-import citiesData from "@/data/city.json";
+import cities from "@/data/city.json";
 import Content from "./Content";
 
 function ModalSearchCity({
   open,
   state,
+  filter,
   setOpen,
   children,
-  selected,
+  setFilter,
-  setDoctors,
+  modalLocate,
-  handleSearch,
-  setSelected,
 }) {
-  const provinceSelected = selected.province;
+  const stateSelected = filter?.state?.name;
 
-  const states = addLabelToList(statesData);
+  // const states = addLabelToList(statesData);
-  const cities = addLabelToList(citiesData);
+  // const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
 
   const handleClose = () => setOpen(false);
 
   useEffect(() => {
-    if (provinceSelected) {
+    if (stateSelected) {
       const selectedState = states.find(
-        (state) => state.label === provinceSelected
+        (state) => state.name === stateSelected
       );
       if (selectedState) {
         const stateId = selectedState.id;
@@ -43,15 +42,15 @@ function ModalSearchCity({
     } else {
       setFilteredCities([]);
     }
-  }, [provinceSelected]);
+  }, [stateSelected]);
 
-  const updateData = (event, name) => {
+  // const updateData = (event, name) => {
-    if (name === "province" && event !== provinceSelected) {
+  //   if (name === "province" && event !== stateSelected) {
-      setSelected({ province: event.name, city: "" });
+  //     setSelected({ province: event.name, city: "" });
-    } else {
+  //   } else {
-      setSelected({ ...selected, [name]: event.name });
+  //     setSelected({ ...selected, [name]: event.name });
-    }
+  //   }
-  };
+  // };
 
   return (
     <>
@@ -64,11 +63,10 @@ function ModalSearchCity({
           <Content
             state={state}
             states={states}
-            selected={selected}
+            filter={filter}
-            setDoctors={setDoctors}
+            setFilter={setFilter}
-            updateData={updateData}
             handleClose={handleClose}
-            handleSearch={handleSearch}
+            modalLocate={modalLocate}
             filteredCities={filteredCities}
           />
         </Box>

components/doctors/content/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Content() {
+  return (
+    <div>Content</div>
+  )
+}
+
+export default Content

components/doctors/head/index.js

@@ -0,0 +1,120 @@
+import { useState } from "react";
+
+import SearchBar from "../search";
+import SortList from "../sortlist";
+import { Button } from "@mui/material";
+import { useParams } from "next/navigation";
+import LocationD from "../../icons/LocationD";
+import specialties from "@/data/specialties.json";
+import ModalSearchCity from "@/app/component/modalSearchCity";
+
+// Data
+import states from "@/data/state.json";
+import cities from "@/data/city.json";
+
+function Head({ matchedCity, matchedState, setDoctors }) {
+  const params = useParams();
+  const fieldName = params.field;
+  const [open, setOpen] = useState(false);
+  const [fields, setFields] = useState({
+    search: params.search || "",
+    stars: "",
+  });
+
+  const findItem = (key, name) =>
+    specialties.find((item) => item[key] === name);
+  const isParent =
+    findItem("name", fieldName) && findItem("name", fieldName).parent;
+
+  const defaultData = {
+    category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
+    specialties: isParent && findItem("name", fieldName),
+    turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
+    gender: params.gender || "هر دو",
+    degree: params.degree || "همه موارد",
+  };
+
+  const selectedState = matchedState?.name || params?.state;
+  const selectedCity =
+    (matchedCity?.name && matchedCity?.id !== "63"
+      ? matchedCity?.name
+      : false) || params?.city;
+
+  const defaultFilter = {
+    state: selectedState && states.find((item) => item.name === selectedState),
+    city: selectedCity && cities.find((item) => item.name === selectedCity),
+    category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
+    specialty: isParent && findItem("name", fieldName),
+    active: params.active || 0,
+    gender: params.gender || "هر دو",
+    degree: params.degree || "همه موارد",
+    sort: "",
+    name: "",
+  };
+  const modalLocate = () => {
+    setOpen(false);
+  };
+
+  const [data, setData] = useState(defaultData);
+  const [confirmedData, setConfirmedData] = useState(defaultData);
+  const [filter, setFilter] = useState(defaultFilter);
+
+  console.log(filter);
+  
+
+  const updateData = (name, value) => setFilter({ ...filter, [name]: value });
+
+  return (
+    <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
+      <ModalSearchCity
+        open={open}
+        filter={filter}
+        setOpen={setOpen}
+        state={matchedState}
+        setFilter={setFilter}
+        modalLocate={modalLocate}
+      >
+        <Button
+          className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
+          onClick={() => setOpen(true)}
+        >
+          <LocationD />
+          <h1 className="text-[#525252] text-[16px] font-semibold">
+            {" "}
+            {filter?.state?.name || "استان"}
+            {" / "}
+            {filter?.city?.name || "شهر"}
+          </h1>
+        </Button>
+      </ModalSearchCity>
+      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
+        <SearchBar
+          data={data}
+          fields={fields}
+          filter={filter}
+          setData={setData}
+          setFilter={setFilter}
+          setDoctors={setDoctors}
+          updateData={updateData}
+          matchedCity={matchedCity}
+          matchedState={matchedState}
+          confirmedData={confirmedData}
+          setConfirmedData={setConfirmedData}
+        />
+        <SortList
+          data={data}
+          fields={fields}
+          filter={filter}
+          setData={setData}
+          setFields={setFields}
+          updateData={updateData}
+          setDoctors={setDoctors}
+          matchedCity={matchedCity}
+          matchedState={matchedState}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Head;

components/doctors/index.js

@@ -1,92 +1,21 @@
 "use client";
 
 import { useState } from "react";
-import SearchBar from "./search";
-import SortList from "./sortlist";
-import { Button } from "@mui/material";
 import ListDoctors from "./listDoctors";
-import LocationD from "../icons/LocationD";
-import ModalSearchCity from "@/app/component/modalSearchCity";
 
 // Data
-import specialties from "@/data/specialties.json";
+import Head from "./head";
 
-function DoctorsPage({ params, matchedCity, matchedState, list }) {
+function DoctorsPage({ matchedCity, matchedState, list }) {
-  const fieldName = params.field;
   const [doctors, setDoctors] = useState(list);
-  const [open, setOpen] = useState(false);
-  const [fields, setFields] = useState({
-    search: params.search || "",
-    stars: "",
-  });
-  const [selected, setSelected] = useState({
-    province: matchedState?.name || params?.province,
-    city: matchedCity?.name || params?.city,
-  });
-
-  const findItem = (key, name) =>
-    specialties.find((item) => item[key] === name);
-  const isParent =
-    findItem("name", fieldName) && findItem("name", fieldName).parent;
-
-  const defaultData = {
-    category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
-    specialties: isParent && findItem("name", fieldName),
-    turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
-    gender: params.gender || "هر دو",
-    degree: params.degree || "همه موارد",
-  };
-
-  const [data, setData] = useState(defaultData);
-  const [confirmedData, setConfirmedData] = useState(defaultData);
 
   return (
     <div className="pt-[95px] sm:pt-[120px] padding-responsive">
-      <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
+      <Head
-        <ModalSearchCity
+        setDoctors={setDoctors}
-          open={open}
+        matchedCity={matchedCity}
-          setOpen={setOpen}
+        matchedState={matchedState}
-          selected={selected}
+      />
-          state={matchedState}
-          setDoctors={setDoctors}
-          setSelected={setSelected}
-        >
-          <Button
-            className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
-            onClick={() => setOpen(true)}
-          >
-            <LocationD />
-            <h1 className="text-[#525252] text-[16px] font-semibold">
-              {" "}
-              {selected.province || "استان"}
-              {" / "}
-              {selected.city || "شهر"}
-            </h1>
-          </Button>
-        </ModalSearchCity>
-        <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
-          <SearchBar
-            data={data}
-            fields={fields}
-            setData={setData}
-            setFields={setFields}
-            setDoctors={setDoctors}
-            matchedCity={matchedCity}
-            matchedState={matchedState}
-            confirmedData={confirmedData}
-            setConfirmedData={setConfirmedData}
-          />
-          <SortList
-            data={data}
-            fields={fields}
-            setData={setData}
-            setFields={setFields}
-            setDoctors={setDoctors}
-            matchedCity={matchedCity}
-            matchedState={matchedState}
-          />
-        </div>
-      </div>
       <ListDoctors list={doctors} />
     </div>
   );

components/doctors/modal/Content.js

@@ -1,27 +1,31 @@
 import specialties from "@/data/specialties.json";
 import Form from "./form";
 
-function Content({ data, setData }) {
+function Content({ filter, setFilter, updateData }) {
-  const changeData = (value, name, isCategory, key) => {
+  const changeSpecialty = (name, value) => {
-    const newData = { ...data, [name]: value };
+    const newFilter = { ...filter, [name]: value };
 
-    if (isCategory) {
+    if (name === "category") {
       const childrenList = specialties.filter((item) => item.parent);
       const filteredChildrenList = childrenList.filter(
         (item) => item.parent === value.id
       );
       const firstChildren = filteredChildrenList[0];
 
-      newData.specialties = firstChildren || "";
+      newFilter.specialty = firstChildren || "";
     }
 
-    setData(newData);
+    setFilter(newFilter);
-    return newData;
+    return newFilter;
   };
 
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
-      <Form data={data} changeData={changeData} />
+      <Form
+        filter={filter}
+        updateData={updateData}
+        changeSpecialty={changeSpecialty}
+      />
     </div>
   );
 }

components/doctors/modal/FilterModal.js

@@ -11,9 +11,12 @@ import ButtonApply from "./ButtonApply";
 
 function FilterModal({
   data,
+  filter,
   setData,
   children,
+  setFilter,
   setDoctors,
+  updateData,
   matchedCity,
   matchedState,
   confirmedData,
@@ -28,7 +31,7 @@ function FilterModal({
     setData(confirmedData);
   };
 
-  const deleteData = () => {
+  const resetFilter = () => {
     clearFilterParams(router, ["turn", "field", "degree", "gender"]);
 
     const defaultData = {
@@ -39,8 +42,20 @@ function FilterModal({
       degree: "متخصص",
     };
 
+    const newFilter = {
+      category: undefined,
+      specialty: undefined,
+      active: 0,
+      gender: "هر دو",
+      degree: "همه موارد",
+    };
+
     setData({ ...defaultData });
     setConfirmedData({ ...defaultData });
+    setFilter({
+      ...filter,
+      ...newFilter,
+    });
 
     handleClose();
   };
@@ -62,7 +77,7 @@ function FilterModal({
               <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
               <Button
                 className="cursor-pointer !p-0 flex items-center justify-center gap-1"
-                onClick={deleteData}
+                onClick={resetFilter}
                 variant="text"
               >
                 <CloseOrangeModal />
@@ -71,7 +86,11 @@ function FilterModal({
                 </p>
               </Button>
             </div>
-            <Content data={data} setData={setData} />
+            <Content
+              filter={filter}
+              setFilter={setFilter}
+              updateData={updateData}
+            />
           </div>
           <ButtonApply
             data={data}

components/doctors/modal/form/CateSelector.js

@@ -2,7 +2,7 @@ import BottomSelect from "@/components/icons/BottomSelect";
 import { Autocomplete, Button, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function CateSelector({ list, value, isError, updateData, label }) {
+function CateSelector({ name, list, value, isError, updateData, label }) {
   return (
     <Autocomplete
       disablePortal
@@ -10,7 +10,7 @@ function CateSelector({ list, value, isError, updateData, label }) {
       options={list}
       getOptionLabel={(option) => option?.name}
       className="!w-full !rounded-lg auto-complete-selector"
-      onChange={(_, newValue) => updateData(newValue)}
+      onChange={(_, newValue) => updateData(name, newValue)}
       sx={{
         ...styleTextSelectRight,
         // Hide Icon Number

components/doctors/modal/form/RadioContent.js

@@ -1,12 +1,12 @@
 import Radios from "./Radios";
 
-function RadioContent({ group, text, value, changeData, name }) {
+function RadioContent({ group, text, value, updateData, name }) {
   return (
     <div>
       <p className="text-[16px] font-medium text-[#3B3B3B]">{text}</p>
       <div className="mt-[16px]">
         <Radios
-          changeData={changeData}
+          updateData={updateData}
           group={group}
           value={value}
           name={name}

components/doctors/modal/form/Radios.js

@@ -1,11 +1,11 @@
 import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
 
-function Radios({ group, value, changeData, name }) {
+function Radios({ group, value, updateData, name }) {
   return (
     <RadioGroup
       value={value}
       className="radio-mui"
-      onChange={(e) => changeData(e.target.value, name, false, name)}
+      onChange={(e) => updateData(name, e.target.value)}
       sx={{
         "& .MuiFormControlLabel-root": {
           marginRight: "0 !important",

components/doctors/modal/form/SwitchContent.js

@@ -1,14 +1,14 @@
 import { FormControlLabel, Switch } from "@mui/material";
 
-function SwitchContent({ data, changeData }) {
+function SwitchContent({ filter, updateData }) {
   return (
     <div className="flex items-center justify-start gap-[12px]">
       <FormControlLabel
         control={
           <Switch
-            checked={data.turn}
+            checked={filter.active}
             onChange={(event) =>
-              changeData(event.target.checked ? 1 : 0, "turn", false, "turn")
+              updateData("active", event.target.checked ? 1 : 0)
             }
           />
         }

components/doctors/modal/form/index.js

@@ -6,47 +6,47 @@ import CateSelector from "./CateSelector";
 const gender = ["زن", "مرد", "هر دو"];
 const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];
 
-function Form({ data, changeData }) {
+function Form({ filter, changeSpecialty, updateData }) {
-  const { parentList, childrenList } = filterList(data);
+  const { parentList, childrenList } = filterList(filter);
 
   return (
     <>
       <CateSelector
+        name="category"
         list={parentList}
         label="دسته بندی"
-        value={data.category}
+        value={filter.category}
-        updateData={(value) => changeData(value, "category", true, "specialty")}
+        updateData={changeSpecialty}
       />
-      {!!childrenList.length && (
+      <div
-        <div className="mt-[24px]">
+        className={`${!!childrenList.length ? "max-h-32 mt-[24px]" : "max-h-0 mt-0"} overflow-hidden transition-all duration-500`}
-          <CateSelector
+      >
-            list={childrenList}
+        <CateSelector
-            updateData={(value) =>
+          name="specialty"
-              changeData(value, "specialties", false, "specialty")
+          list={childrenList}
-            }
+          updateData={updateData}
-            value={data.specialties}
+          value={filter.specialty}
-            label="تخصص"
+          label="تخصص"
-          />
+        />
-        </div>
+      </div>
-      )}
       <div className="mt-[40px] mb-[32px]">
         <RadioContent
-          changeData={changeData}
+          updateData={updateData}
-          value={data.gender}
+          value={filter.gender}
           text="جنسیت پزشک"
           group={gender}
           name="gender"
         />
         <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
         <RadioContent
-          changeData={changeData}
+          updateData={updateData}
-          value={data.degree}
+          value={filter.degree}
           text="درجه علمی"
           group={degree}
           name="degree"
         />
         <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
-        <SwitchContent data={data} changeData={changeData} />
+        <SwitchContent filter={filter} updateData={updateData} />
       </div>
     </>
   );

components/doctors/search/SearchField.js

@@ -1,12 +1,12 @@
 import { TextField } from "@mui/material";
 import React from "react";
 
-function SearchField({ fields, setFields }) {
+function SearchField({ filter, updateData }) {
   return (
     <TextField
       variant="standard"
-      value={fields.search}
+      value={filter.name}
-      onChange={(e) => setFields({ ...fields, search: e.target.value })}
+      onChange={(e) => updateData("name", e.target.value)}
       InputProps={{
         disableUnderline: true,
       }}

components/doctors/search/index.js

@@ -8,9 +8,11 @@ import SearchField from "./SearchField";
 function SearchBar({
   data,
   fields,
+  filter,
   setData,
-  setFields,
+  setFilter,
   setDoctors,
+  updateData,
   matchedCity,
   matchedState,
   confirmedData,
@@ -25,8 +27,11 @@ function SearchBar({
     >
       <FilterModal
         data={data}
+        filter={filter}
         setData={setData}
+        setFilter={setFilter}
         setDoctors={setDoctors}
+        updateData={updateData}
         matchedCity={matchedCity}
         matchedState={matchedState}
         confirmedData={confirmedData}
@@ -48,7 +53,7 @@ function SearchBar({
           </div>
         </Button>
       </FilterModal>
-      <SearchField fields={fields} setFields={setFields} />
+      <SearchField filter={filter} updateData={updateData} />
       <SendReq
         fields={fields}
         setDoctors={setDoctors}

components/doctors/sortlist/SelectSort.js

@@ -14,7 +14,9 @@ const listSort = [
 function SelectSort({
   data,
   fields,
+  filter,
   setFields,
+  updateData,
   setDoctors,
   matchedCity,
   matchedState,
@@ -43,8 +45,8 @@ function SelectSort({
   return (
     <Select
       displayEmpty
-      defaultValue={fields.stars}
+      value={filter.sort}
-      onChange={handleChange}
+      onChange={(e) => updateData("sort", Number(e.target.value))}
       className="!w-[198px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
       renderValue={(value) => {
         return (
@@ -54,7 +56,7 @@ function SelectSort({
             </SvgIcon>
             {value ? (
               <ul className="flex items-center justify-start gap-1">
-                {Array(fields.stars)
+                {Array(filter.sort)
                   .fill({})
                   .map((_, idx) => (
                     <li key={idx}>

components/doctors/sortlist/index.js

@@ -5,10 +5,12 @@ import FilterBtn from "./FilterBtn";
 import SelectSort from "./SelectSort";
 
 function SortList({
-  fields,
   data,
+  fields,
+  filter,
   setData,
   setFields,
+  updateData,
   setDoctors,
   matchedCity,
   matchedState,
@@ -20,8 +22,10 @@ function SortList({
       </FilterModal>
       <SelectSort
         data={data}
+        filter={filter}
         fields={fields}
         setFields={setFields}
+        updateData={updateData}
         setDoctors={setDoctors}
         matchedCity={matchedCity}
         matchedState={matchedState}