diff options
Diffstat (limited to 'src/lib/maps/components')
| -rw-r--r-- | src/lib/maps/components/PinPointMap.jsx | 95 |
1 files changed, 69 insertions, 26 deletions
diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx index c46d838a..a9ead055 100644 --- a/src/lib/maps/components/PinPointMap.jsx +++ b/src/lib/maps/components/PinPointMap.jsx @@ -14,37 +14,54 @@ 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); + useEffect(() => { + if (initialLatitude && initialLongitude) { + const lat = parseFloat(initialLatitude); + const lng = parseFloat(initialLongitude); + + if (!isNaN(lat) && !isNaN(lng)) { + setTempPosition({ lat, lng }); + // kalau address belum ada, reverse geocode + if (!initialAddress) { + getAddress(lat, lng); + } else { + setTempAddress(initialAddress); + } + } + } + }, [initialLatitude, initialLongitude, initialAddress]); + const [markerIcon, setMarkerIcon] = useState(null); const autocompleteRef = useRef(null); useEffect(() => { @@ -55,7 +72,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,10 +83,11 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) return component ? component.long_name : ''; }; + // fill from pin point const getAddress = async (lat, lng) => { try { const response = await fetch( - `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}` + `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}&language=id` ); const data = await response.json(); @@ -78,14 +96,31 @@ const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) const formattedAddress = data.results[0].formatted_address; const details = { - street: - getAddressComponent(addressComponents, 'route') + - ' ' + + 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'), + getAddressComponent(addressComponents, 'administrative_area_level_4'), + getAddressComponent(addressComponents, 'administrative_area_level_3'), + getAddressComponent(addressComponents, 'administrative_area_level_2'), + getAddressComponent(addressComponents, 'administrative_area_level_1'), + getAddressComponent(addressComponents, 'postal_code'), + ].filter(Boolean).join(', '), + 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 +171,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 +215,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 +241,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> |