Implement API error handling

1 files changed, 45 insertions, 24 deletions

diff --git a/modern/src/map/GeofenceEditMap.js b/modern/src/map/GeofenceEditMap.js
index 2eb86321..0d7950a2 100644
--- a/modern/src/map/GeofenceEditMap.js
+++ b/modern/src/map/GeofenceEditMap.js
@@ -2,13 +2,14 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import theme from '@mapbox/mapbox-gl-draw/src/lib/theme';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { map } from './core/Map';
 import { geofenceToFeature, geometryToArea } from './core/mapUtil';
-import { geofencesActions } from '../store';
+import { errorsActions, geofencesActions } from '../store';
+import { useCatchCallback } from '../reactHelper';
 
 const draw = new MapboxDraw({
   displayControlsDefault: false,
@@ -39,10 +40,12 @@ const GeofenceEditMap = () => {
 
   const geofences = useSelector((state) => state.geofences.items);
 
-  const refreshGeofences = useCallback(async () => {
+  const refreshGeofences = useCatchCallback(async () => {
     const response = await fetch('/api/geofences');
     if (response.ok) {
       dispatch(geofencesActions.refresh(await response.json()));
+    } else {
+      throw Error(await response.text());
     }
   }, [dispatch]);
 
@@ -58,33 +61,45 @@ const GeofenceEditMap = () => {
       const feature = event.features[0];
       const newItem = { name: '', area: geometryToArea(feature.geometry) };
       draw.delete(feature.id);
-      const response = await fetch('/api/geofences', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(newItem),
-      });
-      if (response.ok) {
-        const item = await response.json();
-        history.push(`/settings/geofence/${item.id}`);
+      try {
+        const response = await fetch('/api/geofences', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(newItem),
+        });
+        if (response.ok) {
+          const item = await response.json();
+          history.push(`/settings/geofence/${item.id}`);
+        } else {
+          throw Error(await response.text());
+        }
+      } catch (error) {
+        dispatch(errorsActions.push(error.message));
       }
     };
 
     map.on('draw.create', listener);
     return () => map.off('draw.create', listener);
-  }, [history]);
+  }, [dispatch, history]);
 
   useEffect(() => {
     const listener = async (event) => {
       const feature = event.features[0];
-      const response = await fetch(`/api/geofences/${feature.id}`, { method: 'DELETE' });
-      if (response.ok) {
-        refreshGeofences();
+      try {
+        const response = await fetch(`/api/geofences/${feature.id}`, { method: 'DELETE' });
+        if (response.ok) {
+          refreshGeofences();
+        } else {
+          throw Error(await response.text());
+        }
+      } catch (error) {
+        dispatch(errorsActions.push(error.message));
       }
     };
 
     map.on('draw.delete', listener);
     return () => map.off('draw.delete', listener);
-  }, [refreshGeofences]);
+  }, [dispatch, refreshGeofences]);
 
   useEffect(() => {
     const listener = async (event) => {
@@ -92,20 +107,26 @@ const GeofenceEditMap = () => {
       const item = Object.values(geofences).find((i) => i.id === feature.id);
       if (item) {
         const updatedItem = { ...item, area: geometryToArea(feature.geometry) };
-        const response = await fetch(`/api/geofences/${feature.id}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(updatedItem),
-        });
-        if (response.ok) {
-          refreshGeofences();
+        try {
+          const response = await fetch(`/api/geofences/${feature.id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updatedItem),
+          });
+          if (response.ok) {
+            refreshGeofences();
+          } else {
+            throw Error(await response.text());
+          }
+        } catch (error) {
+          dispatch(errorsActions.push(error.message));
         }
       }
     };
 
     map.on('draw.update', listener);
     return () => map.off('draw.update', listener);
-  }, [geofences, refreshGeofences]);
+  }, [dispatch, geofences, refreshGeofences]);
 
   useEffect(() => {
     draw.deleteAll();