From d32a43cef6194952ba729d68d1a99429ec60f9e2 Mon Sep 17 00:00:00 2001
From: natrimmer <nicholas.trimmer@mcgovern.org>
Date: Wed, 7 Aug 2024 19:06:41 -0700
Subject: [PATCH] Closes #219 [Show proper message when Raw data API is down]

---
 .../Layout/TrainingDS/DatasetEditor/AOI.js     | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js b/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
index 2dc6860b..47b1899c 100644
--- a/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
+++ b/frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
@@ -65,6 +65,8 @@ const AOI = (props) => {
   const [openSnack, setOpenSnack] = useState(false);
   const [fileError, setFileError] = useState(null);
   const [geoJsonFile, setGeoJsonFile] = useState(null);
+  const [fetchError, setFetchError] = useState(null);
+
   let _DATA = usePagination(
     props.mapLayers.filter((e) => e.type === "aoi"),
     PER_PAGE
@@ -80,6 +82,7 @@ const AOI = (props) => {
 
   const { accessToken } = useContext(AuthContext);
   const fetchOSMLebels = async (aoiId) => {
+    setFetchError(null);
     try {
       const headers = {
         "access-token": accessToken,
@@ -91,15 +94,21 @@ const AOI = (props) => {
 
       if (res.error) {
         console.log(res.error.response.statusText);
+        setFetchError("Failed to fetch OSM data. Please try again.");
       } else {
         return res.data;
       }
     } catch (e) {
       console.log("isError", e);
+      setFetchError("Failed to fetch OSM data. Please check your connection.");
     }
   };
-  const { mutate: mutateFetch, data: fetchResult } =
-    useMutation(fetchOSMLebels);
+
+  const { mutate: mutateFetch } = useMutation(fetchOSMLebels, {
+    onError: () => {
+      setFetchError("Failed to fetch OSM data. Please try again.");
+    },
+  });
 
   const DeleteAOI = async (id, leafletId) => {
     try {
@@ -408,6 +417,11 @@ const AOI = (props) => {
               ))}
           </List>
         </Demo>
+        {fetchError && (
+          <Typography variant="body2">
+            {fetchError}
+          </Typography>
+        )}
         {props.mapLayers && props.mapLayers.length === 0 && (
           <Typography variant="body1" component="h2">
             No TAs yet, start creating one by clicking Draw a rectangle, 3rd