From 4215dff0c277ef3aa0707ce81d045679edc0a2b2 Mon Sep 17 00:00:00 2001
From: Andrew Chou <andrewchou@fastmail.com>
Date: Mon, 21 Oct 2024 13:53:07 -0400
Subject: [PATCH] surface error when map info cannot be loaded

---
 messages/en.json                              |  3 ++
 .../Settings/MapManagement/BackgroundMaps.tsx | 54 ++++++++++++-------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 75a2eef00..873895290 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -1291,6 +1291,9 @@
   "screens.Settings.MapManagement.BackgroundMaps.customMapAddedTitle": {
     "message": "Custom Map Added"
   },
+  "screens.Settings.MapManagement.BackgroundMaps.customMapInfoLoadError": {
+    "message": "Could not get custom map information. Please choose a different file."
+  },
   "screens.Settings.MapManagement.BackgroundMaps.deleteCustomMapDescription": {
     "message": "This will delete the map and its offline areas. No collected observation data will be deleted."
   },
diff --git a/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx b/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx
index b02607a7c..614695459 100644
--- a/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx
+++ b/src/frontend/screens/Settings/MapManagement/BackgroundMaps.tsx
@@ -12,7 +12,7 @@ import {
 } from '../../../hooks/server/maps';
 import ErrorSvg from '../../../images/Error.svg';
 import GreenCheckSvg from '../../../images/GreenCheck.svg';
-import {DARK_GREY, WHITE} from '../../../lib/styles';
+import {DARK_GREY, RED, WHITE} from '../../../lib/styles';
 import {
   BottomSheetModal,
   BottomSheetModalContent,
@@ -46,6 +46,12 @@ const m = defineMessages({
       'Your custom map is not shared with other devices in your project.',
   },
 
+  customMapInfoLoadError: {
+    id: 'screens.Settings.MapManagement.BackgroundMaps.customMapInfoLoadError',
+    defaultMessage:
+      'Could not get custom map information. Please choose a different file.',
+  },
+
   customMapAddedTitle: {
     id: 'screens.Settings.MapManagement.BackgroundMaps.customMapAddedTitle',
     defaultMessage: 'Custom Map Added',
@@ -116,26 +122,31 @@ export function BackgroundMapsScreen() {
     case 'error': {
       // TODO: Should surface error info better and also provide option to replace/remove map
       renderedMapInfo = (
-        <ChooseMapFile
-          onChooseFile={() => {
-            selectCustomMapMutation.mutate(undefined, {
-              onSuccess: asset => {
-                if (!asset) return;
+        <>
+          <ChooseMapFile
+            onChooseFile={() => {
+              selectCustomMapMutation.mutate(undefined, {
+                onSuccess: asset => {
+                  if (!asset) return;
 
-                return importCustomMapMutation.mutateAsync(
-                  {
-                    uri: asset.uri,
-                  },
-                  {
-                    onSuccess: () => {
-                      mapAddedBottomSheet.openSheet();
+                  return importCustomMapMutation.mutateAsync(
+                    {
+                      uri: asset.uri,
                     },
-                  },
-                );
-              },
-            });
-          }}
-        />
+                    {
+                      onSuccess: () => {
+                        mapAddedBottomSheet.openSheet();
+                      },
+                    },
+                  );
+                },
+              });
+            }}
+          />
+          <Text style={styles.infoLoadErrorText}>
+            {t(m.customMapInfoLoadError)}
+          </Text>
+        </>
       );
 
       break;
@@ -284,4 +295,9 @@ const styles = StyleSheet.create({
     fontSize: 36,
     color: DARK_GREY,
   },
+  infoLoadErrorText: {
+    textAlign: 'center',
+    color: RED,
+    fontSize: 20,
+  },
 });