handle save some data and send server correct & change component form & clean code & fix bugs

components/panel/addDoctor/form/index.js

@@ -2,17 +2,9 @@ import { useEffect, useState } from "react";
 import FieldDate from "./fields/FieldDate";
 import RadioGender from "./fields/RadioGender";
 import SendReq from "./sendReq";
-import Selector from "./fields/Selector";
-
-// Components
-import EditField from "@/app/component/fields/EditField";
 import ContentText from "@/app/component/ContentText";
-
-// Data
-import specialties from "@/data/specialties.json";
-import education from "@/data/education.json";
-import MultipleSelect from "@/app/component/selectors/MultipleSelect";
 import { request } from "@/services/response";
+import Fields from "./Fields";
 
 const validate_medical_number = {
   min: 1,
@@ -41,7 +33,6 @@ function Form({ image, data, setData, resetData }) {
     const validateValue = parseValue > max ? data[name].value : value;
     changeData(validateValue, type, name);
   };
-  const filteredSpe = specialties.filter((item) => item.parent);
 
   useEffect(() => {
     request
@@ -49,94 +40,30 @@ function Form({ image, data, setData, resetData }) {
       .then((res) => {
         setServices(res.data);
       })
-      .catch((err) => {
-        console.log(err);
+      .catch(() => {
+        //
       });
   }, []);
-  console.log(services);
 
   return (
     <>
       <div className="mt-[24px] sm-modal scroll-mui md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
-        <ContentText text="نام و نام خانوادگی">
-          <EditField
-            isTransparent={true}
-            iconGray={true}
-            changeData={changeData}
-            data={data?.name}
-            placeholder={data?.name.placeholder}
-            name="name"
-          />
-        </ContentText>
-        <ContentText text="شماره نظام پزشکی">
-          <EditField
-            isTransparent={true}
-            iconGray={true}
-            changeData={updateNum}
-            data={data?.medical_system_number}
-            noDisable={true}
-            type="number"
-            placeholder={data?.medical_system_number.placeholder}
-            name="medical_system_number"
-            props={{
-              inputProps: validate_medical_number,
-            }}
-          />
-        </ContentText>
-        <ContentText text="تخصص">
-          <Selector
-            updateData={changeData}
-            data={data?.expertise.value}
-            label="انتخاب کنید..."
-            name="expertise"
-            list={filteredSpe}
-            nameKey="name"
-          />
-        </ContentText>
-        <ContentText text="مدرک">
-          <Selector
-            updateData={changeData}
-            label="انتخاب کنید..."
-            name="degree"
-            data={data?.degree.value}
-            list={education}
-            nameKey="label"
-          />
-        </ContentText>
-        <ContentText text="مهارت ها">
-          <MultipleSelect
-            name="skills"
-            list={services}
-            updateData={changeData}
-            value={data?.skills.value}
-          />
-        </ContentText>
-        <ContentText text="شماره موبایل">
-          <EditField
-            isTransparent={true}
-            iconGray={true}
-            changeData={changeData}
-            data={data?.phone}
-            type="number"
-            placeholder={data?.phone.placeholder}
-            name="phone"
-          />
-        </ContentText>
-        <FieldDate changeListData={changeData} data={data?.time_work} />
-        <ContentText text="جنسیت">
-          <RadioGender changeData={changeData} name="gender" />
-        </ContentText>
-        <ContentText text="توضیحات">
-          <EditField
-            multiline={5}
-            placeholder="درباره سوابق خود توضیحاتی بنویسید..."
-            isTransparent={true}
-            iconGray={true}
-            changeData={changeData}
-            data={data?.description}
-            name="description"
-          />
-        </ContentText>
+        <Fields
+          data={data}
+          services={services}
+          changeData={changeData}
+          updateNum={updateNum}
+        />
+        <div className="flex flex-col gap-y-[24px]">
+          <FieldDate changeListData={changeData} data={data?.time_work} />
+          <ContentText text="جنسیت">
+            <RadioGender
+              changeData={changeData}
+              data={data?.gender.value}
+              name="gender"
+            />
+          </ContentText>
+        </div>
       </div>
       <SendReq img={image} data={data} resetData={resetData} />
     </>