last update

components/clinics/head/SearchBar.js

@@ -5,7 +5,7 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 import { useState } from "react";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
 
-function SearchBar({ selected, setSelected, state, handleSearch }) {
+function SearchBar({ selected, setSelected, state, handleSearch, changeSearch, search }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -26,8 +26,9 @@ function SearchBar({ selected, setSelected, state, handleSearch }) {
         <ButtonFilter setOpen={setOpen} selected={selected} />
       </ModalSearchCity>
       <TextField
+        value={search}
         variant="standard"
-        onChange={e => handleSearch(e.target.value)}
+        onChange={e => changeSearch(e.target.value)}
         InputProps={{
           disableUnderline: true,
         }}
@@ -42,11 +43,12 @@ function SearchBar({ selected, setSelected, state, handleSearch }) {
         className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
       />
       <Button
+        onClick={handleSearch}
         className="
-                    !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !min-w-fit
-                    !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
-                    !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
-                "
+          !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !min-w-fit
+          !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
+          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
+        "
       >
         <SearchD />
       </Button>

components/clinics/index.js

@@ -10,6 +10,7 @@ import HeadPageList from "@/app/component/head";
 
 function ClinicsPage({ matchedCity, matchedState }) {
   const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
   const [filteredClinics, setFilteredClinics] = useState(clinics)
 
   const [selected, setSelected] = useState({
@@ -23,11 +24,13 @@ function ClinicsPage({ matchedCity, matchedState }) {
     }, 2000);
   }, []);
 
-  const handleSearch = text => {
-    setFilteredClinics(
-      searchOnList(clinics, text, 'title')
-    );
-  }
+  const changeSearch = text => setSearch(text);
+
+  const handleSearch = () => {
+    const searchOnName = searchOnList(clinics, search, 'title')
+    const searchOnLocation = searchOnList(searchOnName, selected.city, 'city')
+    setFilteredClinics(searchOnLocation);
+  };
 
   return (
     <div>
@@ -36,9 +39,11 @@ function ClinicsPage({ matchedCity, matchedState }) {
         detail="در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید"
       >
         <SearchBar
+          search={search}
           selected={selected}
           setSelected={setSelected}
           state={matchedState?.name}
+          changeSearch={changeSearch}
           handleSearch={handleSearch}
         />
       </HeadPageList>

components/doctors/index.js

@@ -18,9 +18,9 @@ function DoctorsPage({ params, matchedCity, matchedState }) {
 
   const [data, setData] = useState({
     expertise: "",
+    turn: true,
     gender: 0,
     degree: 0,
-    turn: true,
   });
 
   useEffect(() => {

components/doctors/modal/Content.js

@@ -2,6 +2,7 @@ import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import RadioContent from "./RadioContent";
 import { Switch } from "@mui/material";
 import { category, expertise } from "./listSelector";
+import specialties from "@/data/specialties.json";
 const group1 = ["خانم", "آقا", "هر دو"];
 const group2 = ["فوق تخصص", "دکترای تخصصی", "متخصص", "دکتری"];
 
@@ -11,6 +12,8 @@ function Content({ data, setData }) {
   const changeData = (value, name) => {
     setData({ ...data, [name]: value });
   };
+  const parentList = specialties.map(item => !item.parent);
+  const childrenList = specialties.map(item => item.parent);
 
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">

components/doctors/sortlist/SelectSort.js

@@ -11,16 +11,14 @@ const listSort = [
 ];
 
 function SelectSort() {
-  const [sort, setSort] = useState(3);
+  const [sort, setSort] = useState("");
 
   const handleChange = (event) => setSort(event.target.value);
-  console.log(sort);
-
 
   return (
     <Select
-      defaultValue={sort}
       displayEmpty
+      defaultValue={sort}
       onChange={handleChange}
       className="!w-[198px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
       renderValue={(value) => {
@@ -29,14 +27,15 @@ function SelectSort() {
             <SvgIcon color="primary">
               <SortD />
             </SvgIcon>
-            <ul className="flex items-center justify-start gap-1">
-            {Array(sort).fill({}).map((_, idx) => (
-              <li key={idx}>
-                <StarDI />
-              </li>
-            ))}
-            </ul>
-            {/* {value || "مرتب سازی"} */}
+            {value ? (
+              <ul className="flex items-center justify-start gap-1">
+                {Array(sort).fill({}).map((_, idx) => (
+                  <li key={idx}>
+                    <StarDI />
+                  </li>
+                ))}
+              </ul>
+            ) : "مرتب سازی"}
           </div>
         );
       }}
@@ -62,14 +61,10 @@ function SelectSort() {
           className="!flex !flex-col !items-start !w-full hover:!bg-transparent"
         >
           <div value={item.id} className="!p-2 !mr-2 !w-[calc(100%_-_16px)] flex items-center justify-start">
-            {/* {item.label} */}
             {Array(item.label).fill({}).map((_, idx) => (
               <StarDI key={idx} />
             ))}
           </div>
-          {/* {listSort.length > idx + 1 && (
-            <span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
-          )} */}
         </MenuItem>
       ))}
     </Select>

components/searchHead/SmSearch.js

@@ -1,7 +1,7 @@
 import SearchD from "@/components/icons/SearchD";
 import { Button, ButtonGroup, TextField } from "@mui/material";
 
-function SmSearch({ placeholder, searchHandler }) {
+function SmSearch({ placeholder, changeSearch, handleSearch, search }) {
   return (
     <ButtonGroup
       variant="contained"
@@ -10,7 +10,9 @@ function SmSearch({ placeholder, searchHandler }) {
             !h-fit !p-1"
     >
       <TextField
+        value={search}
         variant="standard"
+        onChange={e => changeSearch(e.target.value)}
         InputProps={{
           disableUnderline: true,
         }}
@@ -26,17 +28,17 @@ function SmSearch({ placeholder, searchHandler }) {
         }}
         placeholder={placeholder}
         dir="rtl"
-        onChange={e => searchHandler(e)}
         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]`}
       />
       <Button
+        onClick={handleSearch}
         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] 
-                    !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
-                    !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
-                    !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
-                "
+          !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
+          !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
+          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
+          !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
+          !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
+        "
       >
         <SearchD />
       </Button>

components/specialties/index.js

@@ -8,13 +8,13 @@ import specialtiesData from "@/data/specialties.json";
 import { searchOnList } from "@/helper";
 
 function SpecialtiesPage() {
+  const [search, setSearch] = useState("");
   const [filteredSpecialties, setFilteredSpecialties] = useState(specialtiesData);
 
-  const searchHandler = (e) => {
-    setFilteredSpecialties(
-      searchOnList(specialtiesData, e.target.value, 'name')
-    );
-  };
+  const changeSearch = text => setSearch(text);
+
+  const handleSearch = () =>
+    setFilteredSpecialties(searchOnList(specialtiesData, search, 'name'));
 
   return (
     <div className="">
@@ -22,7 +22,12 @@ function SpecialtiesPage() {
         title="تخصص مورد نظر شما چیست؟"
         detail="تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:"
       >
-        <SmSearch placeholder="جستجوی تخصص" searchHandler={searchHandler} />
+        <SmSearch
+          search={search}
+          placeholder="جستجوی تخصص"
+          changeSearch={changeSearch}
+          handleSearch={handleSearch}
+        />
       </HeadPageList>
       <List specialties={filteredSpecialties} />
     </div>

data/clinics.json

@@ -61,7 +61,8 @@
       "اطفال"
     ],
     "doctors": "۵۰",
+    "city": "اهواز",
     "location": "اهواز، کیان آباد، خیابان ۱۶ غربی، پلاک ۱۰",
     "hours_of_work": "شنبه تا سه شنبه ساعت ۱۶ تا ۲۲"
   }
-]
+]