From c7c3e3fd6f221447a0c81459a45c090aa0714334 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Mon, 28 Oct 2024 17:03:34 +0700 Subject: maps component --- src/lib/address/components/CreateAddress.jsx | 323 +++++++++++++++------------ src/lib/maps/components/PinPointMap.jsx | 163 ++++++++++++++ src/lib/maps/stores/useMaps.js | 13 ++ src/lib/product/components/ProductSearch.jsx | 4 +- 4 files changed, 359 insertions(+), 144 deletions(-) create mode 100644 src/lib/maps/components/PinPointMap.jsx create mode 100644 src/lib/maps/stores/useMaps.js (limited to 'src/lib') diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx index 9d70e8fc..70307401 100644 --- a/src/lib/address/components/CreateAddress.jsx +++ b/src/lib/address/components/CreateAddress.jsx @@ -1,7 +1,7 @@ import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; import useAuth from '@/core/hooks/useAuth'; import { useRouter } from 'next/router'; -import { Controller, useForm } from 'react-hook-form'; +import { Controller, set, useForm } from 'react-hook-form'; import * as Yup from 'yup'; import cityApi from '../api/cityApi'; import districtApi from '../api/districtApi'; @@ -14,6 +14,12 @@ import Menu from '@/lib/auth/components/Menu'; import useAddresses from '../hooks/useAddresses'; import stateApi from '../api/stateApi'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import PinPointMap from '../../maps/components/PinPointMap'; +import { Button } from '@chakra-ui/react'; +import { MapPinIcon } from 'lucide-react'; +import { useMaps } from '../../maps/stores/useMaps'; + const CreateAddress = () => { const auth = useAuth(); const router = useRouter(); @@ -34,6 +40,8 @@ const CreateAddress = () => { const [districts, setDistricts] = useState([]); const [subDistricts, setSubDistricts] = useState([]); const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types + const [pinedMaps, setPinedMaps] = useState(false); + const { addressMaps, setAddressMaps } = useMaps(); useEffect(() => { const loadState = async () => { @@ -52,7 +60,7 @@ const CreateAddress = () => { setValue('city', ''); if (watchState) { const loadCities = async () => { - let dataCities = await cityApi({stateId: watchState}); + let dataCities = await cityApi({ stateId: watchState }); dataCities = dataCities.map((city) => ({ value: city.id, label: city.name, @@ -133,167 +141,198 @@ const CreateAddress = () => { }; return ( -
-
- -
-
-
-
-
- - ( - - )} - /> -
- {errors.type?.message} -
+ <> + setPinedMaps(false)} + > +
+ +
+ +
+
+ +
+
+ +
+ + {addressMaps ? ( +
+ {' '} + {addressMaps} +
+ ) : ( + + )} +
+
+
+ + ( + + )} + /> +
+ {errors.type?.message} +
+
-
- - -
- {errors.name?.message} +
+ + +
+ {errors.name?.message} +
-
-
- - -
- {errors.email?.message} +
+ + +
+ {errors.email?.message} +
-
-
- - -
- {errors.mobile?.message} +
+ + +
+ {errors.mobile?.message} +
-
-
- - -
- {errors.street?.message} +
+ + +
+ {errors.street?.message} +
-
-
- - -
- {errors.zip?.message} +
+ + +
+ {errors.zip?.message} +
-
-
- - ( - - )} - /> -
- {errors.state?.message} +
+ + ( + + )} + /> +
+ {errors.state?.message} +
-
-
- - ( - - )} - /> -
- {errors.city?.message} +
+ + ( + + )} + /> +
+ {errors.city?.message} +
-
-
- - ( - - )} - /> -
- {errors.district?.message} +
+ + ( + + )} + /> +
+ {errors.district?.message} +
-
-
- - ( - - )} - /> +
+ + ( + + )} + /> +
-
- - + + +
-
+ ); }; diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx new file mode 100644 index 00000000..0781d8a8 --- /dev/null +++ b/src/lib/maps/components/PinPointMap.jsx @@ -0,0 +1,163 @@ +import React, { useState, useCallback, useRef } from 'react'; +import { + GoogleMap, + useJsApiLoader, + Marker, + Autocomplete, +} from '@react-google-maps/api'; +import { useMaps } from '../stores/useMaps'; +import { LocateFixed, MapPinIcon } from 'lucide-react'; +import { Button } from '@chakra-ui/react'; + +const containerStyle = { + width: '100%', + height: '400px', +}; + +const center = { + lat: -6.2, // Default latitude (Jakarta) + lng: 106.816666, // Default longitude (Jakarta) +}; + +const PinpointLocation = () => { + const { isLoaded } = useJsApiLoader({ + googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY, // Pastikan API key ada di .env.local + libraries: ['places'], + }); + + const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition } = + useMaps(); + + const [tempAddress, setTempAddress] = useState(''); + const [tempPosition, setTempPosition] = useState(center); + + const autocompleteRef = useRef(null); + + const onMapClick = useCallback((event) => { + const lat = event.latLng.lat(); + const lng = event.latLng.lng(); + setTempPosition({ lat, lng }); + getAddress(lat, lng); + }, []); + + const handlePlaceSelect = () => { + const place = autocompleteRef.current.getPlace(); + if (place && place.geometry) { + const lat = place.geometry.location.lat(); + const lng = place.geometry.location.lng(); + setTempPosition({ lat, lng }); + setTempAddress(place.formatted_address); + } + }; + + 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}` + ); + const data = await response.json(); + if (data.results[0]) { + setTempAddress(data.results[0].formatted_address); + } + } catch (error) { + console.error('Error fetching address:', error); + } + }; + + const handleUseCurrentLocation = () => { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + (position) => { + const lat = position.coords.latitude; + const lng = position.coords.longitude; + setTempPosition({ lat, lng }); + getAddress(lat, lng); + }, + (error) => { + console.error('Error getting current location:', error); + } + ); + } + }; + + const handleSavePinpoint = (event) => { + event.preventDefault(); + if(tempAddress === '') { + alert('Silahkan pilih lokasi terlebih dahulu'); + return; + } + setSelectedPosition(tempPosition); + setAddressMaps(tempAddress); + }; + + return ( +
+

Tentukan Pinpoint Lokasi

+
+ {isLoaded ? ( + (autocompleteRef.current = ref)} + onPlaceChanged={handlePlaceSelect} + > + + + ) : ( +

Loading autocomplete...

+ )} +
+ +
+ {isLoaded ? ( + + onMapClick(e)} + icon={{ + url: 'https://maps.google.com/mapfiles/ms/icons/red-pushpin.png', + scaledSize: new window.google.maps.Size(40, 40), + }} + /> + + ) : ( +

Loading map...

+ )} +
+ +
+ +
+ +
+

PinPoint :

+
+ + +
+
+ +
+ +
+
+ ); +}; + +export default PinpointLocation; diff --git a/src/lib/maps/stores/useMaps.js b/src/lib/maps/stores/useMaps.js new file mode 100644 index 00000000..1720e663 --- /dev/null +++ b/src/lib/maps/stores/useMaps.js @@ -0,0 +1,13 @@ +import { create } from "zustand"; + +const center = { + lat: -6.200000, // Default latitude (Jakarta) + lng: 106.816666, // Default longitude (Jakarta) +}; + +export const useMaps = create((set) => ({ + selectedPosition: center, + addressMaps: '', + setSelectedPosition: (position) => set({ selectedPosition: position }), + setAddressMaps: (addressMaps) => set({ addressMaps }), + })); \ No newline at end of file diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index f7b044aa..3e342bf0 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -501,7 +501,7 @@ const ProductSearch = ({ @@ -691,7 +691,7 @@ const ProductSearch = ({ -- cgit v1.2.3