3 files changed, 31 insertions, 17 deletions

diff --git a/src/pages/my/address/[id]/edit.js b/src/pages/my/address/[id]/edit.js
index 78eef635..13f166ab 100644
--- a/src/pages/my/address/[id]/edit.js
+++ b/src/pages/my/address/[id]/edit.js
@@ -38,13 +38,15 @@ export async function getServerSideProps( context ) {
     street: address.street,
     zip: address.zip,
     city: address.city?.id,
-    district: address.district?.id || '',
-    subDistrict: address.sub_district?.id || ''
+    oldDistrict: address.district?.id || '',
+    district: '',
+    oldSubDistrict: address.sub_district?.id || '',
+    subDistrict: '',
   };
   return { props: { id, defaultValues } };
 }
 
-export default function CreateAddress({ id, defaultValues }) {
+export default function EditAddress({ id, defaultValues }) {
   const router = useRouter();
   const { 
     register, 
@@ -52,6 +54,7 @@ export default function CreateAddress({ id, defaultValues }) {
     handleSubmit,
     watch,
     setValue,
+    getValues,
     control,
   } = useForm({ 
     resolver: yupResolver(validationSchema),
@@ -79,23 +82,33 @@ export default function CreateAddress({ id, defaultValues }) {
         let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${watchCity}`);
         dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name }));
         setDistricts(dataDistricts);
+        let oldDistrict = getValues('oldDistrict');
+        if (oldDistrict) {
+          setValue('district', oldDistrict);
+          setValue('oldDistrict', '');
+        }
       };
       loadDistricts();
     }
-  }, [ watchCity, setValue ]);
+  }, [ watchCity, setValue, getValues ]);
   
   const watchDistrict = watch('district');
-   useEffect(() => {
+  useEffect(() => {
     setValue('subDistrict', '');
     if (watchDistrict) {
       const loadSubDistricts = async () => {
         let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${watchDistrict}`);
         dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, label: district.name }));
         setSubDistricts(dataSubDistricts);
+        let oldSubDistrict = getValues('oldSubDistrict');
+        if (oldSubDistrict) {
+          setValue('subDistrict', oldSubDistrict);
+          setValue('oldSubDistrict', '');
+        }
       };
       loadSubDistricts();
     }
-   }, [ watchDistrict, setValue ])
+   }, [ watchDistrict, setValue, getValues ])
 
    const onSubmitHandler = async (values) => {
     const parameters = {
@@ -123,7 +136,7 @@ export default function CreateAddress({ id, defaultValues }) {
             <Controller
               name="type"
               control={control}
-              render={props => <Select {...props} options={types} />}
+              render={props => <Select {...props} isSearchable={false} options={types} />}
             />
             <div className="text-caption-2 text-red_r-11 mt-1">{ errors.type?.message }</div>
           </div>
diff --git a/src/pages/my/address/create.js b/src/pages/my/address/create.js
index 5e9aaab8..71f73a64 100644
--- a/src/pages/my/address/create.js
+++ b/src/pages/my/address/create.js
@@ -121,7 +121,7 @@ export default function CreateAddress() {
             <Controller
               name="type"
               control={control}
-              render={props => <Select {...props} options={types} />}
+              render={props => <Select {...props} isSearchable={false} options={types} />}
             />
             <div className="text-caption-2 text-red_r-11 mt-1">{ errors.type?.message }</div>
           </div>
diff --git a/src/pages/my/address/index.js b/src/pages/my/address/index.js
index 787cfcfa..236e4b60 100644
--- a/src/pages/my/address/index.js
+++ b/src/pages/my/address/index.js
@@ -54,17 +54,18 @@ export default function Address() {
             <div 
               key={index} 
               className={"p-4 rounded-md border " + (selectedAdress && selectedAdress == address.id ? "border-yellow_r-7 bg-yellow_r-2" : "border-gray_r-7") } 
-              onClick={() => changeSelectedAddress(address.id)}
             >
-              <div className="flex gap-x-2">
-                <div className="badge-red">{ type }</div>
-                { auth?.partner_id == address.id && (
-                  <div className="badge-green">Utama</div>
-                ) }
+              <div onClick={() => changeSelectedAddress(address.id)}>
+                <div className="flex gap-x-2" >
+                  <div className="badge-red">{ type }</div>
+                  { auth?.partner_id == address.id && (
+                    <div className="badge-green">Utama</div>
+                  ) }
+                </div>
+                <p className="font-medium mt-1">{ address.name }</p>
+                <p className="mt-2 text-gray_r-11">{ address.mobile }</p>
+                <p className="mt-1 text-gray_r-11 leading-6">{ address.street } { address.street2 }</p>
               </div>
-              <p className="font-medium mt-1">{ address.name }</p>
-              <p className="mt-2 text-gray_r-11">{ address.mobile }</p>
-              <p className="mt-1 text-gray_r-11 leading-6">{ address.street } { address.street2 }</p>
               <Link href={`/my/address/${address.id}/edit`} className="btn-light mt-3 w-full text-gray_r-11">Ubah Alamat</Link>
             </div>
           );