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

app/clinics/page.js

@@ -1,19 +1,52 @@
-// app/clinics/page.js
+import { fetchReq } from "@/lib/req";
 import ClinicsPage from "@/components/clinics";
 import Layout from "@/components/layout/StLayout";
-import { fetchReq } from "@/lib/req";
 import { getStateInfo } from "@/lib/getStateInfo";
+import { buildClinicParams } from "@/helper";
 
-export default async function Clinics() {
+export default async function Clinics({ searchParams }) {
   const { matchedCity, matchedState } = getStateInfo();
   const API_URL = process.env.NEXT_PUBLIC_API_URL;
+  const stateParams = searchParams.state;
+  const cityParams = searchParams.city;
 
-  const clinics = await fetchReq(`${API_URL}/api/v1/clinics`);
+  let clinics;
+  try {
+    // Params
+    let newSearchParams = searchParams;
+
+    // Conditional State
+    if (stateParams) newSearchParams.state = stateParams;
+    else if (matchedState) newSearchParams.state = matchedState.name;
+
+    // Conditional City
+    if (cityParams) newSearchParams.city = cityParams;
+    else if (matchedCity && matchedCity.id !== "600")
+      newSearchParams.city = matchedCity.name;
+
+    console.log("newSearchParams");
+    console.log(newSearchParams);
+
+    const params = {
+      ...buildClinicParams(newSearchParams),
+      page: 1,
+      limit: 12,
+    };
+    console.log("params");
+    console.log(params);
+
+    // Req
+    clinics = await fetchReq(`${API_URL}/api/v1/clinics`, {
+      params,
+    });
+  } catch (err) {
+    console.log(`Error fetching doctors: ${err}`);
+  }
 
   return (
     <Layout name="/clinics">
       <ClinicsPage
-        clinics={clinics && clinics.data}
+        clinics={clinics}
         matchedCity={matchedCity}
         matchedState={matchedState}
       />