From 0f155562bf715d6f5fc6ab03ad3ba896f0968c61 Mon Sep 17 00:00:00 2001
From: lightlii <32508751+lightlii@users.noreply.github.com>
Date: Wed, 30 Aug 2023 14:52:46 +0200
Subject: [PATCH] fix: save full map style in store and get rid of lookp hook +
 more tidying up

---
 .../BackgroundMaps/BackgroundMapInfo.js       | 73 +++++++++++--------
 .../components/BackgroundMaps/MapCard.js      | 27 +++----
 .../components/BackgroundMaps/SidePanel.js    |  8 +-
 .../MapView/BackgroundMapSelector.js          | 12 +--
 .../MapFilter/MapView/MapPreviewCard.js       |  2 +-
 .../components/MapFilter/MapView/MapView.js   |  7 +-
 .../components/SettingsView/BackgroundMaps.js | 33 ++++-----
 src/renderer/hooks/store.js                   | 10 ++-
 src/renderer/hooks/useMapStylesQuery.js       | 13 +---
 9 files changed, 95 insertions(+), 90 deletions(-)

diff --git a/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js b/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
index 62ada0d5..85ef795c 100644
--- a/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
+++ b/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
@@ -4,14 +4,22 @@ import * as React from 'react'
 import { defineMessages, useIntl } from 'react-intl'
 import DeleteIcon from '@material-ui/icons/DeleteForeverOutlined'
 import CheckIcon from '@material-ui/icons/Check'
+import ReactMapboxGl from 'react-mapbox-gl'
 
+import { MAPBOX_ACCESS_TOKEN } from '../../../../config'
 import Loading from '../Loading'
-import { useMapServerQuery } from '../../hooks/useMapServerQuery'
-import { MapboxPrevOnly } from './MapCard'
 import { convertKbToMb } from '../SettingsView/BackgroundMaps'
 import { useMapServerMutation } from '../../hooks/useMapServerMutation'
 import { useBackgroundMapStore } from '../../hooks/store'
 
+const MapboxPrevOnly = ReactMapboxGl({
+  accessToken: MAPBOX_ACCESS_TOKEN,
+  dragRotate: false,
+  pitchWithRotate: false,
+  attributionControl: false,
+  injectCSS: false
+})
+
 const m = defineMessages({
   // Title for Offline Areas
   offlineAreas: 'Offline Areas',
@@ -34,15 +42,14 @@ const m = defineMessages({
 })
 
 /**
+ * @typedef {import('../../hooks/useMapServerQuery').MapServerStyleInfo & { isDefault?: boolean }} BackgroundMapInfo
  * @typedef BackgroundMapInfoProps
- * @prop {string} id
- * @prop {string} url
- * @prop {number} size
+ * @prop {BackgroundMapInfo} map
  * @prop {()=>void} unsetMapValue
  */
 
 /** @param {BackgroundMapInfoProps} props */
-export const BackgroundMapInfo = ({ id, unsetMapValue, url, size }) => {
+export const BackgroundMapInfo = ({ map, unsetMapValue }) => {
   const { formatMessage: t } = useIntl()
 
   const [mapStyle, setMapStyle] = useBackgroundMapStore(store => [
@@ -50,10 +57,11 @@ export const BackgroundMapInfo = ({ id, unsetMapValue, url, size }) => {
     store.setMapStyle
   ])
 
-  const { data } = useMapServerQuery(`/styles/${id}`)
   const classes = useStyles()
 
-  const isCurrentMap = mapStyle === id
+  const isCurrentMap = mapStyle?.id === map.id
+
+  console.log({ map })
 
   return (
     <Fade in timeout={0}>
@@ -62,38 +70,36 @@ export const BackgroundMapInfo = ({ id, unsetMapValue, url, size }) => {
           flex: 1,
           width: '100%',
           height: '100%',
-          padding: !data ? 40 : 0
+          padding: !map ? 40 : 0
         }}
       >
-        {!data ? (
+        {!map ? (
           <Loading />
         ) : (
           <>
             <MapInfo
-              name={data.name}
-              id={id}
+              name={map.name}
+              id={map.id}
               unsetMapValue={unsetMapValue}
-              url={url}
+              url={map.url}
+              isDefault={map.isDefault}
             />
             {/* Text */}
             <div className={classes.paddedContainer}>
               <Typography variant='subtitle2' style={{ fontSize: 18 }}>
-                {data.name}
+                {map.name}
               </Typography>
-              {data.zoom && (
-                <Typography variant='body1'>
-                  {t(m.zoomLevel, { zoom: data.zoom })}
-                </Typography>
-              )}
-              <Typography variant='body1'>{`${Math.round(
-                convertKbToMb(size)
-              )} ${t(m.mb)}`}</Typography>
+              {!map.isDefault ? (
+                <Typography variant='body1'>{`${Math.round(
+                  convertKbToMb(map.bytesStored)
+                )} ${t(m.mb)}`}</Typography>
+              ) : null}
               <Button
                 variant='outlined'
-                onClick={() => setMapStyle(id)}
+                onClick={() => setMapStyle(map)}
                 className={`${classes.paddedButton} ${isCurrentMap &&
                   classes.iconButton}`}
-                disabled={id === mapStyle}
+                disabled={map.id === mapStyle?.id}
               >
                 <Typography
                   style={{ textTransform: 'none' }}
@@ -113,14 +119,15 @@ export const BackgroundMapInfo = ({ id, unsetMapValue, url, size }) => {
 
 /**
  * @typedef MapInfoProps
- * @prop {string|undefined} name
+ * @prop {string|null|undefined} name
  * @prop {string} id
  * @prop {()=>void} unsetMapValue
  * @prop {string} url
+ * @prop {boolean | undefined} isDefault
  */
 
 /** @param {MapInfoProps} props */
-const MapInfo = ({ name, id, unsetMapValue, url }) => {
+const MapInfo = ({ name, id, isDefault, unsetMapValue, url }) => {
   const classes = useStyles()
 
   const { formatMessage: t } = useIntl()
@@ -138,12 +145,14 @@ const MapInfo = ({ name, id, unsetMapValue, url }) => {
         <Typography variant='h5'>{name}</Typography>
 
         <div>
-          <Button variant='outlined' onClick={() => deleteMap()}>
-            <DeleteIcon className={classes.icon} />
-            <Typography style={{ textTransform: 'none' }} variant='subtitle2'>
-              {t(m.deleteStyle)}
-            </Typography>
-          </Button>
+          {!isDefault && (
+            <Button variant='outlined' onClick={() => deleteMap()}>
+              <DeleteIcon className={classes.icon} />
+              <Typography style={{ textTransform: 'none' }} variant='subtitle2'>
+                {t(m.deleteStyle)}
+              </Typography>
+            </Button>
+          )}
         </div>
       </Paper>
 
diff --git a/src/renderer/components/BackgroundMaps/MapCard.js b/src/renderer/components/BackgroundMaps/MapCard.js
index 1953c77e..ea36c6be 100644
--- a/src/renderer/components/BackgroundMaps/MapCard.js
+++ b/src/renderer/components/BackgroundMaps/MapCard.js
@@ -21,23 +21,21 @@ const m = defineMessages({
 
 export const MapboxPrevOnly = ReactMapboxGl({
   accessToken: MAPBOX_ACCESS_TOKEN,
-  dragRotate: false,
-  pitchWithRotate: false,
-  attributionControl: false,
+  interactive: false,
   injectCSS: false
 })
 
 /**
  * @typedef MapCardProps
- * @prop {import('../SettingsView/BackgroundMaps').MapServerStyleInfo} offlineMap
+ * @prop {import('../SettingsView/BackgroundMaps').MapServerStyleInfo & { isDefault?: boolean }} mapStyle
  * @prop {React.Dispatch<React.SetStateAction<import('../SettingsView/BackgroundMaps').MapServerStyleInfo['id'] | null>>} setMap
  * @prop {boolean } isBeingViewed
  */
 
 /** @param {MapCardProps} param */
-export const MapCard = ({ offlineMap, setMap, isBeingViewed }) => {
+export const MapCard = ({ mapStyle, setMap, isBeingViewed }) => {
   const theme = useTheme()
-  const mapStyle = useBackgroundMapStore(store => store.mapStyle)
+  const selectedMapStyle = useBackgroundMapStore(store => store.mapStyle)
   const classes = useStyles()
   const { formatMessage: t } = useIntl()
 
@@ -45,7 +43,7 @@ export const MapCard = ({ offlineMap, setMap, isBeingViewed }) => {
     <Button
       variant='outlined'
       className={classes.root}
-      onClick={() => setMap(offlineMap.id)}
+      onClick={() => setMap(mapStyle.id)}
     >
       <div
         className={classes.inner}
@@ -61,18 +59,21 @@ export const MapCard = ({ offlineMap, setMap, isBeingViewed }) => {
               height: '100%',
               width: '100%'
             }}
-            style={offlineMap.url}
+            style={mapStyle.url}
             zoom={[0]}
+            center={[-77, 0]}
           />
         </div>
         <div className={classes.text}>
-          <Typography>{offlineMap.name}</Typography>
-          <Typography variant='subtitle1'>
-            {`${Math.round(convertKbToMb(offlineMap.bytesStored))} ${t(m.mb)}`}
-          </Typography>
+          <Typography>{mapStyle.name}</Typography>
+          {!mapStyle.isDefault && (
+            <Typography variant='subtitle1'>
+              {`${Math.round(convertKbToMb(mapStyle.bytesStored))} ${t(m.mb)}`}
+            </Typography>
+          )}
         </div>
         <div className={classes.detail}>
-          {mapStyle === offlineMap.id && (
+          {selectedMapStyle?.id === mapStyle.id && (
             <Chip
               size='small'
               style={{
diff --git a/src/renderer/components/BackgroundMaps/SidePanel.js b/src/renderer/components/BackgroundMaps/SidePanel.js
index be6a07c2..ab68fac5 100644
--- a/src/renderer/components/BackgroundMaps/SidePanel.js
+++ b/src/renderer/components/BackgroundMaps/SidePanel.js
@@ -51,13 +51,13 @@ export const SidePanel = ({ openSettings, mapValue, setMapValue }) => {
           {isLoading ? (
             <Loader />
           ) : data ? (
-            data.map(offlineMap => (
+            data.map(mapStyle => (
               <>
                 <MapCard
                   setMap={setMapValue}
-                  key={offlineMap.id}
-                  offlineMap={offlineMap}
-                  isBeingViewed={offlineMap.id === mapValue}
+                  key={mapStyle.id}
+                  mapStyle={mapStyle}
+                  isBeingViewed={mapStyle.id === mapValue}
                 />
               </>
             ))
diff --git a/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js b/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
index 1668e409..e83e5649 100644
--- a/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
+++ b/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
@@ -80,19 +80,19 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
         <Box className={classes.styleRow}>
           {mapStyles
             .filter(({ isImporting }) => !isImporting)
-            .map(({ id, url, name }) => {
-              const isSelected = mapStyle === id
+            .map(map => {
+              const isSelected = mapStyle?.id === map.id
               return (
                 <MapPreviewCard
                   onClick={() => {
                     if (isSelected) return
                     dismiss()
-                    setMapStyle(id)
+                    setMapStyle(map)
                   }}
                   selected={isSelected}
-                  styleUrl={url}
-                  title={name}
-                  key={id}
+                  styleUrl={map.url}
+                  title={map.name}
+                  key={map.id}
                 />
               )
             })}
diff --git a/src/renderer/components/MapFilter/MapView/MapPreviewCard.js b/src/renderer/components/MapFilter/MapView/MapPreviewCard.js
index bdac17e3..1b5cc2c4 100644
--- a/src/renderer/components/MapFilter/MapView/MapPreviewCard.js
+++ b/src/renderer/components/MapFilter/MapView/MapPreviewCard.js
@@ -33,7 +33,7 @@ export const MapPreviewCard = ({ onClick, selected, styleUrl, title }) => {
               pointerEvents: 'none'
             }}
             style={styleUrl}
-            center={[-75, -0]}
+            center={[-77, 0]}
             zoom={[0]}
           />
         </div>
diff --git a/src/renderer/components/MapFilter/MapView/MapView.js b/src/renderer/components/MapFilter/MapView/MapView.js
index 507180db..63639cf0 100644
--- a/src/renderer/components/MapFilter/MapView/MapView.js
+++ b/src/renderer/components/MapFilter/MapView/MapView.js
@@ -6,7 +6,10 @@ 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'
+import {
+  useBackgroundMapStore,
+  useExperimentsFlagsStore
+} from '../../../hooks/store'
 
 const MapView = (
   {
@@ -26,7 +29,7 @@ const MapView = (
   const backgroundMapsFlag = useExperimentsFlagsStore(
     store => store.backgroundMaps
   )
-  const selectedMapStyle = useSelectedMapStyle()
+  const selectedMapStyle = useBackgroundMapStore(store => store.mapStyle)
 
   return (
     <>
diff --git a/src/renderer/components/SettingsView/BackgroundMaps.js b/src/renderer/components/SettingsView/BackgroundMaps.js
index b447acda..e7d6d944 100644
--- a/src/renderer/components/SettingsView/BackgroundMaps.js
+++ b/src/renderer/components/SettingsView/BackgroundMaps.js
@@ -18,36 +18,37 @@ const m = defineMessages({
  * @typedef BackgroundMapsProps
  * @prop {()=>void} returnToSettings
  */
-
 /** @param {BackgroundMapsProps} param */
 export const BackgroundMaps = ({ returnToSettings }) => {
   const { formatMessage: t } = useIntl()
 
   /** @type {MapServerStyleInfo['id']|null} */
-  const initialMapId = /** {const} */ null
+  const initialMapId = null
 
-  const [mapValue, setMapValue] = React.useState(initialMapId)
+  const [viewingMapId, setViewingMapId] = React.useState(
+    /** @type {string | null} */ (initialMapId)
+  )
 
   const { data } = useMapStylesQuery()
 
-  function unsetMapValue () {
-    setMapValue(null)
+  function unsetViewingMap () {
+    setViewingMapId(null)
   }
 
-  const offlineMap = React.useMemo(
-    () => data && data.find(m => m.id === mapValue),
-    [data, mapValue]
+  const viewingMap = React.useMemo(
+    () => data && data.find(m => m.id === viewingMapId),
+    [data, viewingMapId]
   )
 
   return (
     <>
       <SidePanel
-        mapValue={mapValue}
+        mapValue={viewingMapId}
         openSettings={returnToSettings}
-        setMapValue={setMapValue}
+        setMapValue={setViewingMapId}
       />
 
-      {!mapValue || !data ? (
+      {!viewingMapId || !data ? (
         <div style={{ padding: 40 }}>
           <Typography variant='h4'> {t(m.mapBackgroundTitle)}</Typography>
 
@@ -62,13 +63,11 @@ export const BackgroundMaps = ({ returnToSettings }) => {
             <br />
           </Typography>
         </div>
-      ) : offlineMap ? (
+      ) : viewingMap ? (
         <BackgroundMapInfo
-          key={offlineMap.id}
-          size={offlineMap.bytesStored}
-          id={offlineMap.id}
-          unsetMapValue={unsetMapValue}
-          url={offlineMap.url}
+          key={viewingMap.id}
+          map={viewingMap}
+          unsetMapValue={unsetViewingMap}
         />
       ) : null}
     </>
diff --git a/src/renderer/hooks/store.js b/src/renderer/hooks/store.js
index aebcc11c..43acaa1a 100644
--- a/src/renderer/hooks/store.js
+++ b/src/renderer/hooks/store.js
@@ -3,6 +3,10 @@ import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
 import store from '../../persist-store'
 
+/**
+ * @typedef {import('./useMapServerQuery').MapServerStyleInfo} MapStyle
+ */
+
 /**
  * @type {import('zustand/middleware').StateStorage}
  */
@@ -52,15 +56,15 @@ const experimentsFlagsStoreSlice = (set, get) => ({
 
 /**
  * @typedef {{
- *  mapStyle: string,
- *  setMapStyle: (mapStyle: string) => void
+ *  mapStyle: MapStyle | null,
+ *  setMapStyle: (mapStyle: MapStyle) => void
  * }} BackgroundMapStoreSlice
  */
 /**
  * @type {import('zustand').StateCreator<BackgroundMapStoreSlice>}
  */
 const backgroundMapStoreSlice = (set, get) => ({
-  mapStyle: '',
+  mapStyle: null,
   setMapStyle: mapStyle => set({ mapStyle })
 })
 
diff --git a/src/renderer/hooks/useMapStylesQuery.js b/src/renderer/hooks/useMapStylesQuery.js
index 55f15fc4..d863457a 100644
--- a/src/renderer/hooks/useMapStylesQuery.js
+++ b/src/renderer/hooks/useMapStylesQuery.js
@@ -1,5 +1,5 @@
 // @ts-check
-import { useBackgroundMapStore, useExperimentsFlagsStore } from './store'
+import { useExperimentsFlagsStore } from './store'
 import { useMapServerQuery } from './useMapServerQuery'
 import { useQuery } from '@tanstack/react-query'
 import api from '../new-api'
@@ -91,14 +91,3 @@ const useDefaultMapStyle = () => {
     isDefault: true
   }
 }
-
-export const useSelectedMapStyle = () => {
-  const backgroundMapStyleId = useBackgroundMapStore(store => store.mapStyle)
-
-  const { data: mapStyles } = useMapStylesQuery()
-
-  return (
-    mapStyles?.find(style => style.id === backgroundMapStyleId) ||
-    (mapStyles && mapStyles[0])
-  )
-}