Ej/ useMapStylesQuery hook (refreshed PR)

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
+}