autoselector page clinic item and specialties & dashboard responsive & change components & change package universal-cookie to js-cookie

app/component/head/index.js

@@ -3,10 +3,10 @@ function HeadPageList({ children, title, detail }) {
     <div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
       <div
         className="
-                padding-responsive flex flex-col items-center gap-[25px]
+          padding-responsive flex flex-col items-center gap-[25px]
-                pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
+          pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
-                pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px]
+          pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px]
-            "
+        "
       >
         <h1 className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold">
           {title}

components/clinic/components/doctors/List.js

@@ -10,7 +10,7 @@ function List({ doctors, loading }) {
         ))}
       </ul>
       <div className="mt-[56px] flex justify-center">
-        <Pagination />
+        <Pagination list={doctors} itemsPerPage={12} />
       </div>
     </>
   );

components/clinic/components/doctors/SearchBar.js

@@ -1,11 +0,0 @@
-import SmSearch from "@/components/searchHead/SmSearch";
-
-function SearchBar() {
-  return (
-    <div className="flex justify-center">
-      <SmSearch placeholder="جستجوی پزشک یا تخصص" />
-    </div>
-  );
-}
-
-export default SearchBar;

components/clinic/components/doctors/index.js

@@ -1,11 +1,26 @@
+"use client";
+
+import SmSearch from "@/components/searchHead/SmSearch";
 import List from "./List";
-import SearchBar from "./SearchBar";
+import { useState } from "react";
+import { searchOnList } from "@/helper";
 
 function Doctors({ doctors, loading }) {
+  const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
+
+  const handleSearch = (value) =>
+    setFilteredSpecialties(searchOnList(doctors, value, "name"));
+
   return (
     <div className="opacity-page">
-      <SearchBar />
+      <div className="flex justify-center">
-      <List loading={loading} doctors={doctors} />
+        <SmSearch
+          data={doctors}
+          handleSearch={handleSearch}
+          placeholder="جستجوی پزشک یا تخصص"
+        />
+      </div>
+      <List loading={loading} doctors={filteredSpecialties} />
     </div>
   );
 }

components/dashboard/userAccount/content/HeadTab.js

@@ -21,7 +21,7 @@ function HeadTab({
         />
       ) : (
         <>
-          <div className="!hidden md:!flex !w-full">
+          <div className="!w-full mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
             <Tabs
               style={{
                 ".MuiTabs-indicator": {

components/doctor/index.js

@@ -5,7 +5,6 @@ import AppointmentList from "./appointmentList";
 import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
-import Poster from "./poster";
 
 function DoctorPage({ doctor }) {
   const [loading, setLoading] = useState(true);

components/searchHead/SmSearch.js

@@ -1,36 +1,59 @@
 import SearchD from "@/components/icons/SearchD";
-import { Button, ButtonGroup, TextField } from "@mui/material";
+import { Autocomplete, TextField, Button, ButtonGroup } from "@mui/material";
+import { useState } from "react";
+
+function SmSearch({ placeholder, handleSearch, data }) {
+  const [inputValue, setInputValue] = useState("");
+  const [selectedOption, setSelectedOption] = useState(null);
 
-function SmSearch({ placeholder, handleSearch }) {
   return (
     <ButtonGroup
       variant="contained"
       className="!bg-[#FFF] !w-full lg:!w-2/3 !mt-[15px] !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-fit !p-1"
+        !h-fit !p-1"
     >
-      <TextField
+      <Autocomplete
-        variant="standard"
+        freeSolo
-        onChange={(e) => handleSearch(e.target.value)}
+        options={data}
-        InputProps={{
+        getOptionLabel={(option) => option.name}
-          disableUnderline: true,
+        inputValue={inputValue}
+        className="!w-full"
+        onInputChange={(event, newInputValue) => {
+          setInputValue(newInputValue);
+          handleSearch(newInputValue);
         }}
-        sx={{
+        onChange={(event, newValue) => {
-          background: "transparent !important",
+          setSelectedOption(newValue);
-          "& .MuiInputBase-root": { height: "100%" },
+          handleSearch(newValue ? newValue.name : "");
-          "& .MuiInput-root": { borderBottom: "none" },
-          "& .MuiInputBase-input": {
-            background: "transparent",
-            color: "#7E7E7E",
-            padding: "0",
-          },
         }}
-        placeholder={placeholder}
+        renderInput={(params) => (
-        dir="rtl"
+          <TextField
-        className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+            {...params}
+            variant="standard"
+            placeholder={placeholder}
+            dir="rtl"
+            InputProps={{
+              ...params.InputProps,
+              disableUnderline: true,
+              style: { height: "100%" },
+            }}
+            sx={{
+              background: "transparent !important",
+              "& .MuiInputBase-input": {
+                background: "#FAFAFA",
+                color: "#6C757D",
+                padding: "0 16px",
+                fontSize: "14px",
+                fontFamily: "inherit",
+              },
+            }}
+            className="!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal"
+          />
+        )}
       />
       <Button
-        onClick={handleSearch}
+        onClick={() => handleSearch(inputValue)}
         className="
           !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
           !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 

components/specialties/index.js

@@ -20,7 +20,11 @@ function SpecialtiesPage() {
         title="تخصص مورد نظر شما چیست؟"
         detail="تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:"
       >
-        <SmSearch placeholder="جستجوی تخصص" handleSearch={handleSearch} />
+        <SmSearch
+          data={specialtiesData}
+          placeholder="جستجوی تخصص"
+          handleSearch={handleSearch}
+        />
       </HeadPageList>
       <List specialties={filteredSpecialties} />
     </div>

package-lock.json

@@ -26,6 +26,7 @@
         "i": "^0.3.7",
         "jalaali-react-date-picker": "^1.0.18",
         "jalali-moment": "^3.3.11",
+        "js-cookie": "^3.0.5",
         "next": "^14.2.20",
         "next-themes": "^0.3.0",
         "npm": "^10.8.2",
@@ -39,8 +40,7 @@
         "styled-components": "^6.1.11",
         "stylis": "^4.3.4",
         "stylis-plugin-rtl": "^2.1.1",
-        "swiper": "^11.1.9",
+        "swiper": "^11.1.9"
-        "universal-cookie": "^7.2.1"
       },
       "devDependencies": {
         "cross-env": "^7.0.3",
@@ -5409,12 +5409,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
-      "license": "MIT"
-    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
@@ -8010,15 +8004,6 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
-    "node_modules/cookie": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
-      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
@@ -13594,6 +13579,15 @@
       "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -22545,16 +22539,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/universal-cookie": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.2.2.tgz",
-      "integrity": "sha512-fMiOcS3TmzP2x5QV26pIH3mvhexLIT0HmPa3V7Q7knRfT9HG6kTwq02HZGLPw0sAOXrAmotElGRvTLCMbJsvxQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/cookie": "^0.6.0",
-        "cookie": "^0.7.2"
-      }
-    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",

package.json

@@ -27,6 +27,7 @@
     "i": "^0.3.7",
     "jalaali-react-date-picker": "^1.0.18",
     "jalali-moment": "^3.3.11",
+    "js-cookie": "^3.0.5",
     "next": "^14.2.20",
     "next-themes": "^0.3.0",
     "npm": "^10.8.2",
@@ -40,8 +41,7 @@
     "styled-components": "^6.1.11",
     "stylis": "^4.3.4",
     "stylis-plugin-rtl": "^2.1.1",
-    "swiper": "^11.1.9",
+    "swiper": "^11.1.9"
-    "universal-cookie": "^7.2.1"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",

services/api.js

@@ -1,30 +1,28 @@
 import axios from "axios";
-import Cookies from "universal-cookie";
+import Cookies from "js-cookie";
 import "react-toastify/dist/ReactToastify.css";
 
-const cookies = new Cookies();
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
 
+const token = Cookies.get("access");
+console.log(token);
+
 const api = axios.create({
   baseURL: BASE_URL,
   headers: {
     "Content-Type": "application/json",
-    Authorization: `Bearer ${cookies.get("access")}`,
+    Authorization: token ? `Bearer ${token}` : "",
-    Cookie:
-      "SESS318c6addec00b99e23988eb0e987826b=HpiIBmiGFlESY-f3IhkXEE5sq0mKVT-loNm5TiTN-UstIzn1",
   },
 });
 
 api.interceptors.response.use(
   (response) => {
     console.log(response);
-
     return response.data;
   },
   (error) => {
-    console.log(error);
+    console.error(error);
-
+    return Promise.reject(error);
-    return error;
   }
 );
 

services/response.js

@@ -25,8 +25,6 @@ export const request = {
         "Content-Type": "application/x-www-form-urlencoded",
         Authorization: "",
         withCredentials: true,
-        Cookie:
-          "SESS318c6addec00b99e23988eb0e987826b=HpiIBmiGFlESY-f3IhkXEE5sq0mKVT-loNm5TiTN-UstIzn1",
       },
     });
   },

utils/index.js

@@ -1,7 +1,5 @@
-import Cookies from "universal-cookie";
+import Cookies from "js-cookie";
 
-const cookies = new Cookies();
+const removeToken = () => Cookies.remove("token", { path: "/" });
-
-const removeToken = () => cookies.remove("token", { path: "/" });
 
 export { removeToken };