change key field to specialty, filter list doctors with name, remove loading state from doctors page, save state id in url

components/doctors/index.js

@@ -13,9 +13,12 @@ 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 [fields, setFields] = useState({
+    search: "",
+    stars: null,
+  });
   const [selected, setSelected] = useState({
     province: matchedState?.name || params?.province,
     city: matchedCity?.name || params?.city,
@@ -60,8 +63,9 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
         <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}
-            params={params}
+            fields={fields}
             setData={setData}
+            setFields={setFields}
             setDoctors={setDoctors}
             matchedCity={matchedCity}
             matchedState={matchedState}
@@ -71,7 +75,7 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
           <SortList data={data} setData={setData} />
         </div>
       </div>
-      <ListDoctors loading={loading} list={doctors} />
+      <ListDoctors list={doctors} />
     </div>
   );
 }