From 203e3615b596dffc1c8cdd049708b772fb32eb6f Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 29 May 2024 22:38:53 +0700 Subject: [PATCH 1/2] fix: pending map in iou confirmation step --- src/components/MapView/MapView.tsx | 9 +++++---- src/components/MapView/MapView.website.tsx | 9 +++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index 5174db6fd32f..0a305c42272f 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -30,7 +30,8 @@ const MapView = forwardRef( const cameraRef = useRef(null); const [isIdle, setIsIdle] = useState(false); - const [currentPosition, setCurrentPosition] = useState(cachedUserLocation); + const initialLocation = initialState && {longitude: initialState.location[0], latitude: initialState.location[1]}; + const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation); const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); const shouldInitializeCurrentPosition = useRef(true); @@ -42,13 +43,13 @@ const MapView = forwardRef( const setCurrentPositionToInitialState: GeolocationErrorCallback = useCallback( (error) => { - if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialState) { + if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialLocation) { return; } UserLocation.clearUserLocation(); - setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]}); + setCurrentPosition(initialLocation); }, - [initialState], + [initialLocation], ); useFocusEffect( diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx index e75d47305d90..21ebace6c307 100644 --- a/src/components/MapView/MapView.website.tsx +++ b/src/components/MapView/MapView.website.tsx @@ -52,7 +52,8 @@ const MapView = forwardRef( const StyleUtils = useStyleUtils(); const [mapRef, setMapRef] = useState(null); - const [currentPosition, setCurrentPosition] = useState(cachedUserLocation); + const initialLocation = {longitude: initialState.location[0], latitude: initialState.location[1]}; + const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation); const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); const [shouldResetBoundaries, setShouldResetBoundaries] = useState(false); const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []); @@ -66,13 +67,13 @@ const MapView = forwardRef( const setCurrentPositionToInitialState: GeolocationErrorCallback = useCallback( (error) => { - if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialState) { + if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialLocation) { return; } UserLocation.clearUserLocation(); - setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]}); + setCurrentPosition(initialLocation); }, - [initialState], + [initialLocation], ); useFocusEffect( From 43796ef9bad93694a81c44951387c642bc399029 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 29 May 2024 22:54:38 +0700 Subject: [PATCH 2/2] fix lint --- src/components/MapView/MapView.tsx | 4 ++-- src/components/MapView/MapView.website.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index 0a305c42272f..2e304bb0214b 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -1,7 +1,7 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'; import type {MapState} from '@rnmapbox/maps'; import Mapbox, {MarkerView, setAccessToken} from '@rnmapbox/maps'; -import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -30,7 +30,7 @@ const MapView = forwardRef( const cameraRef = useRef(null); const [isIdle, setIsIdle] = useState(false); - const initialLocation = initialState && {longitude: initialState.location[0], latitude: initialState.location[1]}; + const initialLocation = useMemo(() => initialState && {longitude: initialState.location[0], latitude: initialState.location[1]}, [initialState]); const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation); const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); const shouldInitializeCurrentPosition = useRef(true); diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx index 21ebace6c307..f59463442ac8 100644 --- a/src/components/MapView/MapView.website.tsx +++ b/src/components/MapView/MapView.website.tsx @@ -5,7 +5,7 @@ import {useFocusEffect} from '@react-navigation/native'; import mapboxgl from 'mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; -import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import type {MapRef} from 'react-map-gl'; import Map, {Marker} from 'react-map-gl'; import {View} from 'react-native'; @@ -52,7 +52,7 @@ const MapView = forwardRef( const StyleUtils = useStyleUtils(); const [mapRef, setMapRef] = useState(null); - const initialLocation = {longitude: initialState.location[0], latitude: initialState.location[1]}; + const initialLocation = useMemo(() => ({longitude: initialState.location[0], latitude: initialState.location[1]}), [initialState]); const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation); const [userInteractedWithMap, setUserInteractedWithMap] = useState(false); const [shouldResetBoundaries, setShouldResetBoundaries] = useState(false);