Ej/ useMapStylesQuery hook

package.json

@@ -104,7 +104,6 @@
     "clone-deep": "^4.0.1",
     "clsx": "^1.0.4",
     "compare-versions": "^3.6.0",
-    "conf": "^6.2.4",
     "core-js": "^3.3.5",
     "d3-dsv": "^1.1.1",
     "date-fns": "^2.1.0",
@@ -114,6 +113,7 @@
     "electron-debug": "^1.5.0",
     "electron-is-dev": "^2.0.0",
     "electron-rabbit": "^1.0.3",
+    "electron-store": "^8.1.0",
     "electron-timber": "^0.5.1",
     "electron-updater": "^4.3.9",
     "flat": "^5.0.0",
@@ -185,7 +185,8 @@
     "validate-color": "^2.2.1",
     "winston": "^3.2.1",
     "winston-daily-rotate-file": "^4.4.2",
-    "yazl": "^2.5.1"
+    "yazl": "^2.5.1",
+    "zustand": "^4.3.9"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",

src/logger.js

@@ -4,7 +4,7 @@ const DailyRotateFile = require('winston-daily-rotate-file')
 const util = require('util')
 const { format } = require('date-fns')
 
-const store = require('./store')
+const store = require('./persist-store')
 const appVersion = require('./build-config').version
 
 let Bugsnag

src/main/auto-updater.js

@@ -5,7 +5,7 @@ const compareVersions = require('compare-versions')
 const currentVersion = require('../build-config').version
 
 const networkSpeed = require('./network-speed')
-const store = require('../store')
+const store = require('../persist-store')
 const logger = require('../logger')
 
 // MapeoUpdater emits the 'error' event when there is an internal error with

src/main/i18n.js

@@ -1,7 +1,7 @@
 const { EventEmitter } = require('events')
 const { app } = require('electron')
 const logger = require('../logger')
-const store = require('../store')
+const store = require('../persist-store')
 
 const translations = {
   en: require('../../messages/main/en.json'),

src/main/index.js

@@ -9,6 +9,7 @@ const contextMenu = require('electron-context-menu')
 const mkdirp = require('mkdirp')
 const Database = require('better-sqlite3')
 const createMapServer = require('@mapeo/map-server')
+const Store = require('electron-store')
 
 const onExit = require('./exit-hook')
 const BackgroundProcessManager = require('./background-process')
@@ -105,11 +106,19 @@ async function startup ({
   const backgroundProcesses = new BackgroundProcessManager()
   backgroundProcesses.createProcess(
     path.join(__dirname, '../background/mapeo-core'),
-    { id: 'mapeoCore', args: mapeoCoreArgs, devTools: debug }
+    {
+      id: 'mapeoCore',
+      args: mapeoCoreArgs,
+      devTools: debug
+    }
   )
   backgroundProcesses.createProcess(
     path.join(__dirname, '../background/map-printer'),
-    { id: 'mapPrinter', args: mapPrinterArgs, devTools: debug }
+    {
+      id: 'mapPrinter',
+      args: mapPrinterArgs,
+      devTools: debug
+    }
   )
 
   // Subscribe the main window to background process state changes
@@ -136,6 +145,9 @@ async function startup ({
     const port = event.ports[0]
     backgroundProcesses.addClient('mapeoCore', port)
     // TODO: Remove client when window reloads? Is this a significant leak?
+
+    // Initialise the store so it can be called in the render process
+    Store.initRenderer()
   })
 
   try {

src/main/window-state.js

@@ -3,7 +3,7 @@
 const remote = require('@electron/remote/main')
 const electron = require('electron')
 
-const store = require('../store')
+const store = require('../persist-store')
 
 const defaults = {
   maximize: false,

src/persist-store.js

@@ -0,0 +1,5 @@
+const Store = require('electron-store')
+
+const persistedStore = new Store()
+
+module.exports = persistedStore

src/renderer/components/Home.js

@@ -15,12 +15,12 @@ import ErrorDialog from './dialogs/Error'
 import ChangeLanguage from './dialogs/ChangeLanguage'
 import TitleBarShim from './TitleBarShim'
 import { defineMessages, useIntl } from 'react-intl'
-import createPersistedState from '../hooks/createPersistedState'
 import SyncView from './SyncView'
 import { STATES as updateStates, UpdaterView, UpdateTab } from './UpdaterView'
 import useUpdater from './UpdaterView/useUpdater'
 import Loading from './Loading'
 import buildConfig from '../../build-config'
+import { usePersistedUiStore } from '../hooks/store'
 
 const MapFilter = React.lazy(() =>
   import(
@@ -218,12 +218,13 @@ function TabPanel (props) {
   ) : null
 }
 
-const useTabIndex = createPersistedState('currentView')
-
 export default function Home ({ onSelectLanguage }) {
   const [dialog, setDialog] = React.useState(null)
   const [error, setError] = React.useState(null)
-  const [tabIndex, setTabIndex] = useTabIndex(0)
+  const [tabIndex, setTabIndex] = usePersistedUiStore(store => [
+    store.tabIndex,
+    store.setTabIndex
+  ])
   const [update, setUpdate] = useUpdater()
   const { formatMessage: t } = useIntl()
 

src/renderer/hooks/store.js

@@ -0,0 +1,101 @@
+// @ts-check
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+import store from '../../persist-store'
+
+/**
+ * @type {import('zustand/middleware').StateStorage}
+ */
+const storage = {
+  /**
+   * @param {string}  key - A string key to reference the stored item by.
+   * @returns {string | null}
+   */
+  getItem: key => {
+    return /** @type {string | null} */ (store.get(key)) || null
+  },
+  /**
+   * @param {string} key - A string key to reference the stored item by.
+   * @param {string} state - The state to be persisted - stringified JSON.
+   * @returns {void}
+   */
+  setItem: (key, state) => {
+    store.set(key, JSON.parse(state))
+  },
+  /**
+   * @param {string}  key - A string key to reference the stored item to be removed.
+   */
+  removeItem: key => {
+    store.delete(key)
+  }
+}
+
+/**
+ * @template T
+ * @param {import('zustand').StateCreator<T>} slice
+ * @param {string} storeName
+ * @returns {import('zustand').UseBoundStore<import('zustand').StoreApi<T>>}
+ */
+const createPersistedStore = (slice, storeName) =>
+  create(
+    persist(slice, {
+      name: storeName,
+      storage: createJSONStorage(() => storage)
+    })
+  )
+
+/**
+ * @typedef {{
+ *  backgroundMaps: boolean,
+ *  setBackgroundMapsFlag: (backgroundMaps:boolean) => void,
+ * }} ExperimentsFlagsStoreSlice
+ */
+
+/**
+ * @type {import('zustand').StateCreator<ExperimentsFlagsStoreSlice>}
+ */
+const experimentsFlagsStoreSlice = (set, get) => ({
+  backgroundMaps: false,
+  setBackgroundMapsFlag: backgroundMaps => set({ backgroundMaps })
+})
+
+/**
+ * @typedef {{
+ *  mapStyle: string,
+ *  setMapStyle: (mapStyle: string) => void
+ * }} BackgroundMapStoreSlice
+ */
+/**
+ * @type {import('zustand').StateCreator<BackgroundMapStoreSlice>}
+ */
+const backgroundMapStoreSlice = (set, get) => ({
+  mapStyle: '',
+  setMapStyle: mapStyle => set({ mapStyle })
+})
+
+/**
+ * @typedef {{
+ *  tabIndex: number,
+ *  setTabIndex: (tabIndex: number) => void
+ * }} PersistedUiStoreSlice
+ */
+/**
+ * @type {import('zustand').StateCreator<PersistedUiStoreSlice>}
+ */
+const persistedUiStoreSlice = (set, get) => ({
+  tabIndex: 0,
+  setTabIndex: tabIndex => set({ tabIndex })
+})
+
+export const useExperimentsFlagsStore = createPersistedStore(
+  experimentsFlagsStoreSlice,
+  'experiments-flags'
+)
+export const useBackgroundMapStore = createPersistedStore(
+  backgroundMapStoreSlice,
+  'background-maps'
+)
+export const usePersistedUiStore = createPersistedStore(
+  persistedUiStoreSlice,
+  'ui'
+)

src/renderer/hooks/useMapStylesQuery.js

@@ -0,0 +1,41 @@
+// @ts-check
+import { useExperimentsFlagsStore } from './store'
+import { useMapServerQuery } from './useMapServerQuery'
+import { useQuery } from '@tanstack/react-query'
+import api from '../new-api'
+
+export const useMapStylesQuery = () => {
+  const backgroundMapsEnabled = useExperimentsFlagsStore(
+    store => store.backgroundMaps
+  )
+  const legacyStyleQueryResult = useLegacyMapStyleQuery(!backgroundMapsEnabled)
+  const mapStylesQueryResult = useMapServerQuery(
+    '/styles',
+    backgroundMapsEnabled
+  )
+
+  return backgroundMapsEnabled ? mapStylesQueryResult : legacyStyleQueryResult
+}
+
+export const useLegacyMapStyleQuery = enabled => {
+  const ONLINE_STYLE_URL = 'mapbox://styles/mapbox/outdoors-v10'
+  const offlineStyleURL = api.getMapStyleUrl('default')
+
+  const queryResult = useQuery({
+    queryKey: ['getLegacyMapStyle'],
+    queryFn: async () => {
+      try {
+        // This checks whether an offline style is available
+        await api.getMapStyle('default')
+        // and if it is, it will use that map style (retrieved above).
+        return [offlineStyleURL]
+      } catch {
+        // If no offline style is available we use the default online style
+        return [ONLINE_STYLE_URL]
+      }
+    },
+    enabled
+  })
+
+  return queryResult
+}