Merge pull request #26998 from pradeepmdk/fix/26589-map-route-is-not-…

…genrated map not loading when online
Expensify · Sep 26, 2023 · cd96293 · cd96293
2 parents 3e9fdf6 + 3ebb638
commit cd96293
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
@@ -6,6 +6,7 @@
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react';
 import {View} from 'react-native';
 import Map, {MapRef, Marker} from 'react-map-gl';
+import mapboxgl from 'mapbox-gl';
 
 import responder from './responder';
 import utils from './utils';
@@ -81,6 +82,7 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(
             >
                 <Map
                     ref={setRef}
+                    mapLib={mapboxgl}
                     mapboxAccessToken={accessToken}
                     initialViewState={{
                         longitude: initialState.location[0],

diff --git a/src/libs/actions/MapboxToken.js b/src/libs/actions/MapboxToken.js
@@ -46,11 +46,15 @@ const hasTokenExpired = () => moment().isAfter(currentToken.expiration);
 
 const clearToken = () => {
     console.debug('[MapboxToken] Deleting the token stored in Onyx');
-
     // Use Onyx.set() to delete the key from Onyx, which will trigger a new token to be retrieved from the API.
     Onyx.set(ONYXKEYS.MAPBOX_ACCESS_TOKEN, null);
 };
 
+const fetchToken = () => {
+    API.read('GetMapboxAccessToken');
+    isCurrentlyFetchingToken = true;
+};
+
 const init = () => {
     if (connectionIDForToken) {
         console.debug('[MapboxToken] init() is already listening to Onyx so returning early');
@@ -83,9 +87,7 @@ const init = () => {
             // If the token is falsy or an empty object, the token needs to be retrieved from the API.
             // The API sets a token in Onyx with a 30 minute expiration.
             if (_.isEmpty(token)) {
-                console.debug('[MapboxToken] Token does not exist so fetching one');
-                API.read('GetMapboxAccessToken');
-                isCurrentlyFetchingToken = true;
+                fetchToken();
                 return;
             }
 
@@ -126,9 +128,13 @@ const init = () => {
             callback: (val) => {
                 // When the network reconnects, check if the token has expired. If it has, then clearing the token will
                 // trigger the fetch of a new one
-                if (network && network.isOffline && val && !val.isOffline && !isCurrentlyFetchingToken && hasTokenExpired()) {
-                    console.debug('[MapboxToken] Token is expired after network came online');
-                    clearToken();
+                if (network && network.isOffline && val && !val.isOffline) {
+                    if (_.isEmpty(currentToken)) {
+                        fetchToken();
+                    } else if (!isCurrentlyFetchingToken && hasTokenExpired()) {
+                        console.debug('[MapboxToken] Token is expired after network came online');
+                        clearToken();
+                    }
                 }
                 network = val;
             },