update implementation to account for core update

messages/en.json

@@ -1285,14 +1285,17 @@
   "screens.Settings.MapManagement.BackgroundMaps.close": {
     "message": "Close"
   },
+  "screens.Settings.MapManagement.BackgroundMaps.customMapAddedDescription": {
+    "message": "You will see this map when you are offline, but you will not see a map outside the area defined in your custom map."
+  },
   "screens.Settings.MapManagement.BackgroundMaps.customMapAddedTitle": {
     "message": "Custom Map Added"
   },
   "screens.Settings.MapManagement.BackgroundMaps.deleteCustomMapDescription": {
     "message": "This will delete the map and its offline areas. No collected observation data will be deleted."
   },
   "screens.Settings.MapManagement.BackgroundMaps.deleteCustomMapTitle": {
-    "message": "Delete CUstom Map?"
+    "message": "Delete Custom Map?"
   },
   "screens.Settings.MapManagement.BackgroundMaps.deleteMapButtonText": {
     "message": "Delete Map"
@@ -1303,9 +1306,6 @@
   "screens.Settings.MapManagement.BackgroundMaps.description2": {
     "message": "Your custom map is not shared with other devices in your project."
   },
-  "screens.Settings.MapManagement.BackgroundMaps.offlineMapAddedDescription": {
-    "message": "You will see this map when you are offline, but you will not see a map outside the area defined in your custom map."
-  },
   "screens.Settings.MapManagement.BackgroundMaps.screenTitle": {
     "message": "Background Maps"
   },

package.json

@@ -108,6 +108,7 @@
     "tiny-typed-emitter": "^2.1.0",
     "uint8array-extras": "^0.5.0",
     "utm": "^1.1.1",
+    "valibot": "^0.42.1",
     "validate-color": "^2.2.4",
     "zustand": "^4.4.6"
   },

src/backend/src/app.js

@@ -2,19 +2,23 @@ import debug from 'debug'
 import { join } from 'path'
 import { mkdirSync } from 'fs'
 import { createRequire } from 'module'
-const require = createRequire(import.meta.url)
-/** @type {import('../types/rn-bridge.js')} */
-const rnBridge = require('rn-bridge')
 import { MapeoManager, FastifyController } from '@comapeo/core'
 import { createMapeoServer } from '@comapeo/ipc'
 import Fastify from 'fastify'
 
 import MessagePortLike from './message-port-like.js'
 import { ServerStatus } from './status.js'
 
+const require = createRequire(import.meta.url)
+
+/** @type {import('../types/rn-bridge.js')} */
+const rnBridge = require('rn-bridge')
+
 // Do not touch these!
 const DB_DIR_NAME = 'sqlite-dbs'
 const CORE_STORAGE_DIR_NAME = 'core-storage'
+const CUSTOM_MAPS_DIR_NAME = 'maps'
+const DEFAULT_CUSTOM_MAP_FILE_NAME = 'default.smp'
 
 const MAPBOX_ACCESS_TOKEN =
   'pk.eyJ1IjoiZGlnaWRlbSIsImEiOiJjbHRyaGh3cm0wN3l4Mmpsam95NDI3c2xiIn0.daq2iZFZXQ08BD0VZWAGUw'
@@ -64,9 +68,11 @@ export async function init({
   const privateStorageDir = rnBridge.app.datadir()
   const dbDir = join(privateStorageDir, DB_DIR_NAME)
   const indexDir = join(privateStorageDir, CORE_STORAGE_DIR_NAME)
+  const customMapsDir = join(privateStorageDir, CUSTOM_MAPS_DIR_NAME)
 
   mkdirSync(dbDir, { recursive: true })
   mkdirSync(indexDir, { recursive: true })
+  mkdirSync(customMapsDir, { recursive: true })
 
   const fastify = Fastify()
   const fastifyController = new FastifyController({ fastify })
@@ -80,6 +86,7 @@ export async function init({
     fastify,
     defaultConfigPath,
     defaultOnlineStyleUrl: DEFAULT_ONLINE_MAP_STYLE_URL,
+    customMapPath: join(customMapsDir, DEFAULT_CUSTOM_MAP_FILE_NAME),
   })
 
   // Don't await, methods that use the server will await this internally

src/frontend/hooks/server/maps.ts

@@ -0,0 +1,107 @@
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import * as FileSystem from 'expo-file-system';
+import * as v from 'valibot';
+
+import {useApi} from '../../contexts/ApiContext';
+import {DOCUMENT_DIRECTORY, selectFile} from '../../lib/file-system';
+
+export const MAPS_QUERY_KEY = 'maps';
+
+const CUSTOM_MAPS_DIRECTORY = new URL('maps', DOCUMENT_DIRECTORY).href;
+const DEFAULT_CUSTOM_MAP_FILE_PATH = CUSTOM_MAPS_DIRECTORY + '/default.smp';
+
+const CustomMapInfoSchema = v.object({
+  created: v.pipe(
+    v.string(),
+    v.isoTimestamp(),
+    v.transform(input => new Date(input)),
+  ),
+  name: v.string(),
+  size: v.pipe(v.number(), v.minValue(0)),
+});
+
+export type CustomMapInfo = v.InferOutput<typeof CustomMapInfoSchema>;
+
+export function useMapStyleJsonUrl() {
+  const api = useApi();
+
+  return useQuery({
+    queryKey: [MAPS_QUERY_KEY, 'stylejson-url'],
+    queryFn: () => {
+      return api.getMapStyleJsonUrl();
+    },
+  });
+}
+
+export function useSelectCustomMapFile() {
+  return useMutation({
+    mutationFn: () => {
+      return selectFile({
+        extensionFilters: ['smp'],
+      });
+    },
+  });
+}
+
+export function useImportCustomMapFile() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (opts: {uri: string}) => {
+      return FileSystem.moveAsync({
+        from: opts.uri,
+        to: DEFAULT_CUSTOM_MAP_FILE_PATH,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [MAPS_QUERY_KEY],
+      });
+    },
+  });
+}
+
+export function useRemoveCustomMapFile() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => {
+      return FileSystem.deleteAsync(DEFAULT_CUSTOM_MAP_FILE_PATH, {
+        idempotent: true,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [MAPS_QUERY_KEY],
+      });
+    },
+  });
+}
+
+/**
+ * Returns `null` if no viable map is found. Throws an error if a detected map is invalid.
+ */
+export function useGetCustomMapInfo() {
+  const api = useApi();
+
+  return useQuery({
+    queryKey: [MAPS_QUERY_KEY, 'custom', 'info'],
+    queryFn: async () => {
+      const styleUrl = await api.getMapStyleJsonUrl();
+
+      const infoUrl = new URL('/maps/custom/info', styleUrl).href;
+
+      const response = await fetch(infoUrl);
+
+      if (response.status === 404) {
+        return null;
+      }
+
+      if (!response.ok) {
+        throw new Error(`Cannot get custom map info: ${response.statusText}`);
+      }
+
+      return v.parse(CustomMapInfoSchema, await response.json());
+    },
+  });
+}