aboutsummaryrefslogtreecommitdiff
path: root/modern/src/common/components
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-21 09:49:26 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-21 09:49:26 -0700
commit7e96816f94314dcdf071eeee6e74a95bcace329f (patch)
tree21938fcdbe6e8b7a651308555af77c49dc59e1c2 /modern/src/common/components
parent79dd42f0bdeef6d9f6331c0ec8301b2631a9cb90 (diff)
downloadtrackermap-web-7e96816f94314dcdf071eeee6e74a95bcace329f.tar.gz
trackermap-web-7e96816f94314dcdf071eeee6e74a95bcace329f.tar.bz2
trackermap-web-7e96816f94314dcdf071eeee6e74a95bcace329f.zip
Implement API error handling
Diffstat (limited to 'modern/src/common/components')
-rw-r--r--modern/src/common/components/ErrorHandler.js26
-rw-r--r--modern/src/common/components/LinkField.js4
-rw-r--r--modern/src/common/components/PositionValue.js7
-rw-r--r--modern/src/common/components/RemoveDialog.js7
-rw-r--r--modern/src/common/components/SelectField.js2
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());
}
}
}, []);