From bc4fe87e012cc1b06572ca12f1a3b92f6d1757e0 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 31 Oct 2024 09:09:05 +0700
Subject: detail adress

---
 src/lib/maps/components/PinPointMap.jsx | 43 +++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 7 deletions(-)

(limited to 'src/lib/maps/components/PinPointMap.jsx')

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index 0781d8a8..1fa40036 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -8,6 +8,7 @@ import {
 import { useMaps } from '../stores/useMaps';
 import { LocateFixed, MapPinIcon } from 'lucide-react';
 import { Button } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 
 const containerStyle = {
   width: '100%',
@@ -30,6 +31,7 @@ const PinpointLocation = () => {
 
   const [tempAddress, setTempAddress] = useState('');
   const [tempPosition, setTempPosition] = useState(center);
+  const { setValue } = useForm();
 
   const autocompleteRef = useRef(null);
 
@@ -50,6 +52,11 @@ const PinpointLocation = () => {
     }
   };
 
+  const getAddressComponent = (components, type) => {
+    const component = components.find((comp) => comp.types.includes(type));
+    return component ? component.long_name : '';
+  };
+
   const getAddress = async (lat, lng) => {
     try {
       const response = await fetch(
@@ -57,6 +64,28 @@ const PinpointLocation = () => {
       );
       const data = await response.json();
       if (data.results[0]) {
+        const addressComponents = data.results[0].address_components;
+        const details = {
+          province: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_1'
+          ),
+          district: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_2'
+          ),
+          subDistrict: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_3'
+          ),
+          village: getAddressComponent(
+            addressComponents,
+            'administrative_area_level_4'
+          ),
+          postalCode: getAddressComponent(addressComponents, 'postal_code'),
+        };
+        setValue('state', details?.province);
+        console.log(details);
         setTempAddress(data.results[0].formatted_address);
       }
     } catch (error) {
@@ -82,7 +111,7 @@ const PinpointLocation = () => {
 
   const handleSavePinpoint = (event) => {
     event.preventDefault();
-    if(tempAddress === '') {
+    if (tempAddress === '') {
       alert('Silahkan pilih lokasi terlebih dahulu');
       return;
     }
@@ -134,10 +163,7 @@ const PinpointLocation = () => {
       </div>
 
       <div style={{ marginTop: '20px' }}>
-        <Button
-          variant='solid'
-          onClick={handleUseCurrentLocation}
-        >
+        <Button variant='solid' onClick={handleUseCurrentLocation}>
           <LocateFixed class='h-6 w-6 text-gray-500 mr-2' /> Gunakan Lokasi Saat
           ini
         </Button>
@@ -152,8 +178,11 @@ const PinpointLocation = () => {
       </div>
 
       <div className='mt-6 flex justify-end'>
-        <button className='p-3 border border-red-500 bg-red-600 text-white font-semibold rounded-lg' onClick={handleSavePinpoint}>
-            Simpan Lokasi Ini
+        <button
+          className='p-3 border border-red-500 bg-red-600 text-white font-semibold rounded-lg'
+          onClick={handleSavePinpoint}
+        >
+          Simpan Lokasi Ini
         </button>
       </div>
     </div>
-- 
cgit v1.2.3