get data from url and set in state & change default value & handle delete value of states & handle list and filter category and expertise in doctors page & handle search onchange & filter list clinics on change state

app/component/modalSearchCity/Content.js

@@ -12,6 +12,7 @@ function Content({
   updateData,
   handleClose,
   filteredCities,
+  handleSearch,
 }) {
   const citySelected = selected.city;
   const listboxProps = {
@@ -21,6 +22,11 @@ function Content({
     },
   };
 
+  const handleFilter = () => {
+    handleSearch('')
+    handleClose();
+  }
+
   return (
     <div>
       <div className="flex justify-end w-full">
@@ -60,7 +66,7 @@ function Content({
         <div className="w-full flex justify-end">
           <Button
             className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
-            onClick={handleClose}
+            onClick={handleFilter}
             variant="contained"
             color="primary"
             disabled={!selected.city || !selected.province}

app/component/modalSearchCity/index.js

@@ -10,7 +10,7 @@ import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
 import Content from "./Content";
 
-function ModalSearchCity({ children, selected, state, setSelected, open, setOpen }) {
+function ModalSearchCity({ children, selected, handleSearch, state, setSelected, open, setOpen }) {
   const provinceSelected = selected.province;
 
   const states = addLabelToList(statesData);
@@ -58,6 +58,7 @@ function ModalSearchCity({ children, selected, state, setSelected, open, setOpen
             selected={selected}
             updateData={updateData}
             handleClose={handleClose}
+            handleSearch={handleSearch}
             filteredCities={filteredCities}
           />
         </Box>

components/clinics/head/SearchBar.js

@@ -5,7 +5,7 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 import { useState } from "react";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
 
-function SearchBar({ selected, setSelected, state, handleSearch, changeSearch, search }) {
+function SearchBar({ selected, setSelected, state, handleSearch }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -22,13 +22,13 @@ function SearchBar({ selected, setSelected, state, handleSearch, changeSearch, s
         setOpen={setOpen}
         selected={selected}
         setSelected={setSelected}
+        handleSearch={handleSearch}
       >
         <ButtonFilter setOpen={setOpen} selected={selected} />
       </ModalSearchCity>
       <TextField
-        value={search}
         variant="standard"
-        onChange={e => changeSearch(e.target.value)}
+        onChange={e => handleSearch(e.target.value)}
         InputProps={{
           disableUnderline: true,
         }}

components/clinics/index.js

@@ -10,7 +10,6 @@ import HeadPageList from "@/app/component/head";
 
 function ClinicsPage({ matchedCity, matchedState }) {
   const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState("");
   const [filteredClinics, setFilteredClinics] = useState(clinics)
 
   const [selected, setSelected] = useState({
@@ -24,10 +23,9 @@ function ClinicsPage({ matchedCity, matchedState }) {
     }, 2000);
   }, []);
 
-  const changeSearch = text => setSearch(text);
 
-  const handleSearch = () => {
+  const handleSearch = (value) => {
-    const searchOnName = searchOnList(clinics, search, 'title')
+    const searchOnName = searchOnList(clinics, value, 'title')
     const searchOnLocation = searchOnList(searchOnName, selected.city, 'city')
     setFilteredClinics(searchOnLocation);
   };
@@ -39,11 +37,9 @@ function ClinicsPage({ matchedCity, matchedState }) {
         detail="در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید"
       >
         <SearchBar
-          search={search}
           selected={selected}
           setSelected={setSelected}
           state={matchedState?.name}
-          changeSearch={changeSearch}
           handleSearch={handleSearch}
         />
       </HeadPageList>

components/doctors/index.js

@@ -8,13 +8,8 @@ import ListDoctors from "./listDoctors";
 import LocationD from "../icons/LocationD";
 import ModalSearchCity from "@/app/component/modalSearchCity";
 
-const defaultData = {
+// Data
-  category: "",
+import specialties from "@/data/specialties.json";
-  expertise: "",
-  turn: true,
-  gender: "هر دو",
-  degree: "متخصص",
-}
 
 function DoctorsPage({ params, matchedCity, matchedState }) {
   const [loading, setLoading] = useState(true);
@@ -23,8 +18,17 @@ function DoctorsPage({ params, matchedCity, matchedState }) {
     province: matchedState?.name || params?.province,
     city: matchedCity?.name || params?.city,
   });
+  const findItem = (name, value) => specialties.find(item => item[name] === value)
+  const itemCategory = findItem('id', params.category);
+  const itemExpertise = findItem('id', params.expertise);
 
-  const [data, setData] = useState(defaultData);
+  const [data, setData] = useState({
+    category: itemCategory || "",
+    expertise: itemExpertise ? { ...itemExpertise, label: itemExpertise.name } : "",
+    turn: params && params.hasOwnProperty('turn') ? JSON.parse(params.turn) : 1,
+    gender: params.gender || "هر دو",
+    degree: params.degree || "متخصص",
+  });
 
   useEffect(() => {
     setTimeout(() => {
@@ -55,7 +59,7 @@ function DoctorsPage({ params, matchedCity, matchedState }) {
           </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} setData={setData} params={params} defaultData={defaultData} />
+          <SearchBar data={data} setData={setData} params={params} />
           <SortList data={data} setData={setData} />
         </div>
       </div>

components/doctors/modal/Content.js

@@ -1,46 +1,50 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import RadioContent from "./RadioContent";
 import { FormControlLabel, Switch } from "@mui/material";
-import specialties from "@/data/specialties.json";
-import { addKeyToList } from "@/helper";
-import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { filterList } from "@/helper";
 const group1 = ["خانم", "آقا", "هر دو"];
 const group2 = ["فوق تخصص", "دکترای تخصصی", "متخصص", "دکتری"];
 
 
 function Content({ data, setData }) {
   const router = useRouter();
-  const parentList = specialties.filter(item => !item.parent);
+  const { parentList, childrenList } = filterList(data);
-  const childrenList = specialties.filter(item => item.parent);
 
-  const changedParentList = addKeyToList(parentList, 'label', 'name') || [];
+  const changeUrl = (value, name, removeExpertise) => {
-  const changedChildrenList = addKeyToList(childrenList, 'label', 'name') || [];
-
-  const filteredChildrenList = changedChildrenList.filter(item => item.parent === data.category.id);
-
-  const changeData = (value, name) => {
     const current = new URLSearchParams(window.location.search);
     current.set(name, value.id || value);
+    if (removeExpertise) {
+      current.delete('expertise')
+    };
     const queryString = current.toString();
     router.push(`/doctors?${queryString}`)
-    setData({ ...data, [name]: value });
+  }
+
+  const changeData = (value, name, removeExpertise) => {
+    changeUrl(value, name, removeExpertise);
+    const newData = data;
+    newData[name] = value;
+    if (removeExpertise) {
+      newData.expertise = ''
+    };
+    setData(newData);
   }
 
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
       <AutoCompleteSelect
-        list={changedParentList}
+        list={parentList}
-        updateData={changeData}
+        updateData={(value, name) => changeData(value, name, true)}
         sendAll={true}
         value={data.category.name}
         label="دسته بندی"
         name="category"
       />
-      {!!filteredChildrenList.length && (
+      {!!childrenList.length && (
         <div className="mt-[24px]">
           <AutoCompleteSelect
-            list={filteredChildrenList}
+            list={childrenList}
             updateData={changeData}
             sendAll={true}
             value={data.expertise}
@@ -70,9 +74,10 @@ function Content({ data, setData }) {
           <FormControlLabel
             control={
               <Switch
-                // value={data.turn}
                 checked={data.turn}
-                onChange={(event) => changeData(event.target.checked, "turn")}
+                onChange={(event) => {
+                  changeData(event.target.checked ? 1 : 0, "turn")
+                }}
               />
             }
             sx={{

components/doctors/modal/FilterModal.js

@@ -6,27 +6,24 @@ import { Button, Modal } from "@mui/material";
 import { useState } from "react";
 import Content from "./Content";
 import { useRouter } from "next/navigation";
+import { clearFilterParams } from "@/helper";
 
-function FilterModal({ data, setData, children, defaultData }) {
+function FilterModal({ data, setData, children }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
 
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
-  function clearFilterParams() {
-    const currentParams = new URLSearchParams(window.location.search);
-    const keysToRemove = ['turn', 'expertise', 'degree', 'category', 'gender'];
-    keysToRemove.forEach((key) => currentParams.delete(key));
-    const queryString = currentParams.toString();
-    const newUrl = queryString ? `/doctors?${queryString}` : '/doctors';
-
-    router.push(newUrl);
-  }
-
   const deleteData = () => {
-    setData(defaultData);
+    clearFilterParams(router, ['turn', 'expertise', 'degree', 'category', 'gender'])
-    clearFilterParams()
+    setData({
+      category: "",
+      expertise: "",
+      turn: true,
+      gender: "هر دو",
+      degree: "متخصص",
+    });
     handleClose();
   }
 

components/doctors/search/index.js

@@ -4,7 +4,7 @@ import ArrowBottomD from "@/components/icons/ArrowBottomD";
 import SearchD from "@/components/icons/SearchD";
 import FilterModal from "../modal/FilterModal";
 
-function SearchBar({ data, setData, params, defaultData }) {
+function SearchBar({ data, setData, params }) {
   return (
     <ButtonGroup
       variant="contained"
@@ -12,7 +12,7 @@ function SearchBar({ data, setData, params, defaultData }) {
             flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
             !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
-      <FilterModal data={data} setData={setData} defaultData={defaultData}>
+      <FilterModal data={data} setData={setData}>
         <Button
           className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
           variant="contained"

components/searchHead/SmSearch.js

@@ -1,7 +1,7 @@
 import SearchD from "@/components/icons/SearchD";
 import { Button, ButtonGroup, TextField } from "@mui/material";
 
-function SmSearch({ placeholder, changeSearch, handleSearch, search }) {
+function SmSearch({ placeholder, handleSearch }) {
   return (
     <ButtonGroup
       variant="contained"
@@ -10,9 +10,8 @@ function SmSearch({ placeholder, changeSearch, handleSearch, search }) {
             !h-fit !p-1"
     >
       <TextField
-        value={search}
         variant="standard"
-        onChange={e => changeSearch(e.target.value)}
+        onChange={e => handleSearch(e.target.value)}
         InputProps={{
           disableUnderline: true,
         }}

components/specialties/index.js

@@ -8,13 +8,10 @@ import specialtiesData from "@/data/specialties.json";
 import { searchOnList } from "@/helper";
 
 function SpecialtiesPage() {
-  const [search, setSearch] = useState("");
   const [filteredSpecialties, setFilteredSpecialties] = useState(specialtiesData);
 
-  const changeSearch = text => setSearch(text);
+  const handleSearch = (value) =>
-
+    setFilteredSpecialties(searchOnList(specialtiesData, value, 'name'));
-  const handleSearch = () =>
-    setFilteredSpecialties(searchOnList(specialtiesData, search, 'name'));
 
   return (
     <div className="">
@@ -23,9 +20,7 @@ function SpecialtiesPage() {
         detail="تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:"
       >
         <SmSearch
-          search={search}
           placeholder="جستجوی تخصص"
-          changeSearch={changeSearch}
           handleSearch={handleSearch}
         />
       </HeadPageList>

helper/index.js

@@ -1,5 +1,6 @@
 import moment from "jalali-moment";
 import { toast } from "react-toastify";
+import specialties from "@/data/specialties.json";
 
 export const numberToArStyle = (num) => num.toLocaleString("ar-AE");
 
@@ -148,4 +149,29 @@ export const addKeyToList = (list, nameKey, nameValue) => {
   });
 
   return newList;
+}
+
+export function clearFilterParams(router, listRemove) {
+  const currentParams = new URLSearchParams(window.location.search);
+  const keysToRemove = listRemove;
+  keysToRemove.forEach((key) => currentParams.delete(key));
+  const queryString = currentParams.toString();
+  const newUrl = queryString ? `/doctors?${queryString}` : '/doctors';
+
+  router.push(newUrl);
+}
+
+export const filterList = (data) => {
+  const parentList = specialties.filter(item => !item.parent);
+  const childrenList = specialties.filter(item => item.parent);
+
+  const changedParentList = addKeyToList(parentList, 'label', 'name') || [];
+  const changedChildrenList = addKeyToList(childrenList, 'label', 'name') || [];
+
+  const filteredChildrenList = changedChildrenList.filter(item => item.parent === data.category.id);
+
+  return {
+    parentList: changedParentList,
+    childrenList: filteredChildrenList
+  }
 }