feat: implement map selection

src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js

@@ -2,6 +2,7 @@ import * as React from 'react'
 import {
   Box,
   Button,
+  Link,
   Paper,
   Slide,
   Typography,
@@ -10,8 +11,16 @@ import {
 import { defineMessages, useIntl } from 'react-intl'
 import { Close } from '@material-ui/icons'
 import { MapPreviewCard } from './MapPreviewCard'
-import { useBackgroundMapStore } from '../../../hooks/store'
-import { useMapServerQuery } from '../../../hooks/useMapServerQuery'
+import {
+  useBackgroundMapStore,
+  useExperimentsFlagsStore,
+  usePersistedUiStore
+} from '../../../hooks/store'
+import {
+  useDefaultMapStyle,
+  useMapStylesQuery
+} from '../../../hooks/useMapStylesQuery'
+import Loader from '../../Loader'
 
 const m = defineMessages({
   // Title for background maps overlay
@@ -30,51 +39,87 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
     store.setMapStyle
   ])
 
-  // will use new hook once merged
-  const { data: mapStyles, isLoading } = useMapServerQuery('/styles', false)
+  const setTabIndex = usePersistedUiStore(store => store.setTabIndex)
+
+  const navigateToBackgroundMaps = () => {
+    setTabIndex(3) // TODO: Set from an ID rather than hardcoded index
+  }
+
+  const backgroundMapsEnabled = useExperimentsFlagsStore(
+    store => store.backgroundMaps
+  )
+
+  const defaultMapStyle = useDefaultMapStyle()
+  const { isLoading, data } = useMapStylesQuery()
+
+  const mapStyles =
+    backgroundMapsEnabled && data ? [defaultMapStyle, ...data] : data
 
   return (
     <Slide direction='up' in={active} mountOnEnter unmountOnExit>
       <Paper elevation={2} className={classes.container}>
         {/* HEADER */}
         <Box className={classes.header}>
-          <Typography variant='h1' className={classes.title}>
-            {t(m.title)}
-          </Typography>
+          <Box className={classes.row}>
+            <Typography variant='h1' className={classes.title}>
+              {t(m.title)}
+            </Typography>
+            <Link
+              className={classes.link}
+              a='#'
+              onClick={navigateToBackgroundMaps}
+            >
+              {t(m.manageMapsLink)}
+            </Link>
+          </Box>
           <Button onClick={dismiss} color='primary'>
             {t(m.close)}
             <Close />
           </Button>
         </Box>
         {/* MAP STYLES ROW */}
-        <Box className={classes.styleRow}>
-          {mapStyles
-            .filter(({ isImporting }) => !isImporting)
-            .map(({ id, url, name }) => {
-              const isSelected = mapStyle === id
-              return (
-                <>
-                  <div className={classes.mapCardWrapper} key={id}>
-                    <MapPreviewCard
-                      onClick={() => {
-                        if (isSelected) return
-                        dismiss()
-                        setMapStyle(id)
-                      }}
-                      selected={isSelected}
-                      styleUrl={url}
-                      title={name}
-                    />
-                  </div>
-                </>
-              )
-            })}
-        </Box>
+        {isLoading ? (
+          <Loading />
+        ) : (
+          <Box className={classes.styleRow}>
+            {mapStyles
+              .filter(({ isImporting }) => !isImporting)
+              .map(({ id, url, name }) => {
+                const isSelected = mapStyle === id
+                return (
+                  <>
+                    <div className={classes.mapCardWrapper} key={id}>
+                      <MapPreviewCard
+                        onClick={() => {
+                          if (isSelected) return
+                          dismiss()
+                          setMapStyle(id)
+                        }}
+                        selected={isSelected}
+                        styleUrl={url}
+                        title={name}
+                      />
+                    </div>
+                  </>
+                )
+              })}
+          </Box>
+        )}
       </Paper>
     </Slide>
   )
 }
 
+const Loading = () => {
+  const classes = useStyles()
+
+  return (
+    <Box className={classes.loaderContainer}>
+      <Loader />
+    </Box>
+  )
+}
+
 const useStyles = makeStyles(theme => ({
   container: {
     borderRadius: '10px 10px 0px 0px',
@@ -98,11 +143,26 @@ const useStyles = makeStyles(theme => ({
     fontWeight: 500,
     marginRight: 5
   },
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
   styleRow: {
     display: 'flex',
     padding: 22
   },
+  link: {
+    cursor: 'pointer'
+  },
   mapCardWrapper: {
     marginRight: 32
+  },
+  loaderContainer: {
+    width: '100%',
+    marginTop: '10%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 }))

src/renderer/components/MapFilter/MapView/MapView.js

@@ -5,6 +5,8 @@ import ViewWrapper from '../ViewWrapper'
 import { Avatar, makeStyles } from '@material-ui/core'
 import { LayersOutlined } from '@material-ui/icons'
 import { BackgroundMapSelector } from './BackgroundMapSelector'
+import { useSelectedMapStyle } from '../../../hooks/useMapStylesQuery'
+import { useExperimentsFlagsStore } from '../../../hooks/store'
 
 const MapView = (
   {
@@ -21,13 +23,20 @@ const MapView = (
   const [backgroundMapSelectorOpen, setBackgroundMapSelectorOpen] = useState(
     false
   )
+  const backgroundMapsFlag = useExperimentsFlagsStore(
+    store => store.backgroundMaps
+  )
+  const selectedMapStyle = useSelectedMapStyle()
+
   return (
     <>
-      <MapLayerButton
-        onClick={() =>
-          setBackgroundMapSelectorOpen(selectorWasOpen => !selectorWasOpen)
-        }
-      />
+      {backgroundMapsFlag ? (
+        <MapLayerButton
+          onClick={() =>
+            setBackgroundMapSelectorOpen(selectorWasOpen => !selectorWasOpen)
+          }
+        />
+      ) : null}
       <ViewWrapper
         observations={observations}
         onUpdateObservation={onUpdateObservation}
@@ -50,11 +59,12 @@ const MapView = (
             getMedia={getMedia}
             presets={presets}
             {...otherProps}
+            mapStyle={selectedMapStyle && selectedMapStyle?.url}
           />
         )}
       </ViewWrapper>
       <BackgroundMapSelector
-        active={backgroundMapSelectorOpen}
+        active={backgroundMapsFlag && backgroundMapSelectorOpen}
         dismiss={() => setBackgroundMapSelectorOpen(false)}
       />
     </>

src/renderer/components/SettingsView/ExperimentsMenu.js

@@ -13,8 +13,6 @@ export const ExperiementsMenu = () => {
     store => [store.backgroundMaps, store.setBackgroundMapsFlag]
   )
 
-  console.log({ backgroundMaps, setBackgroundMaps })
-
   const toggleBackgroundMaps = () => {
     setBackgroundMaps(!backgroundMaps)
   }

src/renderer/hooks/useMapStylesQuery.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { useExperimentsFlagsStore } from './store'
+import { useBackgroundMapStore, useExperimentsFlagsStore } from './store'
 import { useMapServerQuery } from './useMapServerQuery'
 import { useQuery } from '@tanstack/react-query'
 import api from '../new-api'
@@ -34,6 +34,7 @@ export const useMapStylesQuery = () => {
 
 export const useLegacyMapStyleQuery = enabled => {
   const { formatMessage: t } = useIntl()
+  const defaultMapStyle = useDefaultMapStyle()
 
   const queryResult = useQuery({
     queryKey: ['getLegacyMapStyle'],
@@ -51,19 +52,40 @@ export const useLegacyMapStyleQuery = enabled => {
           }
         ]
       } catch {
-        return [
-          {
-            id: DEFAULT_MAP_ID,
-            url: ONLINE_STYLE_URL,
-            bytesStored: 0,
-            name: t(m.defaultBackgroundMapName),
-            isImporting: false
-          }
-        ]
+        return [defaultMapStyle]
       }
     },
     enabled
   })
 
   return queryResult
 }
+
+export const useDefaultMapStyle = () => {
+  const { formatMessage: t } = useIntl()
+
+  return {
+    id: DEFAULT_MAP_ID,
+    url: ONLINE_STYLE_URL,
+    bytesStored: 0,
+    name: t(m.defaultBackgroundMapName),
+    isImporting: false
+  }
+}
+
+export const useSelectedMapStyle = () => {
+  const backgroundMapsFlag = useExperimentsFlagsStore(
+    store => store.backgroundMaps
+  )
+  const backgroundMapStyleId = useBackgroundMapStore(store => store.mapStyle)
+  const defaultMapStyle = useDefaultMapStyle()
+
+  const { data: mapStyles, isLoading } = useMapStylesQuery()
+
+  if (isLoading || !mapStyles) return defaultMapStyle
+
+  return backgroundMapsFlag
+    ? mapStyles?.find(style => style.id === backgroundMapStyleId) ||
+        defaultMapStyle
+    : mapStyles && mapStyles[0]
+}