show only the first item in appo list & update appo item text && change key in /doctors page URL && handle setting and updating data on first modal filter load

components/doctors/index.js

@@ -12,21 +12,25 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 import specialties from "@/data/specialties.json";
 
 function DoctorsPage({ params, matchedCity, matchedState, list }) {
+  const fieldId = params.field;
   const [loading, setLoading] = useState(true);
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState({
     province: matchedState?.name || params?.province,
     city: matchedCity?.name || params?.city,
   });
+  console.log(specialties);
+  // console.log(fieldId);
+
+  const findItem = (id) => specialties.find((item) => item.id === id);
+  const isParent = findItem(fieldId) && findItem(fieldId).parent;
+  console.log(isParent);
+
   const findSpecial = (id) => specialties.find((item) => item.id === id);
 
   const [data, setData] = useState({
-    category: findSpecial(params.specialties)?.parent
-      ? findSpecial(findSpecial(params.specialties)?.parent)
-      : findSpecial(params.specialties) || "",
-    specialties: findSpecial(params.specialties)?.parent
-      ? findSpecial(params.specialties)
-      : "",
+    category: isParent ? findItem(isParent) : findItem(fieldId),
+    specialties: isParent && findItem(fieldId),
     turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
     gender: params.gender || "هر دو",
     degree: params.degree || "همه موارد",

components/doctors/modal/Content.js

@@ -12,27 +12,30 @@ function Content({ data, setData }) {
     router.push(`/doctors?${queryString}`);
   };
 
-  const changeData = (value, name, isCategory) => {
-    changeUrl(value, name);
-    const newData = data;
-    newData[name] = value;
-    const childrenList = specialties.filter((item) => item.parent);
-    const filteredChildrenList = childrenList.filter(
-      (item) => item.parent === value.id
-    );
+  const changeData = (value, name, isCategory, key) => {
+    const newData = { ...data, [name]: value };
+
     if (isCategory) {
-      newData.specialties = "";
-      newData.specialties = filteredChildrenList[0];
+      const childrenList = specialties.filter((item) => item.parent);
+      const filteredChildrenList = childrenList.filter(
+        (item) => item.parent === value.id
+      );
+      const firstChildren = filteredChildrenList[0];
+      console.log(firstChildren);
+
+      newData.specialties = firstChildren || "";
+      changeUrl(firstChildren || value, key);
+    } else {
+      changeUrl(value, key);
     }
+
     setData(newData);
     return newData;
   };
 
-  console.log(data);
-
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
-      <Form data={data} changeUrl={changeUrl} changeData={changeData} />
+      <Form data={data} changeData={changeData} />
     </div>
   );
 }

components/doctors/modal/form/CateSelector.js

@@ -0,0 +1,82 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function CateSelector({ list, value, isError, updateData, label }) {
+  return (
+    <Autocomplete
+      disablePortal
+      value={value}
+      options={list}
+      getOptionLabel={(option) => option?.name}
+      className="!w-full !rounded-lg auto-complete-selector"
+      onChange={(_, newValue) => updateData(newValue)}
+      sx={{
+        ...styleTextSelectRight,
+        // Hide Icon Number
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+          {
+            display: "none",
+          },
+        "& input[type=number]": {
+          MozAppearance: "textfield",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+        "& .MuiInputBase-root": {
+          borderRadius: 2,
+          padding: "0 !important",
+          height: {
+            xs: "43px !important",
+            sm: "43px !important",
+            md: "46px !important",
+            lg: "48px !important",
+          },
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #D7D7D7",
+        },
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: "#D7D7D7 !important",
+          },
+        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+          {
+            border: "1px solid #5559CE !important",
+          },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: isError ? "1px solid red !important" : "",
+        },
+      }}
+      renderOption={(props, option) => (
+        <Button
+          fullWidth
+          {...props}
+          key={option.id || props.id}
+          className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+        >
+          {option.name}
+        </Button>
+      )}
+      renderInput={(params) => (
+        <TextField
+          fullWidth
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <div className="absolute left-4">
+                <BottomSelect />
+              </div>
+            ),
+          }}
+          placeholder={label}
+          sx={{
+            borderRadius: "8px",
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default CateSelector;

components/doctors/modal/form/Radios.js

@@ -5,7 +5,7 @@ function Radios({ group, value, changeData, name }) {
     <RadioGroup
       value={value}
       className="radio-mui"
-      onChange={(e) => changeData(e.target.value, name)}
+      onChange={(e) => changeData(e.target.value, name, false, name)}
       sx={{
         "& .MuiFormControlLabel-root": {
           marginRight: "0 !important",

components/doctors/modal/form/index.js

@@ -1,37 +1,31 @@
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import SwitchContent from "./SwitchContent";
 import RadioContent from "./RadioContent";
 import { filterList } from "@/helper";
 import { useState } from "react";
+import CateSelector from "./CateSelector";
 
 const gender = ["زن", "مرد", "هر دو"];
 const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];
 
-function Form({ data, changeUrl, changeData }) {
-  const [list, setList] = useState({});
+function Form({ data, changeData }) {
   const { parentList, childrenList } = filterList(data);
-  console.log(filterList(data));
 
   return (
     <>
-      <AutoCompleteSelect
-        list={list.parentList}
-        sendAll={true}
+      <CateSelector
+        list={parentList}
         label="دسته بندی"
-        value={data.category?.name}
-        updateData={(value) => {
-          const newData = changeData(value, "specialties", true);
-          setList(filterList(newData));
-          console.log(newData);
-        }}
+        value={data.category}
+        updateData={(value) => changeData(value, "category", true, "field")}
       />
       {!!childrenList.length && (
         <div className="mt-[24px]">
-          <AutoCompleteSelect
-            list={list.childrenList}
-            updateData={(value) => changeData(value, "specialties")}
-            sendAll={true}
-            value={data.specialties?.name}
+          <CateSelector
+            list={childrenList}
+            updateData={(value) =>
+              changeData(value, "specialties", false, "field")
+            }
+            value={data.specialties}
             label="تخصص"
           />
         </div>