Merged in fix-map (pull request #445)

Fix map

1 files changed, 45 insertions, 26 deletions

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index c46d838a..75ab1d59 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -14,37 +14,35 @@ const containerStyle = {
   height: '400px',
 };
 
-const defaultCenter = {
-  lat: -6.2,
-  lng: 106.816666,
-};
-
-const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) => {
+const PinpointLocation = ({
+  initialLatitude,
+  initialLongitude,
+  initialAddress,
+}) => {
   const { isLoaded } = useJsApiLoader({
     googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
     libraries: ['places'],
   });
 
   const {
-    addressMaps,
     setAddressMaps,
     selectedPosition,
     setSelectedPosition,
     setDetailAddress,
     setPinedMaps,
+    getDefaultCenter, // ✅ ambil default center dari store
   } = useMaps();
 
   const [tempAddress, setTempAddress] = useState(initialAddress || '');
   const [tempPosition, setTempPosition] = useState(
-    initialLatitude && initialLongitude 
+    initialLatitude && initialLongitude
       ? { lat: parseFloat(initialLatitude), lng: parseFloat(initialLongitude) }
-      : selectedPosition.lat && selectedPosition.lng
-        ? selectedPosition
-        : defaultCenter
+      : selectedPosition?.lat && selectedPosition?.lng
+      ? selectedPosition
+      : getDefaultCenter() // ✅ fallback aman untuk view
   );
 
   const [markerIcon, setMarkerIcon] = useState(null);
-
   const autocompleteRef = useRef(null);
 
   useEffect(() => {
@@ -55,7 +53,7 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
       });
     }
 
-    // If we have initial coordinates but no address, fetch the address
+    // Jika ada koordinat awal tapi belum ada address → reverse geocode
     if (initialLatitude && initialLongitude && !initialAddress) {
       getAddress(parseFloat(initialLatitude), parseFloat(initialLongitude));
     }
@@ -66,6 +64,7 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
     return component ? component.long_name : '';
   };
 
+  // fill from pin point
   const getAddress = async (lat, lng) => {
     try {
       const response = await fetch(
@@ -78,14 +77,26 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
         const formattedAddress = data.results[0].formatted_address;
 
         const details = {
-          street:
-            getAddressComponent(addressComponents, 'route') +
-            ' ' +
-            getAddressComponent(addressComponents, 'street_number'),
-          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'),
+          // street:
+          //   getAddressComponent(addressComponents, 'route') +
+          //   ' ' +
+          //   getAddressComponent(addressComponents, 'street_number'),
+          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'),
         };
 
@@ -136,8 +147,15 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
 
   const handleSavePinpoint = (event) => {
     event.preventDefault();
-    if (tempAddress === '') {
-      alert('Silahkan pilih lokasi terlebih dahulu');
+
+    // ✅ cegah save jika masih di default center (user belum benar2 pilih lokasi)
+    const dc = getDefaultCenter();
+    const isDefault =
+      Math.abs(tempPosition.lat - dc.lat) < 1e-6 &&
+      Math.abs(tempPosition.lng - dc.lng) < 1e-6;
+
+    if (!tempAddress || isDefault) {
+      alert('Silahkan pilih lokasi di peta atau autocomplete terlebih dahulu');
       return;
     }
 
@@ -173,13 +191,13 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
         {isLoaded ? (
           <GoogleMap
             mapContainerStyle={containerStyle}
-            center={tempPosition}
+            center={tempPosition || getDefaultCenter()} // ✅ aman jika null
             zoom={15}
             onClick={onMapClick}
           >
             {markerIcon && (
               <Marker
-                position={tempPosition}
+                position={tempPosition || getDefaultCenter()} // ✅ selalu ada posisi
                 draggable={true}
                 onDragEnd={(e) => {
                   const lat = e.latLng.lat();
@@ -199,7 +217,8 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
 
       <div style={{ marginTop: '20px' }}>
         <Button variant='solid' onClick={handleUseCurrentLocation}>
-          <LocateFixed className='h-6 w-6 text-gray-500 mr-2' /> Gunakan Lokasi Saat Ini
+          <LocateFixed className='h-6 w-6 text-gray-500 mr-2' /> Gunakan Lokasi
+          Saat Ini
         </Button>
       </div>