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/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>