fix: set and remember city selection

Author: anandaroop

src/app/Scenes/CityGuide/CityGuide.tsx

@@ -1,32 +1,33 @@
-import { Flex, Spinner } from "@artsy/palette-mobile"
 import { MapRenderer } from "app/Scenes/Map/MapRenderer"
 import { cityNearLocation } from "app/Scenes/Map/helpers/cityNearLocation"
 import { GlobalStore } from "app/store/GlobalStore"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { useLocation } from "app/utils/hooks/useLocation"
-import { useEffect } from "react"
-import cities from "../../../../data/cityDataSortedByDisplayPreference.json"
+import expandedCities from "../../../../data/cityDataSortedByDisplayPreference-expanded.json"
+import originalCities from "../../../../data/cityDataSortedByDisplayPreference.json"
 
 export const CityGuide: React.FC = () => {
+  const enabledExpandedList = useFeatureFlag("AREnableExpandedCityGuide")
+  const cities = enabledExpandedList ? expandedCities : originalCities
+
   const previouslySelectedCitySlug = GlobalStore.useAppState(
     (state) => state.userPrefs.previouslySelectedCitySlug
   )
-  const { setPreviouslySelectedCitySlug } = GlobalStore.actions.userPrefs
 
-  const { location, isLoading } = useLocation()
+  const { location } = useLocation()
+
+  let initialCitySlug = "new-york-ny-usa"
 
-  useEffect(() => {
-    if (location && cityNearLocation(cities, location)) {
-      setPreviouslySelectedCitySlug(cityNearLocation(cities, location)?.slug ?? "")
+  if (location) {
+    const nearest = cityNearLocation(cities, location)
+    if (nearest) {
+      initialCitySlug = nearest.slug
     }
-  }, [location])
+  }
 
-  if (isLoading && !previouslySelectedCitySlug) {
-    return (
-      <Flex flex={1} justifyContent="center" alignItems="center">
-        <Spinner />
-      </Flex>
-    )
+  if (previouslySelectedCitySlug) {
+    initialCitySlug = previouslySelectedCitySlug
   }
 
-  return <MapRenderer citySlug={previouslySelectedCitySlug ?? "new-york-ny-usa"} />
+  return <MapRenderer citySlug={initialCitySlug} />
 }

src/app/Scenes/Map/GlobalMap.tsx

@@ -8,6 +8,7 @@ import { CityData, CityPicker } from "app/Scenes/City/CityPicker"
 import { cityTabs } from "app/Scenes/City/cityTabs"
 import { SelectedPin } from "app/Scenes/Map/Components/SelectedPin"
 import { MAX_GRAPHQL_INT } from "app/Scenes/Map/MapRenderer"
+import { GlobalStore } from "app/store/GlobalStore"
 import {
   convertCityToGeoJSON,
   fairToGeoCityFairs,
@@ -101,6 +102,28 @@ export const GlobalMap: React.FC<Props> = (props) => {
   const navigation = useNavigation()
 
   useEffect(() => {
+    const onPressCitySwitcherButton = () => {
+      if (!showCityPicker) {
+        // Show the city picker
+        setShowCityPicker(true)
+        setActiveShows([])
+        setActivePin(null)
+      } else {
+        // Hide the city picker
+        setShowCityPicker(false)
+      }
+    }
+
+    const onPressUserPositionButton = () => {
+      // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
+      const { lat, lng } = userLocation
+      cameraRef.current?.setCamera({
+        centerCoordinate: [lng, lat],
+        zoomLevel: DefaultZoomLevel,
+        animationDuration: 500,
+      })
+    }
+
     navigation.setOptions({
       headerRight: () => {
         return (
@@ -135,7 +158,16 @@ export const GlobalMap: React.FC<Props> = (props) => {
         )
       },
     })
-  }, [navigation, viewer, userLocation, showCityPicker, activePin])
+  }, [
+    navigation,
+    viewer,
+    userLocation,
+    showCityPicker,
+    activePin,
+    hideButtons,
+    safeAreaInsets.top,
+    currentLocation,
+  ])
 
   useEffect(() => {
     updateShowIdMap()
@@ -342,27 +374,7 @@ export const GlobalMap: React.FC<Props> = (props) => {
     }
   }
 
-  const onPressCitySwitcherButton = () => {
-    if (!showCityPicker) {
-      // Show the city picker
-      setShowCityPicker(true)
-      setActiveShows([])
-      setActivePin(null)
-    } else {
-      // Hide the city picker
-      setShowCityPicker(false)
-    }
-  }
-
-  const onPressUserPositionButton = () => {
-    // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
-    const { lat, lng } = userLocation
-    cameraRef.current?.setCamera({
-      centerCoordinate: [lng, lat],
-      zoomLevel: DefaultZoomLevel,
-      animationDuration: 500,
-    })
-  }
+  const { setPreviouslySelectedCitySlug } = GlobalStore.actions.userPrefs
 
   const currentFeatureCollection = (): FilterData => {
     const filterID = cityTabs[activeIndex].id
@@ -483,6 +495,8 @@ export const GlobalMap: React.FC<Props> = (props) => {
 
   const onSelectCity = (newCity: CityData) => {
     setShowCityPicker(false)
+    console.warn("setPreviouslySelectedCitySlug", newCity.slug)
+    setPreviouslySelectedCitySlug(newCity.slug)
     refetch({ citySlug: newCity.slug, maxInt: MAX_GRAPHQL_INT })
   }
 
@@ -518,7 +532,7 @@ export const GlobalMap: React.FC<Props> = (props) => {
         >
           <MapboxGL.Camera
             ref={cameraRef}
-            animationMode="flyTo"
+            animationMode="moveTo"
             zoomLevel={DefaultZoomLevel}
             minZoomLevel={MinZoomLevel}
             maxZoomLevel={MaxZoomLevel}