round img of doctors && fix remove 'nobat724' value in city data for all pages && handle send req for filter clinics && filter list clinic for first time on load page && add component loading and handle it in page clinics

components/clinics/index.js

@@ -6,14 +6,28 @@ import List from "./list";
 import SearchBar from "./head/SearchBar";
 import HeadPageList from "@/app/component/head";
 import specialtiesData from "@/data/specialties.json";
+import { useSearchParams } from "next/navigation";
+
+// Data
+import states from "@/data/state.json";
+import cities from "@/data/city.json";
 
 function ClinicsPage({ clinics, matchedCity, matchedState }) {
-  const [filteredClinics, setFilteredClinics] = useState(clinics);
+  const searchParams = useSearchParams();
+  const [filteredClinics, setFilteredClinics] = useState(clinics.data);
+
+  const selectedState = searchParams.get("state") || matchedState?.name;
+  const selectedCity =
+    searchParams.get("city") ||
+    (matchedCity?.name && matchedCity?.id !== "600"
+      ? matchedCity?.name
+      : false);
 
   const [selected, setSelected] = useState({
-    province: matchedState?.name || "",
-    city: matchedCity?.name || "",
-    specialty: "",
+    province:
+      selectedState && states.find((item) => item.name === selectedState),
+    city: selectedCity && cities.find((item) => item.name === selectedCity),
+    specialty: searchParams.get("specialty") || "",
   });
 
   return (
@@ -30,7 +44,13 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
           setFilteredClinics={setFilteredClinics}
         />
       </HeadPageList>
-      <List selected={selected} clinics={filteredClinics} />
+      <List
+        limit={12}
+        selected={selected}
+        pages={clinics.page}
+        clinics={filteredClinics}
+        setFilteredClinics={setFilteredClinics}
+      />
     </div>
   );
 }