summaryrefslogtreecommitdiff
path: root/src/lib/address/components/CreateAddress.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/address/components/CreateAddress.jsx')
-rw-r--r--src/lib/address/components/CreateAddress.jsx166
1 files changed, 73 insertions, 93 deletions
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 4ba99820..62bb0858 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -1,34 +1,34 @@
-import HookFormSelect from "@/core/components/elements/Select/HookFormSelect"
-import useAuth from "@/core/hooks/useAuth"
-import { useRouter } from "next/router"
-import { Controller, useForm } from "react-hook-form"
-import * as Yup from "yup"
-import cityApi from "../api/cityApi"
-import districtApi from "../api/districtApi"
-import subDistrictApi from "../api/subDistrictApi"
-import { useEffect, useState } from "react"
-import createAddressApi from "../api/createAddressApi"
-import { toast } from "react-hot-toast"
-import { yupResolver } from "@hookform/resolvers/yup"
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
+import useAuth from '@/core/hooks/useAuth'
+import { useRouter } from 'next/router'
+import { Controller, useForm } from 'react-hook-form'
+import * as Yup from 'yup'
+import cityApi from '../api/cityApi'
+import districtApi from '../api/districtApi'
+import subDistrictApi from '../api/subDistrictApi'
+import { useEffect, useState } from 'react'
+import createAddressApi from '../api/createAddressApi'
+import { toast } from 'react-hot-toast'
+import { yupResolver } from '@hookform/resolvers/yup'
const CreateAddress = () => {
const auth = useAuth()
const router = useRouter()
- const {
- register,
- formState: { errors },
+ const {
+ register,
+ formState: { errors },
handleSubmit,
watch,
setValue,
- control,
- } = useForm({
+ control
+ } = useForm({
resolver: yupResolver(validationSchema),
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 () => {
@@ -45,12 +45,15 @@ const CreateAddress = () => {
if (watchCity) {
const loadDistricts = async () => {
let dataDistricts = await districtApi({ cityId: watchCity })
- dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name }))
+ dataDistricts = dataDistricts.map((district) => ({
+ value: district.id,
+ label: district.name
+ }))
setDistricts(dataDistricts)
}
loadDistricts()
}
- }, [ watchCity, setValue ])
+ }, [watchCity, setValue])
const watchDistrict = watch('district')
useEffect(() => {
@@ -58,14 +61,17 @@ const CreateAddress = () => {
if (watchDistrict) {
const loadSubDistricts = async () => {
let dataSubDistricts = await subDistrictApi({ districtId: watchDistrict })
- dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, label: district.name }))
+ dataSubDistricts = dataSubDistricts.map((district) => ({
+ value: district.id,
+ label: district.name
+ }))
setSubDistricts(dataSubDistricts)
}
loadSubDistricts()
}
- }, [ watchDistrict, setValue ])
+ }, [watchDistrict, setValue])
- const onSubmitHandler = async (values) => {
+ const onSubmitHandler = async (values) => {
const data = {
...values,
city_id: values.city,
@@ -79,119 +85,93 @@ const CreateAddress = () => {
toast.success('Berhasil menambahkan 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="contoh@email.com"
- type="email"
- className="form-input"
+ placeholder='contoh@email.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"
+ 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} />}
+ 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}
- />
+ render={(props) => (
+ <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}
- />
+ render={(props) => (
+ <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>
@@ -205,7 +185,7 @@ const validationSchema = Yup.object().shape({
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'),
+ city: Yup.string().required('Harus di-pilih')
})
const defaultValues = {
@@ -217,14 +197,14 @@ const defaultValues = {
city: '',
district: '',
subDistrict: '',
- zip: '',
+ zip: ''
}
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 CreateAddress \ No newline at end of file
+export default CreateAddress
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:19:21 +0000