Ej/ useMapStylesQuery hook (refreshed PR) (#745)

* Revert "add SettingsMenu tabs component (WIP)"

This reverts commit 9a478ed.

* Revert "add settings menu tab"

This reverts commit fd8a0ba.

* feat: add persisted zustand store

* WIP struggling a little with jsdoc types ...

* chore: added types to store slices

* chore: install electron-store / remove conf

* chore: convert conf-store to electron-store (and rename store.js -> persist-store.js)

* chore: remove store version, add persisted UI store

* chore: replace createPersistedState hook with zustand store / remove createPersistedState

* chore: move store.js to /hooks

* chore: remove redundant `async` and better types

* chore: cast return type for `getItem` to string | null

* test commit

* chore: force lint-staged to format files

* fix: fix UI store broken import

* fix: zustand types

* feat: add useMapStylesQuery and useLegacyMapStyleQuery hooks

* fix: always return string[] from useMapStylesQuery

* chore: modify useMapServerQuery to return only url as data

* fix: useMapServerQuery return url array

* chore: return full map object

* fix: remove console.log

messages/renderer/en.json

@@ -658,6 +658,14 @@
     "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.useMapStylesQuery.defaultBackgroundMapName": {
+    "description": "The name of the default background map",
+    "message": "Default"
+  },
+  "renderer.hooks.useMapStylesQuery.offlineBackgroundMapName": {
+    "description": "The name of the legacy offline background map",
+    "message": "Offline Map"
+  },
   "screens.Observation.ObservationView.noAnswer": {
     "description": "Placeholder text for fields on an observation which are not answered",
     "message": "No answer"

src/renderer/hooks/useMapServerQuery.js

@@ -9,7 +9,10 @@ const MAP_SERVER_URL = 'http://127.0.0.1:' + window.mapServerPort
 export function useMapServerQuery (resourcePath, enabled) {
   return useQuery({
     queryKey: [resourcePath, resourcePath.split('/')[2] || undefined],
-    queryFn: () => ky.get(MAP_SERVER_URL + resourcePath).json(),
+    queryFn: () => {
+      return ky.get(MAP_SERVER_URL + resourcePath).json()
+    },
+
     enabled
   })
 }

src/renderer/hooks/useMapStylesQuery.js

@@ -0,0 +1,69 @@
+// @ts-check
+import { useExperimentsFlagsStore } from './store'
+import { useMapServerQuery } from './useMapServerQuery'
+import { useQuery } from '@tanstack/react-query'
+import api from '../new-api'
+import { defineMessages, useIntl } from 'react-intl'
+
+// Randomly generated, but should not change, since this is stored in settings
+// if the user selects one of these "legacy" map styles
+const DEFAULT_MAP_ID = '487x2pc8ws801avhs5hw58qnxc'
+const CUSTOM_MAP_ID = 'vg4ft8yvzwfedzgz1dz7ntneb8'
+const ONLINE_STYLE_URL = 'mapbox://styles/mapbox/outdoors-v10'
+
+const m = defineMessages({
+  // The name of the default background map
+  defaultBackgroundMapName: 'Default',
+  // The name of the legacy offline background map
+  offlineBackgroundMapName: 'Offline Map'
+})
+
+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 { formatMessage: t } = useIntl()
+
+  const queryResult = useQuery({
+    queryKey: ['getLegacyMapStyle'],
+    queryFn: () => {
+      try {
+        // This checks whether an offline style is available
+        api.getMapStyle('default')
+        return [
+          {
+            id: CUSTOM_MAP_ID,
+            url: api.getMapStyleUrl('default'),
+            bytesStored: 0,
+            name: t(m.offlineBackgroundMapName),
+            isImporting: false
+          }
+        ]
+      } catch {
+        return [
+          {
+            id: DEFAULT_MAP_ID,
+            url: ONLINE_STYLE_URL,
+            bytesStored: 0,
+            name: t(m.defaultBackgroundMapName),
+            isImporting: false
+          }
+        ]
+      }
+    },
+    enabled
+  })
+
+  return queryResult
+}