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/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)
 

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

@@ -11,7 +11,7 @@
   useBackgroundMapStore,
   useExperimentsFlagsStore
 } from '../../../hooks/store'
 import { useMapStylesQuery } from '../../../hooks/useMapStylesQuery'
 
 const MapView = (
   {
@@ -31,13 +31,7 @@
   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, setMapStyle } = useBackgroundMapStore()
 
   return (
     <>
@@ -70,7 +64,7 @@
             getMedia={getMedia}
             presets={presets}
             {...otherProps}
-            mapStyle={mapStyleUrl}
+            mapStyle={mapStyle.url}
           />
         )}
       </ViewWrapper>

src/renderer/hooks/store.js

@@ -1,10 +1,25 @@
 // @ts-check
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
+import { defineMessages } from 'react-intl'
 import store from '../../persist-store'
 
+const m = defineMessages({
+  // The name of the default background map
+  defaultBackgroundMapName: 'Default'
+})
+
+const DEFAULT_MAP = {
+  id: '487x2pc8ws801avhs5hw58qnxc',
+  url: 'mapbox://styles/mapbox/outdoors-v10',
+  bytesStored: 0,
+  name: m.defaultBackgroundMapName,
+  isImporting: false,
+  isDefault: true
+}
+
 /**
- * @typedef {import('./useMapServerQuery').MapServerStyleInfo} MapStyle
+ * @typedef { {id: string, url: string,bytesStored: number,name: import('react-intl').MessageDescriptor}} MapStyle
  */
 
 /**
@@ -56,17 +71,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 +107,26 @@ export const useExperimentsFlagsStore = createPersistedStore(
   experimentsFlagsStoreSlice,
   'experiments-flags'
 )
-export const useBackgroundMapStore = createPersistedStore(
+
+const useBackgroundMapState = createPersistedStore(
   backgroundMapStoreSlice,
   'background-maps'
 )
 export const usePersistedUiStore = createPersistedStore(
   persistedUiStoreSlice,
   'ui'
 )
+
+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

@@ -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'
@@ -42,7 +42,9 @@
         refetch: mapStylesQueryResult.refetch
       }
     : {
-        data: legacyStyleQueryResult.data,
+        data: !legacyStyleQueryResult.data
+          ? [defaultMapStyle]
+          : legacyStyleQueryResult.data,
         isLoading: legacyStyleQueryResult.isLoading,
         refetch: legacyStyleQueryResult.refetch
       }
@@ -80,7 +82,7 @@
   return queryResult
 }
 
-const useDefaultMapStyle = () => {
+export const useDefaultMapStyle = () => {
   const { formatMessage: t } = useIntl()
 
   return {