Implement API error handling

5 files changed, 42 insertions, 4 deletions

diff --git a/modern/src/common/components/ErrorHandler.js b/modern/src/common/components/ErrorHandler.js
new file mode 100644
index 00000000..534dd012
--- /dev/null
+++ b/modern/src/common/components/ErrorHandler.js
@@ -0,0 +1,26 @@
+import { Snackbar } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { usePrevious } from '../../reactHelper';
+import { errorsActions } from '../../store';
+
+const ErrorHandler = () => {
+  const dispatch = useDispatch();
+
+  const error = useSelector((state) => state.errors.errors.find(() => true));
+  const previousError = usePrevious(error);
+
+  return (
+    <Snackbar open={!!error}>
+      <Alert
+        onClose={() => dispatch(errorsActions.pop())}
+        severity="error"
+      >
+        {error || previousError}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default ErrorHandler;
diff --git a/modern/src/common/components/LinkField.js b/modern/src/common/components/LinkField.js
index e11438df..0f6cc7ba 100644
--- a/modern/src/common/components/LinkField.js
+++ b/modern/src/common/components/LinkField.js
@@ -23,6 +23,8 @@ const LinkField = ({
     const response = await fetch(endpointAll);
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
   }, []);
 
@@ -31,6 +33,8 @@ const LinkField = ({
     if (response.ok) {
       const data = await response.json();
       setLinked(data.map((it) => it.id));
+    } else {
+      throw Error(await response.text());
     }
   }, []);
 
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index 9f679605..1162a150 100644
--- a/modern/src/common/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -7,6 +7,7 @@ import {
 import { useAttributePreference, usePreference } from '../util/preferences';
 import { useTranslation } from './LocalizationProvider';
 import { useAdministrator } from '../util/permissions';
+import { useCatch } from '../../reactHelper';
 
 const PositionValue = ({ position, property, attribute }) => {
   const t = useTranslation();
@@ -26,7 +27,7 @@ const PositionValue = ({ position, property, attribute }) => {
     setAddress(position.address);
   }, [position]);
 
-  const showAddress = async () => {
+  const showAddress = useCatch(async () => {
     const query = new URLSearchParams({
       latitude: position.latitude,
       longitude: position.longitude,
@@ -34,8 +35,10 @@ const PositionValue = ({ position, property, attribute }) => {
     const response = await fetch(`/api/server/geocode?${query.toString()}`);
     if (response.ok) {
       setAddress(await response.text());
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   const formatValue = () => {
     switch (key) {
diff --git a/modern/src/common/components/RemoveDialog.js b/modern/src/common/components/RemoveDialog.js
index 6d191d6a..cbdbb05d 100644
--- a/modern/src/common/components/RemoveDialog.js
+++ b/modern/src/common/components/RemoveDialog.js
@@ -5,18 +5,21 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import { useTranslation } from './LocalizationProvider';
+import { useCatch } from '../../reactHelper';
 
 const RemoveDialog = ({
   open, endpoint, itemId, onResult,
 }) => {
   const t = useTranslation();
 
-  const handleRemove = async () => {
+  const handleRemove = useCatch(async () => {
     const response = await fetch(`/api/${endpoint}/${itemId}`, { method: 'DELETE' });
     if (response.ok) {
       onResult(true);
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <Dialog
diff --git a/modern/src/common/components/SelectField.js b/modern/src/common/components/SelectField.js
index 98473b16..5a9a176b 100644
--- a/modern/src/common/components/SelectField.js
+++ b/modern/src/common/components/SelectField.js
@@ -25,6 +25,8 @@ const SelectField = ({
       const response = await fetch(endpoint);
       if (response.ok) {
         setItems(await response.json());
+      } else {
+        throw Error(await response.text());
       }
     }
   }, []);