Es/example of persisted state

messages/renderer/en.json

@@ -774,6 +774,10 @@
     "description": "Message stored in text file in export if originals are missing. The message is followed by a list of filenames with missing originals",
     "message": "The original size of these files could not be found, only preview size (1,200 pixel) images are included. This can happen because the phone that took the photos has only synced to other phones, and not directly to Mapeo Desktop. To try fixing this, find the phone that took the photos and sync it with Mapeo Desktop before exporting again."
   },
+  "renderer.hooks.store.defaultBackgroundMapName": {
+    "description": "The name of the default background map",
+    "message": "Default"
+  },
   "renderer.hooks.useMapStylesQuery.defaultBackgroundMapName": {
     "description": "The name of the default background map",
     "message": "Default"

src/renderer/components/BackgroundMaps/BackgroundMapInfo.js

@@ -42,7 +42,7 @@ const m = defineMessages({
 })
 
 /**
- * @typedef {import('../../hooks/useMapServerQuery').MapServerStyleInfo & { isDefault?: boolean }} BackgroundMapInfo
+ * @typedef {import('../../hooks/store').MapStyle} BackgroundMapInfo
  * @typedef BackgroundMapInfoProps
  * @prop {BackgroundMapInfo} map
  * @prop {()=>void} unsetMapValue
@@ -52,10 +52,7 @@ const m = defineMessages({
 export const BackgroundMapInfo = ({ map, unsetMapValue }) => {
   const { formatMessage: t } = useIntl()
 
-  const [mapStyle, setMapStyle] = useBackgroundMapStore(store => [
-    store.mapStyle,
-    store.setMapStyle
-  ])
+  const [mapStyle, setMapStyle] = useBackgroundMapStore()
 
   const classes = useStyles()
 
@@ -76,7 +73,7 @@ export const BackgroundMapInfo = ({ map, unsetMapValue }) => {
         ) : (
           <>
             <MapInfo
-              name={map.name}
+              name={typeof map.name === 'string' ? map.name : t(map.name)}
               id={map.id}
               unsetMapValue={unsetMapValue}
               url={map.url}
@@ -85,7 +82,7 @@ export const BackgroundMapInfo = ({ map, unsetMapValue }) => {
             {/* Text */}
             <div className={classes.paddedContainer}>
               <Typography variant='subtitle2' style={{ fontSize: 18 }}>
-                {map.name}
+                {typeof map.name === 'string' ? map.name : t(map.name)}
               </Typography>
               {!map.isDefault ? (
                 <Typography variant='body1'>{`${Math.round(

src/renderer/components/BackgroundMaps/MapCard.js

@@ -26,16 +26,17 @@ export const MapboxPrevOnly = ReactMapboxGl({
 })
 
 /**
+ * @typedef {import('../../hooks/store').MapStyle} MapStyle
  * @typedef MapCardProps
- * @prop {import('../SettingsView/BackgroundMaps').MapServerStyleInfo & { isDefault?: boolean }} mapStyle
- * @prop {React.Dispatch<React.SetStateAction<import('../SettingsView/BackgroundMaps').MapServerStyleInfo['id'] | null>>} setMap
+ * @prop {MapStyle} mapStyle
+ * @prop {React.Dispatch<React.SetStateAction<MapStyle['id'] | null>>} setMap
  * @prop {boolean } isBeingViewed
  */
 
 /** @param {MapCardProps} param */
 export const MapCard = ({ mapStyle, setMap, isBeingViewed }) => {
   const theme = useTheme()
-  const selectedMapStyle = useBackgroundMapStore(store => store.mapStyle)
+  const [selectedMapStyle] = useBackgroundMapStore()
   const classes = useStyles()
   const { formatMessage: t } = useIntl()
 
@@ -65,7 +66,11 @@ export const MapCard = ({ mapStyle, setMap, isBeingViewed }) => {
           />
         </div>
         <div className={classes.text}>
-          <Typography>{mapStyle.name}</Typography>
+          <Typography>
+            {typeof mapStyle.name === 'string'
+              ? mapStyle.name
+              : t(mapStyle.name)}
+          </Typography>
           {!mapStyle.isDefault && (
             <Typography variant='subtitle1'>
               {`${Math.round(convertKbToMb(mapStyle.bytesStored))} ${t(m.mb)}`}

src/renderer/components/BackgroundMaps/SidePanel.js

@@ -52,14 +52,13 @@ export const SidePanel = ({ openSettings, mapValue, setMapValue }) => {
             <Loader />
           ) : data ? (
             data.map(mapStyle => (
-              <>
+              <React.Fragment key={mapStyle.id}>
                 <MapCard
                   setMap={setMapValue}
-                  key={mapStyle.id}
                   mapStyle={mapStyle}
                   isBeingViewed={mapStyle.id === mapValue}
                 />
-              </>
+              </React.Fragment>
             ))
           ) : null}
         </div>

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

@@ -1,3 +1,4 @@
+// @ts-check
 import * as React from 'react'
 import {
   Box,
@@ -33,10 +34,7 @@ const m = defineMessages({
 export const BackgroundMapSelector = ({ active, dismiss }) => {
   const classes = useStyles()
   const { formatMessage: t } = useIntl()
-  const [mapStyle, setMapStyle] = useBackgroundMapStore(store => [
-    store.mapStyle,
-    store.setMapStyle
-  ])
+  const [mapStyle, setMapStyle] = useBackgroundMapStore()
 
   const setTabIndex = usePersistedUiStore(store => store.setTabIndex)
 
@@ -62,7 +60,7 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
           </Typography>
           <Link
             className={classes.link}
-            a='#'
+            href='#'
             onClick={navigateToBackgroundMaps}
           >
             {t(m.manageMapsLink)}
@@ -91,7 +89,7 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
                   }}
                   selected={isSelected}
                   styleUrl={map.url}
-                  title={map.name}
+                  title={typeof map.name === 'string' ? map.name : t(map.name)}
                   key={map.id}
                 />
               )

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

@@ -11,7 +11,6 @@ import {
   useBackgroundMapStore,
   useExperimentsFlagsStore
 } from '../../../hooks/store'
-import { useMapStylesQuery } from '../../../hooks/useMapStylesQuery'
 
 const MapView = (
   {
@@ -31,13 +30,7 @@ const MapView = (
   const backgroundMapsFlag = useExperimentsFlagsStore(
     store => store.backgroundMaps
   )
-  const selectedMapStyle = useBackgroundMapStore(store => store.mapStyle)
-  const { data: mapStyles } = useMapStylesQuery()
-
-  const mapStyleUrl =
-    backgroundMapsFlag && selectedMapStyle
-      ? selectedMapStyle?.url
-      : mapStyles && mapStyles[0] && mapStyles[0].url
+  const [mapStyle] = useBackgroundMapStore()
 
   return (
     <>
@@ -70,7 +63,7 @@ const MapView = (
             getMedia={getMedia}
             presets={presets}
             {...otherProps}
-            mapStyle={mapStyleUrl}
+            mapStyle={mapStyle.url}
           />
         )}
       </ViewWrapper>

src/renderer/hooks/store.js

@@ -2,9 +2,17 @@
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
 import store from '../../persist-store'
+import { DEFAULT_MAP } from './useMapStylesQuery'
 
 /**
- * @typedef {import('./useMapServerQuery').MapServerStyleInfo} MapStyle
+ * @typedef { {
+ * id: string,
+ * url: string,
+ * bytesStored: number,
+ * name: import('react-intl').MessageDescriptor | string,
+ * isDefault?: boolean,
+ * isImporting?: boolean
+ * }} MapStyle
  */
 
 /**
@@ -56,17 +64,23 @@ const experimentsFlagsStoreSlice = (set, get) => ({
 
 /**
  * @typedef {{
- *  mapStyle: MapStyle | null,
- *  setMapStyle: (mapStyle: MapStyle) => void
+ *  mapStyleLegacy: MapStyle,
+ *  mapStyleMapServer: MapStyle,
+ *  setMapStyleLegacy: (mapStyle:MapStyle) => void,
+ *  setMapStyleServer: (mapStyle:MapStyle) => void
  * }} BackgroundMapStoreSlice
  */
 /**
  * @type {import('zustand').StateCreator<BackgroundMapStoreSlice>}
  */
-const backgroundMapStoreSlice = (set, get) => ({
-  mapStyle: null,
-  setMapStyle: mapStyle => set({ mapStyle })
-})
+const backgroundMapStoreSlice = (set, get) => {
+  return {
+    mapStyleLegacy: DEFAULT_MAP,
+    mapStyleMapServer: DEFAULT_MAP,
+    setMapStyleLegacy: mapStyle => set({ mapStyleLegacy: mapStyle }),
+    setMapStyleServer: mapStyle => set({ mapStyleMapServer: mapStyle })
+  }
+}
 
 /**
  * @typedef {{
@@ -86,11 +100,30 @@ export const useExperimentsFlagsStore = createPersistedStore(
   experimentsFlagsStoreSlice,
   'experiments-flags'
 )
-export const useBackgroundMapStore = createPersistedStore(
+
+const useBackgroundMapState = createPersistedStore(
   backgroundMapStoreSlice,
   'background-maps'
 )
 export const usePersistedUiStore = createPersistedStore(
   persistedUiStoreSlice,
   'ui'
 )
+
+/**
+ *
+ * @returns {[MapStyle, (mapStyle: MapStyle) => void]}
+ */
+export const useBackgroundMapStore = () => {
+  const backgroundMapsEnabled = useExperimentsFlagsStore(
+    store => store.backgroundMaps
+  )
+
+  const [mapStyle, setMapStyle] = useBackgroundMapState(store =>
+    backgroundMapsEnabled
+      ? [store.mapStyleMapServer, store.setMapStyleServer]
+      : [store.mapStyleLegacy, store.setMapStyleLegacy]
+  )
+
+  return [mapStyle, setMapStyle]
+}

src/renderer/hooks/useMapStylesQuery.js

@@ -18,6 +18,15 @@ const m = defineMessages({
   offlineBackgroundMapName: 'Offline Map'
 })
 
+export const DEFAULT_MAP = {
+  id: DEFAULT_MAP_ID,
+  url: ONLINE_STYLE_URL,
+  bytesStored: 0,
+  name: m.defaultBackgroundMapName,
+  isImporting: false,
+  isDefault: true
+}
+
 export const useMapStylesQuery = (enabled = true) => {
   const backgroundMapsEnabled = useExperimentsFlagsStore(
     store => store.backgroundMaps
@@ -30,19 +39,20 @@ export const useMapStylesQuery = (enabled = true) => {
     '/styles',
     backgroundMapsEnabled && enabled
   )
-  const defaultMapStyle = useDefaultMapStyle()
 
   const queryResult = backgroundMapsEnabled
     ? {
         data: [
-          defaultMapStyle,
+          DEFAULT_MAP,
           ...(mapStylesQueryResult?.data ? mapStylesQueryResult?.data : [])
         ],
         isLoading: mapStylesQueryResult.isLoading,
         refetch: mapStylesQueryResult.refetch
       }
     : {
-        data: legacyStyleQueryResult.data,
+        data: !legacyStyleQueryResult.data
+          ? [DEFAULT_MAP]
+          : legacyStyleQueryResult.data,
         isLoading: legacyStyleQueryResult.isLoading,
         refetch: legacyStyleQueryResult.refetch
       }
@@ -52,7 +62,6 @@ export const useMapStylesQuery = (enabled = true) => {
 
 const useLegacyMapStyleQuery = enabled => {
   const { formatMessage: t } = useIntl()
-  const defaultMapStyle = useDefaultMapStyle()
 
   const queryResult = useQuery({
     queryKey: ['getLegacyMapStyle'],
@@ -71,24 +80,11 @@ const useLegacyMapStyleQuery = enabled => {
           }
         ]
       } catch {
-        return [defaultMapStyle]
+        return [DEFAULT_MAP]
       }
     },
     enabled
   })
 
   return queryResult
 }
-
-const useDefaultMapStyle = () => {
-  const { formatMessage: t } = useIntl()
-
-  return {
-    id: DEFAULT_MAP_ID,
-    url: ONLINE_STYLE_URL,
-    bytesStored: 0,
-    name: t(m.defaultBackgroundMapName),
-    isImporting: false,
-    isDefault: true
-  }
-}