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

app/component/modalSearchCity/Content.js

@@ -23,10 +23,26 @@ function Content({
   };
 
   const handleFilter = () => {
+    const city =
+      selected &&
+      citySelected &&
+      filteredCities.find((item) => item.name === citySelected);
+
+    const current = new URLSearchParams(window.location.search);
+    current.set("province", city.id);
+    const newUrl = `${window.location.pathname}?${current.toString()}`;
+    window.history.replaceState({}, "", newUrl);
+
     handleSearch && handleSearch("");
     handleClose();
   };
 
+  const valState =
+    selected &&
+    citySelected &&
+    filteredCities.find((item) => item.name === citySelected) &&
+    citySelected;
+
   return (
     <div>
       <div className="flex justify-end w-full">
@@ -42,6 +58,7 @@ function Content({
           <AutoCompleteSelect
             value={selected.province}
             disabled={state}
+            sendAll={true}
             listboxProps={listboxProps}
             updateData={updateData}
             list={states}
@@ -51,12 +68,8 @@ function Content({
           <AutoCompleteSelect
             updateData={updateData}
             listboxProps={listboxProps}
-            value={
+            sendAll={true}
-              selected &&
+            value={valState}
-              citySelected &&
-              filteredCities.find((item) => item.name === citySelected) &&
-              citySelected
-            }
             list={filteredCities}
             name="city"
             label="شهر"

app/component/modalSearchCity/index.js

@@ -47,9 +47,9 @@ function ModalSearchCity({
 
   const updateData = (event, name) => {
     if (name === "province" && event !== provinceSelected) {
-      setSelected({ province: event, city: "" });
+      setSelected({ province: event.name, city: "" });
     } else {
-      setSelected({ ...selected, [name]: event });
+      setSelected({ ...selected, [name]: event.name });
     }
   };
 

app/doctors/page.js

@@ -12,10 +12,11 @@ async function Doctors({ searchParams }) {
 
     if (matchedCity) params.city = matchedCity?.id || null;
     if (matchedState) params.state = matchedState?.id || null;
+
     const response = await axios.get(
       "https://back-dev.clinic-pro.ir/api/v1/doctors",
       {
-        // params,
+        params,
       }
     );
     doctors = response.data.data;

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>
   );
 }

components/doctors/listDoctors/index.js

@@ -2,14 +2,14 @@ import doctors from "@/data/doctors.json";
 import Pagination from "@/app/component/Pagination";
 import ItemDoctor from "@/app/component/ItemDoctor";
 
-function ListDoctors({ loading, list }) {
+function ListDoctors({ list }) {
   return (
     <>
       <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
         {list && list.length ? (
           <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
             {list?.map((doctor) => (
-              <ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
+              <ItemDoctor key={doctor.id} doctor={doctor} />
             ))}
           </ul>
         ) : (

components/doctors/modal/ButtonApply.js

@@ -19,13 +19,13 @@ function ButtonApply({
     setLoading(true);
 
     const params = new URLSearchParams(window.location.search);
-    const field = params.get("field");
+    const specialty = params.get("specialty");
     const gender = params.get("gender");
     const degree = params.get("degree");
     const turn = params.get("turn");
 
     const requestData = {
-      field: field === "null" ? null : field,
+      specialty: specialty === "null" ? null : specialty,
       gender,
       degree,
       turn,
@@ -38,7 +38,7 @@ function ButtonApply({
       .then((res) => {
         if (res && res.data) setDoctors(res.data);
       })
-      .catch((err) => {})
+      .catch(() => {})
       .finally(() => {
         setOpen(false);
         setLoading(false);
@@ -50,7 +50,7 @@ function ButtonApply({
 
     const mappings = [
       {
-        key: "field",
+        key: "specialty",
         getValue: () => {
           if (data.category) {
             const children = specialties.filter(

components/doctors/modal/FilterModal.js

@@ -31,7 +31,7 @@ function FilterModal({
   const deleteData = () => {
     clearFilterParams(router, [
       "turn",
-      "field",
+      "specialty",
       "degree",
       "category",
       "gender",

components/doctors/modal/form/index.js

@@ -15,14 +15,14 @@ function Form({ data, changeData }) {
         list={parentList}
         label="دسته بندی"
         value={data.category}
-        updateData={(value) => changeData(value, "category", true, "field")}
+        updateData={(value) => changeData(value, "category", true, "specialty")}
       />
       {!!childrenList.length && (
         <div className="mt-[24px]">
           <CateSelector
             list={childrenList}
             updateData={(value) =>
-              changeData(value, "specialties", false, "field")
+              changeData(value, "specialties", false, "specialty")
             }
             value={data.specialties}
             label="تخصص"

components/doctors/search/SearchField.js

@@ -0,0 +1,34 @@
+import { TextField } from "@mui/material";
+import React from "react";
+
+function SearchField({ fields, setFields }) {
+  return (
+    <TextField
+      variant="standard"
+      value={fields}
+      onChange={(e) => setFields({ ...fields, search: e.target.value })}
+      InputProps={{
+        disableUnderline: true,
+      }}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "100% !important",
+        "& .MuiInput-root": {
+          padding: "0",
+          borderBottom: "none",
+        },
+        "& .MuiInputBase-input": {
+          color: "#6C757D",
+          padding: "0px",
+        },
+      }}
+      dir="rtl"
+      placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
+      className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+    />
+  );
+}
+
+export default SearchField;

components/doctors/search/SendReq.js

@@ -0,0 +1,53 @@
+import { Button } from "@mui/material";
+import SearchD from "@/components/icons/SearchD";
+import { useState } from "react";
+import { request } from "@/services/response";
+
+function SendReq({ fields, setDoctors, matchedCity, matchedState }) {
+  const [loading, setLoading] = useState(false);
+
+  const filterData = () => {
+    setLoading(true);
+
+    const params = new URLSearchParams(window.location.search);
+    const specialty = params.get("specialty");
+    const gender = params.get("gender");
+    const degree = params.get("degree");
+    const turn = params.get("turn");
+
+    const requestData = {
+      specialty: specialty === "null" ? null : specialty,
+      gender,
+      degree,
+      turn,
+      city: matchedCity?.id || null,
+      state: matchedState?.id || null,
+      name: fields.search,
+    };
+
+    request
+      .getDoctors(requestData)
+      .then((res) => {
+        if (res && res.data) setDoctors(res.data);
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <Button
+      loading={loading}
+      onClick={filterData}
+      className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
+        !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
+    >
+      <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
+        {!loading && <SearchD />}
+      </div>
+    </Button>
+  );
+}
+
+export default SendReq;

components/doctors/search/index.js

@@ -1,13 +1,16 @@
-import { Button, ButtonGroup, TextField } from "@mui/material";
+import { Button, ButtonGroup } from "@mui/material";
 import SettingD from "@/components/icons/SettingD";
 import ArrowBottomD from "@/components/icons/ArrowBottomD";
-import SearchD from "@/components/icons/SearchD";
 import FilterModal from "../modal/FilterModal";
+import SendReq from "./SendReq";
+import { useState } from "react";
+import SearchField from "./SearchField";
 
 function SearchBar({
   data,
+  fields,
   setData,
-  params,
+  setFields,
   setDoctors,
   matchedCity,
   matchedState,
@@ -18,8 +21,8 @@ function SearchBar({
     <ButtonGroup
       variant="contained"
       className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden 
-            flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-            !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
+        !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
       <FilterModal
         data={data}
@@ -31,9 +34,9 @@ function SearchBar({
         setConfirmedData={setConfirmedData}
       >
         <Button
-          className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
-          variant="contained"
           color="secondary"
+          variant="contained"
+          className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
         >
           <div className="min-w-[20px] min-h-[20px]">
             <SettingD />
@@ -46,38 +49,13 @@ function SearchBar({
           </div>
         </Button>
       </FilterModal>
-      <TextField
+      <SearchField fields={fields} setFields={setFields} />
-        variant="standard"
+      <SendReq
-        defaultValue={params.search || ""}
+        fields={fields}
-        InputProps={{
+        setDoctors={setDoctors}
-          disableUnderline: true,
+        matchedCity={matchedCity}
-        }}
+        matchedState={matchedState}
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          width: "100% !important",
-          "& .MuiInput-root": {
-            padding: "0",
-            borderBottom: "none",
-          },
-          "& .MuiInputBase-input": {
-            color: "#6C757D",
-            padding: "0px",
-          },
-        }}
-        placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
-        dir="rtl"
-        className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
       />
-      <Button
-        className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
-                !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
-      >
-        <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
-          <SearchD />
-        </div>
-      </Button>
     </ButtonGroup>
   );
 }