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

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 = {
-  category: "",
-  expertise: "",
-  turn: true,
-  gender: "هر دو",
-  degree: "متخصص",
-}
+// Data
+import specialties from "@/data/specialties.json";
 
 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>