<iman< update new register

1 files changed, 117 insertions, 78 deletions

diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index 520bba51..7a30a3d8 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -1,18 +1,19 @@
-import { yupResolver } from '@hookform/resolvers/yup'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import * as Yup from 'yup'
-import cityApi from '../api/cityApi'
-import { Controller, useForm } from 'react-hook-form'
-import districtApi from '../api/districtApi'
-import subDistrictApi from '../api/subDistrictApi'
-import editAddressApi from '../api/editAddressApi'
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import { toast } from 'react-hot-toast'
-import Menu from '@/lib/auth/components/Menu'
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import * as Yup from 'yup';
+import cityApi from '../api/cityApi';
+import { Controller, useForm } from 'react-hook-form';
+import districtApi from '../api/districtApi';
+import subDistrictApi from '../api/subDistrictApi';
+import editAddressApi from '../api/editAddressApi';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import { toast } from 'react-hot-toast';
+import Menu from '@/lib/auth/components/Menu';
 
 const EditAddress = ({ id, defaultValues }) => {
-  const router = useRouter()
+  console.log('defaultValues', defaultValues);
+  const router = useRouter();
   const {
     register,
     formState: { errors },
@@ -20,87 +21,90 @@ const EditAddress = ({ id, defaultValues }) => {
     watch,
     setValue,
     getValues,
-    control
+    control,
   } = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues
-  })
+    defaultValues,
+  });
 
-  const [cities, setCities] = useState([])
-  const [districts, setDistricts] = useState([])
-  const [subDistricts, setSubDistricts] = useState([])
+  const [cities, setCities] = useState([]);
+  const [districts, setDistricts] = useState([]);
+  const [subDistricts, setSubDistricts] = useState([]);
 
   useEffect(() => {
     const loadCities = async () => {
-      let dataCities = await cityApi()
+      let dataCities = await cityApi();
       dataCities = dataCities.map((city) => ({
         value: city.id,
-        label: city.name
-      }))
-      setCities(dataCities)
-    }
-    loadCities()
-  }, [])
+        label: city.name,
+      }));
+      setCities(dataCities);
+    };
+    loadCities();
+  }, []);
 
-  const watchCity = watch('city')
+  const watchCity = watch('city');
   useEffect(() => {
-    setValue('district', '')
+    setValue('district', '');
     if (watchCity) {
       const loadDistricts = async () => {
-        let dataDistricts = await districtApi({ cityId: watchCity })
+        let dataDistricts = await districtApi({ cityId: watchCity });
         dataDistricts = dataDistricts.map((district) => ({
           value: district.id,
-          label: district.name
-        }))
-        setDistricts(dataDistricts)
-        let oldDistrict = getValues('oldDistrict')
+          label: district.name,
+        }));
+        setDistricts(dataDistricts);
+        let oldDistrict = getValues('oldDistrict');
         if (oldDistrict) {
-          setValue('district', oldDistrict)
-          setValue('oldDistrict', '')
+          setValue('district', oldDistrict);
+          setValue('oldDistrict', '');
         }
-      }
-      loadDistricts()
+      };
+      loadDistricts();
     }
-  }, [watchCity, setValue, getValues])
+  }, [watchCity, setValue, getValues]);
 
-  const watchDistrict = watch('district')
+  const watchDistrict = watch('district');
   useEffect(() => {
-    setValue('subDistrict', '')
+    setValue('subDistrict', '');
     if (watchDistrict) {
       const loadSubDistricts = async () => {
         let dataSubDistricts = await subDistrictApi({
-          districtId: watchDistrict
-        })
+          districtId: watchDistrict,
+        });
         dataSubDistricts = dataSubDistricts.map((district) => ({
           value: district.id,
-          label: district.name
-        }))
-        setSubDistricts(dataSubDistricts)
-        let oldSubDistrict = getValues('oldSubDistrict')
+          label: district.name,
+        }));
+        setSubDistricts(dataSubDistricts);
+        let oldSubDistrict = getValues('oldSubDistrict');
 
         if (oldSubDistrict) {
-          setValue('subDistrict', oldSubDistrict)
-          setValue('oldSubDistrict', '')
+          setValue('subDistrict', oldSubDistrict);
+          setValue('oldSubDistrict', '');
         }
-      }
-      loadSubDistricts()
+      };
+      loadSubDistricts();
     }
-  }, [watchDistrict, setValue, getValues])
+  }, [watchDistrict, setValue, getValues]);
 
   const onSubmitHandler = async (values) => {
     const data = {
       ...values,
+      phone: values.mobile,
+      street: values.street,
       city_id: values.city,
       district_id: values.district,
-      sub_district_id: values.subDistrict
-    }
+      sub_district_id: values.subDistrict,
+    };
+    console.log('data', data);
 
-    const address = await editAddressApi({ id, data })
+    const address = await editAddressApi({ id, data });
     if (address?.id) {
-      toast.success('Berhasil mengubah alamat')
-      router.back()
+      toast.success('Berhasil mengubah alamat');
+      router.back();
     }
-  }
+  };
 
   return (
     <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
@@ -108,7 +112,9 @@ const EditAddress = ({ id, defaultValues }) => {
         <Menu />
       </div>
       <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
-        <h1 className='text-title-sm font-semibold mb-6 hidden md:block'>Ubah Alamat</h1>
+        <h1 className='text-title-sm font-semibold mb-6 hidden md:block'>
+          Ubah Alamat
+        </h1>
         <form onSubmit={handleSubmit(onSubmitHandler)}>
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
             <div>
@@ -117,10 +123,16 @@ const EditAddress = ({ id, defaultValues }) => {
                 name='type'
                 control={control}
                 render={(props) => (
-                  <HookFormSelect {...props} isSearchable={false} options={types} />
+                  <HookFormSelect
+                    {...props}
+                    isSearchable={false}
+                    options={types}
+                  />
                 )}
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.type?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.type?.message}
+              </div>
             </div>
 
             <div>
@@ -131,7 +143,9 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.name?.message}
+              </div>
             </div>
 
             <div>
@@ -142,7 +156,9 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='email'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.email?.message}
+              </div>
             </div>
 
             <div>
@@ -153,7 +169,9 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='tel'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.mobile?.message}
+              </div>
             </div>
 
             <div>
@@ -164,7 +182,9 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.street?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.street?.message}
+              </div>
             </div>
 
             <div>
@@ -175,7 +195,9 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='number'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.zip?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.zip?.message}
+              </div>
             </div>
 
             <div>
@@ -183,9 +205,13 @@ const EditAddress = ({ id, defaultValues }) => {
               <Controller
                 name='city'
                 control={control}
-                render={(props) => <HookFormSelect {...props} options={cities} />}
+                render={(props) => (
+                  <HookFormSelect {...props} options={cities} />
+                )}
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.city?.message}
+              </div>
             </div>
 
             <div>
@@ -194,10 +220,16 @@ const EditAddress = ({ id, defaultValues }) => {
                 name='district'
                 control={control}
                 render={(props) => (
-                  <HookFormSelect {...props} options={districts} disabled={!watchCity} />
+                  <HookFormSelect
+                    {...props}
+                    options={districts}
+                    disabled={!watchCity}
+                  />
                 )}
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.district?.message}
+              </div>
             </div>
 
             <div>
@@ -206,19 +238,26 @@ const EditAddress = ({ id, defaultValues }) => {
                 name='subDistrict'
                 control={control}
                 render={(props) => (
-                  <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
+                  <HookFormSelect
+                    {...props}
+                    options={subDistricts}
+                    disabled={!watchDistrict}
+                  />
                 )}
               />
             </div>
           </div>
-          <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
+          <button
+            type='submit'
+            className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+          >
             Simpan
           </button>
         </form>
       </div>
     </div>
-  )
-}
+  );
+};
 
 const validationSchema = Yup.object().shape({
   type: Yup.string().required('Harus di-pilih'),
@@ -228,14 +267,14 @@ const validationSchema = Yup.object().shape({
   street: Yup.string().required('Harus di-isi'),
   zip: Yup.string().required('Harus di-isi'),
   city: Yup.string().required('Harus di-pilih'),
-  district: Yup.string().required('Harus di-pilih')
-})
+  district: Yup.string().required('Harus di-pilih'),
+});
 
 const types = [
   { value: 'contact', label: 'Contact Address' },
   { value: 'invoice', label: 'Invoice Address' },
   { value: 'delivery', label: 'Delivery Address' },
-  { value: 'other', label: 'Other Address' }
-]
+  { value: 'other', label: 'Other Address' },
+];
 
-export default EditAddress
+export default EditAddress;