handle change data in doctor model, set previous data when user close modal, update list doctor after update data and change key name in url

components/doctors/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import SearchBar from "./search";
 import SortList from "./sortlist";
 import { Button } from "@mui/material";
@@ -14,6 +14,7 @@ import specialties from "@/data/specialties.json";
 function DoctorsPage({ params, matchedCity, matchedState, list }) {
   const fieldId = params.field;
   const [loading, setLoading] = useState(true);
+  const [doctors, setDoctors] = useState(list);
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState({
     province: matchedState?.name || params?.province,
@@ -22,20 +23,16 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
 
   const findItem = (id) => specialties.find((item) => item.id === id);
   const isParent = findItem(fieldId) && findItem(fieldId).parent;
-
-  const [data, setData] = useState({
+  const defaultData = {
     category: isParent ? findItem(isParent) : findItem(fieldId),
     specialties: isParent && findItem(fieldId),
     turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
     gender: params.gender || "هر دو",
     degree: params.degree || "همه موارد",
-  });
+  };
 
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
+  const [data, setData] = useState(defaultData);
+  const [confirmedData, setConfirmedData] = useState(defaultData);
 
   return (
     <div className="pt-[95px] sm:pt-[120px] padding-responsive">
@@ -44,6 +41,7 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
           open={open}
           setOpen={setOpen}
           selected={selected}
+          state={matchedState}
           setSelected={setSelected}
         >
           <Button
@@ -60,11 +58,20 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
           </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} />
+          <SearchBar
+            data={data}
+            params={params}
+            setData={setData}
+            setDoctors={setDoctors}
+            matchedCity={matchedCity}
+            matchedState={matchedState}
+            confirmedData={confirmedData}
+            setConfirmedData={setConfirmedData}
+          />
           <SortList data={data} setData={setData} />
         </div>
       </div>
-      <ListDoctors loading={loading} list={list} />
+      <ListDoctors loading={loading} list={doctors} />
     </div>
   );
 }