Implement API error handling

12 files changed, 40 insertions, 9 deletions

diff --git a/modern/src/settings/AccumulatorsPage.js b/modern/src/settings/AccumulatorsPage.js
index 0fcde8d1..b22fe02e 100644
--- a/modern/src/settings/AccumulatorsPage.js
+++ b/modern/src/settings/AccumulatorsPage.js
@@ -8,6 +8,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import SettingsMenu from './components/SettingsMenu';
+import { useCatch } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -45,7 +46,7 @@ const AccumulatorsPage = () => {
     }
   }, [deviceId, position]);
 
-  const handleSave = async () => {
+  const handleSave = useCatch(async () => {
     const response = await fetch(`/api/devices/${deviceId}/accumulators`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
@@ -54,8 +55,10 @@ const AccumulatorsPage = () => {
 
     if (response.ok) {
       history.goBack();
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <PageLayout menu={<SettingsMenu />} breadcrumbs={['sharedDeviceAccumulators']}>
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js
index 875530a8..06697647 100644
--- a/modern/src/settings/CalendarsPage.js
+++ b/modern/src/settings/CalendarsPage.js
@@ -26,6 +26,8 @@ const CalendarsView = ({ updateTimestamp, onMenuClick }) => {
     const response = await fetch('/api/calendars');
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
   }, [updateTimestamp]);
 
diff --git a/modern/src/settings/CommandSendPage.js b/modern/src/settings/CommandSendPage.js
index f7e62b24..a817e11d 100644
--- a/modern/src/settings/CommandSendPage.js
+++ b/modern/src/settings/CommandSendPage.js
@@ -9,6 +9,7 @@ import BaseCommandView from './components/BaseCommandView';
 import SelectField from '../common/components/SelectField';
 import PageLayout from '../common/components/PageLayout';
 import SettingsMenu from './components/SettingsMenu';
+import { useCatch } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -36,12 +37,14 @@ const CommandSendPage = () => {
   const [savedId, setSavedId] = useState(0);
   const [item, setItem] = useState({});
 
-  const handleSend = async () => {
+  const handleSend = useCatch(async () => {
     let command;
     if (savedId) {
       const response = await fetch(`/api/commands/${savedId}`);
       if (response.ok) {
         command = await response.json();
+      } else {
+        throw Error(await response.text());
       }
     } else {
       command = item;
@@ -57,8 +60,10 @@ const CommandSendPage = () => {
 
     if (response.ok) {
       history.goBack();
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   const validate = () => savedId || (item && item.type);
 
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index 20b792b8..1b09a8bd 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -28,6 +28,8 @@ const CommandsView = ({ updateTimestamp, onMenuClick }) => {
     const response = await fetch('/api/commands');
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
   }, [updateTimestamp]);
 
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 451b47a7..86704c3b 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -28,6 +28,8 @@ const ComputedAttributeView = ({ updateTimestamp, onMenuClick }) => {
     const response = await fetch('/api/attributes/computed');
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
   }, [updateTimestamp]);
 
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index f5908381..26601777 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.js
@@ -26,6 +26,8 @@ const DriversView = ({ updateTimestamp, onMenuClick }) => {
     const response = await fetch('/api/drivers');
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
   }, [updateTimestamp]);
 
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index 5d23c2d9..257d0bca 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -26,6 +26,8 @@ const GroupsView = ({ updateTimestamp, onMenuClick }) => {
     const response = await fetch('/api/groups');
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
   }, [updateTimestamp]);
 
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 3801f010..ea00e7e1 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -34,6 +34,8 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
     const response = await fetch('/api/maintenance');
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
   }, [updateTimestamp]);
 
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 7ad5186b..de3e762f 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -28,6 +28,8 @@ const NotificationsView = ({ updateTimestamp, onMenuClick }) => {
     const response = await fetch('/api/notifications');
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
   }, [updateTimestamp]);
 
diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js
index 5fdba47b..b745cb96 100644
--- a/modern/src/settings/ServerPage.js
+++ b/modern/src/settings/ServerPage.js
@@ -15,6 +15,7 @@ import PageLayout from '../common/components/PageLayout';
 import SettingsMenu from './components/SettingsMenu';
 import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes';
 import useCommonUserAttributes from '../common/attributes/useCommonUserAttributes';
+import { useCatch } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -44,7 +45,7 @@ const ServerPage = () => {
   const original = useSelector((state) => state.session.server);
   const [item, setItem] = useState({ ...original });
 
-  const handleSave = async () => {
+  const handleSave = useCatch(async () => {
     const response = await fetch('/api/server', {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
@@ -54,8 +55,10 @@ const ServerPage = () => {
     if (response.ok) {
       dispatch(sessionActions.updateServer(await response.json()));
       history.goBack();
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'settingsServer']}>
diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js
index 2d8d1199..235ae4c7 100644
--- a/modern/src/settings/UsersPage.js
+++ b/modern/src/settings/UsersPage.js
@@ -27,6 +27,8 @@ const UsersView = ({ updateTimestamp, onMenuClick }) => {
     const response = await fetch('/api/users');
     if (response.ok) {
       setItems(await response.json());
+    } else {
+      throw Error(await response.text());
     }
   }, [updateTimestamp]);
 
diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js
index 9b9918fe..28598e77 100644
--- a/modern/src/settings/components/EditItemView.js
+++ b/modern/src/settings/components/EditItemView.js
@@ -5,7 +5,7 @@ import Container from '@material-ui/core/Container';
 import Button from '@material-ui/core/Button';
 import FormControl from '@material-ui/core/FormControl';
 
-import { useEffectAsync } from '../../reactHelper';
+import { useCatch, useEffectAsync } from '../../reactHelper';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import PageLayout from '../../common/components/PageLayout';
 
@@ -36,13 +36,15 @@ const EditItemView = ({
       const response = await fetch(`/api/${endpoint}/${id}`);
       if (response.ok) {
         setItem(await response.json());
+      } else {
+        throw Error(await response.text());
       }
     } else {
       setItem(defaultItem || {});
     }
   }, [id]);
 
-  const handleSave = async () => {
+  const handleSave = useCatch(async () => {
     let url = `/api/${endpoint}`;
     if (id) {
       url += `/${id}`;
@@ -59,8 +61,10 @@ const EditItemView = ({
         onItemSaved(await response.json());
       }
       history.goBack();
+    } else {
+      throw Error(await response.text());
     }
-  };
+  });
 
   return (
     <PageLayout menu={menu} breadcrumbs={breadcrumbs}>