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

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)]
-            !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
+        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]"
     >
       <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
-        variant="standard"
-        defaultValue={params.search || ""}
-        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",
-          },
-        }}
-        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]`}
+      <SearchField fields={fields} setFields={setFields} />
+      <SendReq
+        fields={fields}
+        setDoctors={setDoctors}
+        matchedCity={matchedCity}
+        matchedState={matchedState}
       />
-      <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>
   );
 }