From f31abe97639c99b3f4d8a9ccc82338b6538c8a0d Mon Sep 17 00:00:00 2001 From: Fedi Rajhi Date: Wed, 19 Jun 2024 10:44:59 +0100 Subject: [PATCH 1/4] [Chore]: Update user location when fetching current location in AddressSearch component --- src/components/AddressSearch/index.tsx | 10 ++++++++-- src/components/MapView/MapView.tsx | 6 ++---- src/components/MapView/MapView.website.tsx | 6 ++---- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx index 17a2f6212447..9bd6142b5604 100644 --- a/src/components/AddressSearch/index.tsx +++ b/src/components/AddressSearch/index.tsx @@ -14,6 +14,7 @@ import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as UserLocation from '@libs/actions/UserLocation'; import * as ApiUtils from '@libs/ApiUtils'; import getCurrentPosition from '@libs/getCurrentPosition'; import type {GeolocationErrorCodeType} from '@libs/getCurrentPosition/getCurrentPosition.types'; @@ -249,12 +250,17 @@ function AddressSearch( setIsFetchingCurrentLocation(false); setLocationErrorCode(null); + const {latitude, longitude} = successData.coords; + const location = { - lat: successData.coords.latitude, - lng: successData.coords.longitude, + lat: latitude, + lng: longitude, address: CONST.YOUR_LOCATION_TEXT, name: CONST.YOUR_LOCATION_TEXT, }; + + // Update the current user location + UserLocation.setUserLocation({longitude, latitude}); onPress?.(location); }, (errorData) => { diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index 48d820ae5103..1bd2337c56c2 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -25,7 +25,7 @@ import type {ComponentProps, MapViewOnyxProps} from './types'; import utils from './utils'; const MapView = forwardRef( - ({accessToken, style, mapPadding, userLocation: cachedUserLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady, interactive = true}, ref) => { + ({accessToken, style, mapPadding, userLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady, interactive = true}, ref) => { const navigation = useNavigation(); const {isOffline} = useNetwork(); const {translate} = useLocalize(); @@ -34,7 +34,7 @@ const MapView = forwardRef( const cameraRef = useRef(null); const [isIdle, setIsIdle] = useState(false); const initialLocation = useMemo(() => initialState && {longitude: initialState.location[0], latitude: initialState.location[1]}, [initialState]); - const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation); + const currentPosition = userLocation ?? initialLocation; const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); const shouldInitializeCurrentPosition = useRef(true); @@ -50,7 +50,6 @@ const MapView = forwardRef( return; } UserLocation.clearUserLocation(); - setCurrentPosition(initialLocation); }, [initialLocation], ); @@ -74,7 +73,6 @@ const MapView = forwardRef( getCurrentPosition((params) => { const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude}; - setCurrentPosition(currentCoords); UserLocation.setUserLocation(currentCoords); }, setCurrentPositionToInitialState); }, [isOffline, shouldPanMapToCurrentPosition, setCurrentPositionToInitialState]), diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx index 640469126874..bfa923fa2af4 100644 --- a/src/components/MapView/MapView.website.tsx +++ b/src/components/MapView/MapView.website.tsx @@ -39,7 +39,7 @@ const MapView = forwardRef( waypoints, mapPadding, accessToken, - userLocation: cachedUserLocation, + userLocation, directionCoordinates, initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM}, interactive = true, @@ -55,7 +55,7 @@ const MapView = forwardRef( const [mapRef, setMapRef] = useState(null); const initialLocation = useMemo(() => ({longitude: initialState.location[0], latitude: initialState.location[1]}), [initialState]); - const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation); + const currentPosition = userLocation ?? initialLocation; const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); const [shouldResetBoundaries, setShouldResetBoundaries] = useState(false); const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []); @@ -73,7 +73,6 @@ const MapView = forwardRef( return; } UserLocation.clearUserLocation(); - setCurrentPosition(initialLocation); }, [initialLocation], ); @@ -97,7 +96,6 @@ const MapView = forwardRef( getCurrentPosition((params) => { const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude}; - setCurrentPosition(currentCoords); UserLocation.setUserLocation(currentCoords); }, setCurrentPositionToInitialState); }, [isOffline, shouldPanMapToCurrentPosition, setCurrentPositionToInitialState]), From 6d1973b3628680cd0c0dd26de62d20f8ad24f62d Mon Sep 17 00:00:00 2001 From: Fedi Rajhi Date: Fri, 21 Jun 2024 13:14:38 +0100 Subject: [PATCH 2/4] chore: Avoid nagivating to same location --- src/components/MapView/MapView.website.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx index bfa923fa2af4..51bf49f5b009 100644 --- a/src/components/MapView/MapView.website.tsx +++ b/src/components/MapView/MapView.website.tsx @@ -19,6 +19,7 @@ import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrent import {GeolocationErrorCode} from '@libs/getCurrentPosition/getCurrentPosition.types'; import * as UserLocation from '@userActions/UserLocation'; import CONST from '@src/CONST'; +import usePrevious from '@hooks/usePrevious'; import useLocalize from '@src/hooks/useLocalize'; import useNetwork from '@src/hooks/useNetwork'; import getCurrentPosition from '@src/libs/getCurrentPosition'; @@ -56,6 +57,7 @@ const MapView = forwardRef( const [mapRef, setMapRef] = useState(null); const initialLocation = useMemo(() => ({longitude: initialState.location[0], latitude: initialState.location[1]}), [initialState]); const currentPosition = userLocation ?? initialLocation; + const prevUserPosition = usePrevious(currentPosition); const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); const [shouldResetBoundaries, setShouldResetBoundaries] = useState(false); const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []); @@ -110,11 +112,16 @@ const MapView = forwardRef( return; } + // Avoid navigationg to the same location + if (prevUserPosition.longitude === currentPosition.longitude && prevUserPosition.latitude === currentPosition.latitude) { + return; + } + mapRef.flyTo({ center: [currentPosition.longitude, currentPosition.latitude], zoom: CONST.MAPBOX.DEFAULT_ZOOM, }); - }, [currentPosition, userInteractedWithMap, mapRef, shouldPanMapToCurrentPosition]); + }, [currentPosition, mapRef, prevUserPosition, shouldPanMapToCurrentPosition]); const resetBoundaries = useCallback(() => { if (!waypoints || waypoints.length === 0) { From 414f59610afefdf2372e76372de453519288a391 Mon Sep 17 00:00:00 2001 From: Fedi Rajhi Date: Fri, 21 Jun 2024 13:27:26 +0100 Subject: [PATCH 3/4] chore: fix prettier --- src/components/MapView/MapView.website.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx index 51bf49f5b009..5a709ca0f1fd 100644 --- a/src/components/MapView/MapView.website.tsx +++ b/src/components/MapView/MapView.website.tsx @@ -12,6 +12,7 @@ import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import * as Expensicons from '@components/Icon/Expensicons'; +import usePrevious from '@hooks/usePrevious'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -19,7 +20,6 @@ import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrent import {GeolocationErrorCode} from '@libs/getCurrentPosition/getCurrentPosition.types'; import * as UserLocation from '@userActions/UserLocation'; import CONST from '@src/CONST'; -import usePrevious from '@hooks/usePrevious'; import useLocalize from '@src/hooks/useLocalize'; import useNetwork from '@src/hooks/useNetwork'; import getCurrentPosition from '@src/libs/getCurrentPosition'; From 8d1ae21137e339882bda54e42fdc48d8f2d24ac7 Mon Sep 17 00:00:00 2001 From: Fedi Rajhi Date: Sat, 22 Jun 2024 15:26:03 +0100 Subject: [PATCH 4/4] chore: Improve MapView navigation animation --- src/components/MapView/MapView.website.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx index 5a709ca0f1fd..a6f4d897a9f4 100644 --- a/src/components/MapView/MapView.website.tsx +++ b/src/components/MapView/MapView.website.tsx @@ -112,14 +112,13 @@ const MapView = forwardRef( return; } - // Avoid navigationg to the same location - if (prevUserPosition.longitude === currentPosition.longitude && prevUserPosition.latitude === currentPosition.latitude) { - return; - } + // Avoid animating the naviagtion to the same location + const shouldAnimate = prevUserPosition.longitude !== currentPosition.longitude || prevUserPosition.latitude !== currentPosition.latitude; mapRef.flyTo({ center: [currentPosition.longitude, currentPosition.latitude], zoom: CONST.MAPBOX.DEFAULT_ZOOM, + animate: shouldAnimate, }); }, [currentPosition, mapRef, prevUserPosition, shouldPanMapToCurrentPosition]);