diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
| commit | f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c (patch) | |
| tree | 253dcf854a3c92e09ca846e86a09e5b4c5d16be1 /src/lib/address/components/EditAddress.jsx | |
| parent | 3c559031623649a67825ff47f34512f0eb946861 (diff) | |
prettier
Diffstat (limited to 'src/lib/address/components/EditAddress.jsx')
| -rw-r--r-- | src/lib/address/components/EditAddress.jsx | 196 |
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 |
