From 3c559031623649a67825ff47f34512f0eb946861 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 10:14:32 +0700
Subject: fix

---
 src/lib/address/components/CreateAddress.jsx | 230 +++++++++++++++++++++++++++
 1 file changed, 230 insertions(+)
 create mode 100644 src/lib/address/components/CreateAddress.jsx

(limited to 'src/lib/address/components/CreateAddress.jsx')

diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
new file mode 100644
index 00000000..4ba99820
--- /dev/null
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -0,0 +1,230 @@
+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 }, 
+    handleSubmit,
+    watch,
+    setValue,
+    control,
+  } = useForm({ 
+    resolver: yupResolver(validationSchema),
+    defaultValues
+  })
+
+  const [ cities, setCities ] = useState([])
+  const [ districts, setDistricts ] = useState([])
+  const [ subDistricts, setSubDistricts ] = useState([])
+
+  useEffect(() => {
+    const loadCities = async () => {
+      let dataCities = await cityApi()
+      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
+      setCities(dataCities)
+    }
+    loadCities()
+  }, [])
+
+  const watchCity = watch('city')
+  useEffect(() => {
+    setValue('district', '')
+    if (watchCity) {
+      const loadDistricts = async () => {
+        let dataDistricts = await districtApi({ cityId: watchCity })
+        dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name }))
+        setDistricts(dataDistricts)
+      }
+      loadDistricts()
+    }
+  }, [ watchCity, setValue ])
+
+  const watchDistrict = watch('district')
+  useEffect(() => {
+    setValue('subDistrict', '')
+    if (watchDistrict) {
+      const loadSubDistricts = async () => {
+        let dataSubDistricts = await subDistrictApi({ districtId: watchDistrict })
+        dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, label: district.name }))
+        setSubDistricts(dataSubDistricts)
+      }
+      loadSubDistricts()
+    }
+   }, [ watchDistrict, setValue ])
+
+   const onSubmitHandler = async (values) => {
+    const data = {
+      ...values,
+      city_id: values.city,
+      district_id: values.district,
+      sub_district_id: values.subDistrict,
+      parent_id: auth.partnerId
+    }
+
+    const address = await createAddressApi({ data })
+    if (address?.id) {
+      toast.success('Berhasil menambahkan alamat')
+      router.back()
+    }
+   }
+
+  return (
+    <form className="p-4 flex flex-col gap-y-4" onSubmit={handleSubmit(onSubmitHandler)}>
+      <div>
+        <label className="form-label mb-2">Label Alamat</label>
+        <Controller
+          name="type"
+          control={control}
+          render={props => <HookFormSelect {...props} isSearchable={false} options={types} />}
+        />
+        <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>
+      </div>
+
+      <div>
+        <label className="form-label mb-2">Email</label>
+        <input
+          {...register('email')}
+          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>
+
+      <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>
+        <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>
+
+      <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>
+        <Controller
+          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>
+
+      <div>
+        <label className="form-label mb-2">Kecamatan</label>
+        <Controller
+          name="district"
+          control={control}
+          render={props => (
+            <HookFormSelect 
+              {...props} 
+              options={districts} 
+              disabled={!watchCity}
+            />
+          )}
+        />
+      </div>
+
+      <div>
+        <label className="form-label mb-2">Kelurahan</label>
+        <Controller
+          name="subDistrict"
+          control={control}
+          render={props => (
+            <HookFormSelect 
+              {...props} 
+              options={subDistricts} 
+              disabled={!watchDistrict}
+            />
+          )}
+        />
+      </div>
+
+      <button 
+        type="submit" 
+        className="btn-yellow mt-2 w-full"
+      >
+        Simpan
+      </button>
+    </form>
+  )
+}
+
+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 contoh@email.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 defaultValues = {
+  type: '',
+  name: '',
+  email: '',
+  mobile: '',
+  street: '',
+  city: '',
+  district: '',
+  subDistrict: '',
+  zip: '',
+}
+
+const types = [
+  { value: 'contact', label: 'Contact Address' },
+  { value: 'invoice', label: 'Invoice Address' },
+  { value: 'delivery', label: 'Delivery Address' },
+  { value: 'other', label: 'Other Address' },
+]
+
+export default CreateAddress
\ No newline at end of file
-- 
cgit v1.2.3


From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 11:03:34 +0700
Subject: prettier

---
 src/lib/address/components/CreateAddress.jsx | 166 ++++++++++++---------------
 1 file changed, 73 insertions(+), 93 deletions(-)

(limited to 'src/lib/address/components/CreateAddress.jsx')

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
-- 
cgit v1.2.3


From ac3fdf7be9982e65d8f83a20bc487f8dd62e3bfc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:36:47 +0700
Subject: fix

---
 src/lib/address/components/CreateAddress.jsx | 58 +++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 9 deletions(-)

(limited to 'src/lib/address/components/CreateAddress.jsx')

diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 62bb0858..849b4c01 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -88,20 +88,34 @@ const CreateAddress = () => {
   }
 
   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>
         <Controller
           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>
 
       <div>
         <label className='form-label mb-2'>Nama</label>
-        <input {...register('name')} placeholder='John Doe' type='text' className='form-input' />
+        <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>
 
@@ -118,7 +132,12 @@ const CreateAddress = () => {
 
       <div>
         <label className='form-label mb-2'>Mobile</label>
-        <input {...register('mobile')} placeholder='08xxxxxxxx' type='tel' className='form-input' />
+        <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>
 
@@ -135,7 +154,12 @@ const CreateAddress = () => {
 
       <div>
         <label className='form-label mb-2'>Kode Pos</label>
-        <input {...register('zip')} placeholder='10100' type='number' className='form-input' />
+        <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>
 
@@ -144,7 +168,12 @@ const CreateAddress = () => {
         <Controller
           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>
@@ -155,7 +184,11 @@ const CreateAddress = () => {
           name='district'
           control={control}
           render={(props) => (
-            <HookFormSelect {...props} options={districts} disabled={!watchCity} />
+            <HookFormSelect
+              {...props}
+              options={districts}
+              disabled={!watchCity}
+            />
           )}
         />
       </div>
@@ -166,12 +199,19 @@ const CreateAddress = () => {
           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>
-- 
cgit v1.2.3