summaryrefslogtreecommitdiff
path: root/src/lib/address/components/EditAddress.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/address/components/EditAddress.jsx')
-rw-r--r--src/lib/address/components/EditAddress.jsx196
1 files changed, 76 insertions, 120 deletions
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index b866a1e6..0cfa013a 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -1,14 +1,14 @@
-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 { 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'
const EditAddress = ({ id, defaultValues }) => {
const router = useRouter()
@@ -19,10 +19,10 @@ const EditAddress = ({ id, defaultValues }) => {
watch,
setValue,
getValues,
- control,
+ control
} = useForm({
resolver: yupResolver(validationSchema),
- defaultValues,
+ defaultValues
})
const [cities, setCities] = useState([])
@@ -34,52 +34,52 @@ const EditAddress = ({ id, defaultValues }) => {
let dataCities = await cityApi()
dataCities = dataCities.map((city) => ({
value: city.id,
- label: city.name,
+ 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 })
dataDistricts = dataDistricts.map((district) => ({
value: district.id,
- label: district.name,
+ label: district.name
}))
setDistricts(dataDistricts)
- let oldDistrict = getValues("oldDistrict")
+ let oldDistrict = getValues('oldDistrict')
if (oldDistrict) {
- setValue("district", oldDistrict)
- setValue("oldDistrict", "")
+ setValue('district', oldDistrict)
+ setValue('oldDistrict', '')
}
}
loadDistricts()
}
}, [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,
+ label: district.name
}))
setSubDistricts(dataSubDistricts)
- let oldSubDistrict = getValues("oldSubDistrict")
+ let oldSubDistrict = getValues('oldSubDistrict')
if (oldSubDistrict) {
- setValue("subDistrict", oldSubDistrict)
- setValue("oldSubDistrict", "")
+ setValue('subDistrict', oldSubDistrict)
+ setValue('oldSubDistrict', '')
}
}
loadSubDistricts()
@@ -91,143 +91,101 @@ const EditAddress = ({ id, defaultValues }) => {
...values,
city_id: values.city,
district_id: values.district,
- sub_district_id: values.subDistrict,
+ sub_district_id: values.subDistrict
}
const address = await editAddressApi({ id, data })
if (address?.id) {
- toast.success("Berhasil mengubah alamat")
+ toast.success('Berhasil mengubah alamat')
router.back()
}
}
return (
- <form
- className="p-4 flex flex-col gap-y-4"
- onSubmit={handleSubmit(onSubmitHandler)}
- >
+ <form className='p-4 flex flex-col gap-y-4' onSubmit={handleSubmit(onSubmitHandler)}>
<div>
- <label className="form-label mb-2">Label Alamat</label>
+ <label className='form-label mb-2'>Label Alamat</label>
<Controller
- name="type"
+ name='type'
control={control}
- render={(props) => (
- <HookFormSelect {...props} isSearchable={false} options={types} />
- )}
+ render={(props) => <HookFormSelect {...props} isSearchable={false} options={types} />}
/>
- <div className="text-caption-2 text-red_r-11 mt-1">
- {errors.type?.message}
- </div>
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
</div>
<div>
- <label className="form-label mb-2">Nama</label>
- <input
- {...register("name")}
- placeholder="John Doe"
- type="text"
- className="form-input"
- />
- <div className="text-caption-2 text-red_r-11 mt-1">
- {errors.name?.message}
- </div>
+ <label className='form-label mb-2'>Nama</label>
+ <input {...register('name')} placeholder='John Doe' type='text' className='form-input' />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
</div>
<div>
- <label className="form-label mb-2">Email</label>
+ <label className='form-label mb-2'>Email</label>
<input
- {...register("email")}
- placeholder="johndoe@example.com"
- type="email"
- className="form-input"
+ {...register('email')}
+ placeholder='johndoe@example.com'
+ type='email'
+ className='form-input'
/>
- <div className="text-caption-2 text-red_r-11 mt-1">
- {errors.email?.message}
- </div>
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
</div>
<div>
- <label className="form-label mb-2">Mobile</label>
- <input
- {...register("mobile")}
- placeholder="08xxxxxxxx"
- type="tel"
- className="form-input"
- />
- <div className="text-caption-2 text-red_r-11 mt-1">
- {errors.mobile?.message}
- </div>
+ <label className='form-label mb-2'>Mobile</label>
+ <input {...register('mobile')} placeholder='08xxxxxxxx' type='tel' className='form-input' />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
</div>
<div>
- <label className="form-label mb-2">Alamat</label>
+ <label className='form-label mb-2'>Alamat</label>
<input
- {...register("street")}
- placeholder="Jl. Bandengan Utara 85A"
- type="text"
- className="form-input"
+ {...register('street')}
+ placeholder='Jl. Bandengan Utara 85A'
+ type='text'
+ className='form-input'
/>
- <div className="text-caption-2 text-red_r-11 mt-1">
- {errors.street?.message}
- </div>
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
</div>
<div>
- <label className="form-label mb-2">Kode Pos</label>
- <input
- {...register("zip")}
- placeholder="10100"
- type="number"
- className="form-input"
- />
- <div className="text-caption-2 text-red_r-11 mt-1">
- {errors.zip?.message}
- </div>
+ <label className='form-label mb-2'>Kode Pos</label>
+ <input {...register('zip')} placeholder='10100' type='number' className='form-input' />
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
</div>
<div>
- <label className="form-label mb-2">Kota</label>
+ <label className='form-label mb-2'>Kota</label>
<Controller
- name="city"
+ name='city'
control={control}
render={(props) => <HookFormSelect {...props} options={cities} />}
/>
- <div className="text-caption-2 text-red_r-11 mt-1">
- {errors.city?.message}
- </div>
+ <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
</div>
<div>
- <label className="form-label mb-2">Kecamatan</label>
+ <label className='form-label mb-2'>Kecamatan</label>
<Controller
- name="district"
+ name='district'
control={control}
render={(props) => (
- <HookFormSelect
- {...props}
- options={districts}
- disabled={!watchCity}
- />
+ <HookFormSelect {...props} options={districts} disabled={!watchCity} />
)}
/>
</div>
<div>
- <label className="form-label mb-2">Kelurahan</label>
+ <label className='form-label mb-2'>Kelurahan</label>
<Controller
- name="subDistrict"
+ name='subDistrict'
control={control}
render={(props) => (
- <HookFormSelect
- {...props}
- options={subDistricts}
- disabled={!watchDistrict}
- />
+ <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
)}
/>
</div>
- <button type="submit" className="btn-yellow mt-2 w-full">
+ <button type='submit' className='btn-yellow mt-2 w-full'>
Simpan
</button>
</form>
@@ -235,22 +193,20 @@ const EditAddress = ({ id, defaultValues }) => {
}
const validationSchema = Yup.object().shape({
- type: Yup.string().required("Harus di-pilih"),
- name: Yup.string().min(3, "Minimal 3 karakter").required("Harus di-isi"),
- email: Yup.string()
- .email("Format harus seperti johndoe@example.com")
- .required("Harus di-isi"),
- mobile: Yup.string().required("Harus di-isi"),
- street: Yup.string().required("Harus di-isi"),
- zip: Yup.string().required("Harus di-isi"),
- city: Yup.string().required("Harus di-pilih"),
+ type: Yup.string().required('Harus di-pilih'),
+ name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'),
+ email: Yup.string().email('Format harus seperti johndoe@example.com').required('Harus di-isi'),
+ mobile: Yup.string().required('Harus di-isi'),
+ street: Yup.string().required('Harus di-isi'),
+ zip: Yup.string().required('Harus di-isi'),
+ city: 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: 'contact', label: 'Contact Address' },
+ { value: 'invoice', label: 'Invoice Address' },
+ { value: 'delivery', label: 'Delivery Address' },
+ { value: 'other', label: 'Other Address' }
]
export default EditAddress
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 20:53:23 +0000