<Miqdad> Initial Commit fixing map

2 files changed, 67 insertions, 34 deletions

diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index c46d838a..f89e6e75 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));
     }
@@ -82,10 +80,22 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress })
             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'),
+          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 +146,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 +190,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 +216,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>
 
diff --git a/src/lib/maps/stores/useMaps.js b/src/lib/maps/stores/useMaps.js
index c57a05ad..f7636c24 100644
--- a/src/lib/maps/stores/useMaps.js
+++ b/src/lib/maps/stores/useMaps.js
@@ -1,32 +1,47 @@
 import { create } from "zustand";
 
-const center = {
-  lat: -6.200000, // Default latitude (Jakarta)
-  lng: 106.816666, // Default longitude (Jakarta)
-};
-
-export const useMaps = create((set) => ({
-  // State existing
-  selectedPosition: center,
+const DEFAULT_CENTER = { lat: -6.2, lng: 106.816666 };
+
+export const useMaps = create((set, get) => ({
+  // ==== STATE ====
+  selectedPosition: null,
   addressMaps: '',
   detailAddress: {},
   pinedMaps: false,
 
-  // State tambahan untuk penyimpanan posisi sementara
+  // posisi sementara (create/edit)
   tempPositionCreate: null,
   tempPositionEdit: null,
 
-  // Setter existing
+  // ==== SETTERS ====
   setSelectedPosition: (position) => set({ selectedPosition: position }),
   setAddressMaps: (addressMaps) => set({ addressMaps }),
   setDetailAddress: (detailAddress) => set({ detailAddress }),
   setPinedMaps: (pinedMaps) => set({ pinedMaps }),
 
-  // Setter tambahan untuk posisi sementara
   setTempPositionCreate: (position) => set({ tempPositionCreate: position }),
   setTempPositionEdit: (position) => set({ tempPositionEdit: position }),
 
-  // Opsional: Reset jika ingin clear saat keluar halaman
   resetTempPositionCreate: () => set({ tempPositionCreate: null }),
   resetTempPositionEdit: () => set({ tempPositionEdit: null }),
+
+  getDefaultCenter: () => DEFAULT_CENTER,
+
+  isPinned: () => {
+    const p = get().selectedPosition;
+    if (!p || typeof p.lat !== 'number' || typeof p.lng !== 'number') return false;
+    const isDefault =
+      Math.abs(p.lat - DEFAULT_CENTER.lat) < 1e-6 &&
+      Math.abs(p.lng - DEFAULT_CENTER.lng) < 1e-6;
+    return !isDefault;
+  },
+
+  resetPin: () => set({
+    selectedPosition: null,
+    addressMaps: '',
+    detailAddress: {},
+    pinedMaps: false,
+    tempPositionCreate: null,
+    tempPositionEdit: null,
+  }),
 }));