diff options
Diffstat (limited to 'modern/src')
38 files changed, 258 insertions, 76 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index 0afefce4..fee94e5b 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -50,6 +50,7 @@ import PreferencesPage from './settings/PreferencesPage'; import BottomMenu from './common/components/BottomMenu'; import AccumulatorsPage from './settings/AccumulatorsPage'; import CommandSendPage from './settings/CommandSendPage'; +import ErrorHandler from './common/components/ErrorHandler'; const useStyles = makeStyles(() => ({ page: { @@ -86,6 +87,8 @@ const App = () => { if (items.length > 0) { dispatch(devicesActions.select(items[0].id)); } + } else { + throw Error(await response.text()); } history.push('/'); } else if (query.get('eventId')) { @@ -158,6 +161,7 @@ const App = () => { )} </Route> </Switch> + <ErrorHandler /> </ThemeProvider> )); }; diff --git a/modern/src/CachingController.js b/modern/src/CachingController.js index d6e20060..1c8fb43a 100644 --- a/modern/src/CachingController.js +++ b/modern/src/CachingController.js @@ -14,6 +14,8 @@ const CachingController = () => { const response = await fetch('/api/geofences'); if (response.ok) { dispatch(geofencesActions.update(await response.json())); + } else { + throw Error(await response.text()); } } }, [authenticated]); @@ -23,6 +25,8 @@ const CachingController = () => { const response = await fetch('/api/groups'); if (response.ok) { dispatch(groupsActions.update(await response.json())); + } else { + throw Error(await response.text()); } } }, [authenticated]); @@ -32,6 +36,8 @@ const CachingController = () => { const response = await fetch('/api/drivers'); if (response.ok) { dispatch(driversActions.update(await response.json())); + } else { + throw Error(await response.text()); } } }, [authenticated]); @@ -41,6 +47,8 @@ const CachingController = () => { const response = await fetch('/api/maintenance'); if (response.ok) { dispatch(maintenancesActions.update(await response.json())); + } else { + throw Error(await response.text()); } } }, [authenticated]); diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index cf01ff7f..9826d4b1 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -49,6 +49,8 @@ const SocketController = () => { const response = await fetch('/api/server'); if (response.ok) { dispatch(sessionActions.updateServer(await response.json())); + } else { + throw Error(await response.text()); } }, []); @@ -57,6 +59,8 @@ const SocketController = () => { const response = await fetch('/api/devices'); if (response.ok) { dispatch(devicesActions.refresh(await response.json())); + } else { + throw Error(await response.text()); } connectSocket(); return () => { @@ -88,10 +92,6 @@ const SocketController = () => { {notifications.map((notification) => ( <Snackbar key={notification.id} - anchorOrigin={{ - vertical: 'bottom', - horizontal: 'right', - }} open={notification.show} message={notification.message} autoHideDuration={snackBarDurationLongMs} 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()); } } }, []); diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index ae7b982d..5b690cdc 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -50,15 +50,19 @@ const LoginPage = () => { const handleSubmit = async (event) => { event.preventDefault(); - const response = await fetch('/api/session', { - method: 'POST', - body: new URLSearchParams(`email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`), - }); - if (response.ok) { - const user = await response.json(); - dispatch(sessionActions.updateUser(user)); - history.push('/'); - } else { + try { + const response = await fetch('/api/session', { + method: 'POST', + body: new URLSearchParams(`email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`), + }); + if (response.ok) { + const user = await response.json(); + dispatch(sessionActions.updateUser(user)); + history.push('/'); + } else { + throw Error(await response.text()); + } + } catch (error) { setFailed(true); setPassword(''); } @@ -153,7 +157,6 @@ const LoginPage = () => { </Grid> )} <Snackbar - anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={!!announcement && !announcementShown} message={announcement} action={( diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js index cd6fc381..78728b58 100644 --- a/modern/src/login/RegisterPage.js +++ b/modern/src/login/RegisterPage.js @@ -7,6 +7,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import LoginLayout from './LoginLayout'; import { useTranslation } from '../common/components/LocalizationProvider'; import { snackBarDurationShortMs } from '../common/util/duration'; +import { useCatch } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ title: { @@ -33,7 +34,7 @@ const RegisterPage = () => { const [password, setPassword] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); - const handleSubmit = async () => { + const handleSubmit = useCatch(async () => { const response = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -41,13 +42,14 @@ const RegisterPage = () => { }); if (response.ok) { setSnackbarOpen(true); + } else { + throw Error(await response.text()); } - }; + }); return ( <LoginLayout> <Snackbar - anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} onClose={() => history.push('/login')} autoHideDuration={snackBarDurationShortMs} diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js index 6f7e784f..93e154e3 100644 --- a/modern/src/login/ResetPasswordPage.js +++ b/modern/src/login/ResetPasswordPage.js @@ -8,6 +8,7 @@ import LoginLayout from './LoginLayout'; import { useTranslation } from '../common/components/LocalizationProvider'; import useQuery from '../common/util/useQuery'; import { snackBarDurationShortMs } from '../common/util/duration'; +import { useCatch } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ title: { @@ -36,7 +37,7 @@ const ResetPasswordPage = () => { const [password, setPassword] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); - const handleSubmit = async (event) => { + const handleSubmit = useCatch(async (event) => { event.preventDefault(); let response; if (!token) { @@ -52,13 +53,14 @@ const ResetPasswordPage = () => { } if (response.ok) { setSnackbarOpen(true); + } else { + throw Error(await response.text()); } - }; + }); return ( <LoginLayout> <Snackbar - anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} onClose={() => history.push('/login')} autoHideDuration={snackBarDurationShortMs} diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js index 4da93547..6ff08c6a 100644 --- a/modern/src/main/DevicesList.js +++ b/modern/src/main/DevicesList.js @@ -164,6 +164,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick, filter }) => { const response = await fetch('/api/devices'); if (response.ok) { dispatch(devicesActions.refresh(await response.json())); + } else { + throw Error(await response.text()); } }, [updateTimestamp]); 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(); diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js index 46f5e67c..7bcf90a8 100644 --- a/modern/src/other/EventPage.js +++ b/modern/src/other/EventPage.js @@ -37,6 +37,8 @@ const EventPage = () => { const response = await fetch(`/api/events/${id}`); if (response.ok) { setEvent(await response.json()); + } else { + throw Error(await response.text()); } } }, [id]); @@ -49,6 +51,8 @@ const EventPage = () => { if (positions.length > 0) { setPosition(positions[0]); } + } else { + throw Error(await response.text()); } } }, [event]); diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js index 4c13955a..76bb560f 100644 --- a/modern/src/other/PositionPage.js +++ b/modern/src/other/PositionPage.js @@ -41,6 +41,8 @@ const PositionPage = () => { if (positions.length > 0) { setItem(positions[0]); } + } else { + throw Error(await response.text()); } } else { setItem({}); diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js index 9bdf87be..c1c56ac1 100644 --- a/modern/src/other/ReplayPage.js +++ b/modern/src/other/ReplayPage.js @@ -18,6 +18,7 @@ import PositionsMap from '../map/PositionsMap'; import { formatTime } from '../common/util/formatter'; import ReportFilter from '../reports/components/ReportFilter'; import { useTranslation } from '../common/components/LocalizationProvider'; +import { useCatch } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ root: { @@ -121,7 +122,7 @@ const ReplayPage = () => { } }, [index, positions]); - const handleSubmit = async (deviceId, from, to, _, headers) => { + const handleSubmit = useCatch(async (deviceId, from, to, _, headers) => { setSelectedDeviceId(deviceId); const query = new URLSearchParams({ deviceId, from, to }); const response = await fetch(`/api/positions?${query.toString()}`, { headers }); @@ -129,8 +130,10 @@ const ReplayPage = () => { setIndex(0); setPositions(await response.json()); setExpanded(false); + } else { + throw Error(await response.text()); } - }; + }); return ( <div className={classes.root}> diff --git a/modern/src/reactHelper.js b/modern/src/reactHelper.js index 124bb40a..c67f252b 100644 --- a/modern/src/reactHelper.js +++ b/modern/src/reactHelper.js @@ -1,4 +1,6 @@ -import { useRef, useEffect } from 'react'; +import { useRef, useEffect, useCallback } from 'react'; +import { useDispatch } from 'react-redux'; +import { errorsActions } from './store'; export const usePrevious = (value) => { const ref = useRef(); @@ -10,14 +12,29 @@ export const usePrevious = (value) => { /* eslint-disable */ export const useEffectAsync = (effect, deps) => { + const dispatch = useDispatch(); const ref = useRef(); useEffect(() => { - effect().then((result) => ref.current = result); + effect() + .then((result) => ref.current = result) + .catch((error) => dispatch(errorsActions.push(error.message))); + return () => { const result = ref.current; if (result) { result(); } }; - }, deps); + }, [...deps, dispatch]); +}; + +export const useCatch = (method) => { + const dispatch = useDispatch(); + return (...parameters) => { + method(...parameters).catch((error) => dispatch(errorsActions.push(error.message))); + }; +}; + +export const useCatchCallback = (method, deps) => { + return useCallback(useCatch(method), deps); }; diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js index dbc205fc..bb71fa95 100644 --- a/modern/src/reports/ChartReportPage.js +++ b/modern/src/reports/ChartReportPage.js @@ -11,6 +11,7 @@ import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; +import { useCatch } from '../reactHelper'; const useStyles = makeStyles(() => ({ chart: { @@ -35,7 +36,7 @@ const ChartReportPage = () => { return result; })(); - const handleSubmit = async (deviceId, from, to, mail, headers) => { + const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ deviceId, from, to, mail, }); @@ -48,8 +49,10 @@ const ChartReportPage = () => { fixTime: formatDate(position.fixTime, 'HH:mm:ss'), })); setItems(formattedPositions); + } else { + throw Error(await response.text()); } - }; + }); return ( <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}> diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 076979ba..f1b0c6bd 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -11,6 +11,7 @@ import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; import usePersistedState from '../common/util/usePersistedState'; import ColumnSelect from './components/ColumnSelect'; +import { useCatch } from '../reactHelper'; const typesArray = [ ['allEvents', 'eventAll'], @@ -53,7 +54,7 @@ const EventReportPage = () => { const [eventTypes, setEventTypes] = useState(['allEvents']); const [items, setItems] = useState([]); - const handleSubmit = async (deviceId, from, to, mail, headers) => { + const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ deviceId, from, to, mail, }); @@ -68,8 +69,10 @@ const EventReportPage = () => { window.location.assign(window.URL.createObjectURL(await response.blob())); } } + } else { + throw Error(await response.text()); } - }; + }); const formatValue = (item, key) => { switch (key) { diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index cd2c3694..118c7758 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -10,6 +10,7 @@ import usePersistedState from '../common/util/usePersistedState'; import PositionValue from '../common/components/PositionValue'; import ColumnSelect from './components/ColumnSelect'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; +import { useCatch } from '../reactHelper'; const RouteReportPage = () => { const t = useTranslation(); @@ -19,7 +20,7 @@ const RouteReportPage = () => { const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']); const [items, setItems] = useState([]); - const handleSubmit = async (deviceId, from, to, mail, headers) => { + const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ deviceId, from, to, mail, }); @@ -33,8 +34,10 @@ const RouteReportPage = () => { window.location.assign(window.URL.createObjectURL(await response.blob())); } } + } else { + throw Error(await response.text()); } - }; + }); return ( <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}> diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js index 214773fe..b1652468 100644 --- a/modern/src/reports/StatisticsPage.js +++ b/modern/src/reports/StatisticsPage.js @@ -9,6 +9,7 @@ import ReportsMenu from './components/ReportsMenu'; import ReportFilter from './components/ReportFilter'; import usePersistedState from '../common/util/usePersistedState'; import ColumnSelect from './components/ColumnSelect'; +import { useCatch } from '../reactHelper'; const columnsArray = [ ['captureTime', 'statisticsCaptureTime'], @@ -30,13 +31,15 @@ const StatisticsPage = () => { const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']); const [items, setItems] = useState([]); - const handleSubmit = async (_, from, to) => { + const handleSubmit = useCatch(async (_, from, to) => { const query = new URLSearchParams({ from, to }); const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' }); if (response.ok) { setItems(await response.json()); + } else { + throw Error(await response.text()); } - }; + }); return ( <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}> diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index dd55b774..dc2ac19a 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -12,6 +12,7 @@ import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; import ColumnSelect from './components/ColumnSelect'; import usePersistedState from '../common/util/usePersistedState'; +import { useCatch } from '../reactHelper'; const columnsArray = [ ['startTime', 'reportStartTime'], @@ -33,7 +34,7 @@ const StopReportPage = () => { const [columns, setColumns] = usePersistedState('stopColumns', ['startTime', 'endTime', 'startOdometer', 'address']); const [items, setItems] = useState([]); - const handleSubmit = async (deviceId, from, to, mail, headers) => { + const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ deviceId, from, to, mail, }); @@ -47,8 +48,10 @@ const StopReportPage = () => { window.location.assign(window.URL.createObjectURL(await response.blob())); } } + } else { + throw Error(await response.text()); } - }; + }); const formatValue = (item, key) => { switch (key) { diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index e838cd9e..1b8fd8e0 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -12,6 +12,7 @@ import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; import usePersistedState from '../common/util/usePersistedState'; import ColumnSelect from './components/ColumnSelect'; +import { useCatch } from '../reactHelper'; const columnsArray = [ ['startTime', 'reportStartDate'], @@ -37,7 +38,7 @@ const SummaryReportPage = () => { const [daily, setDaily] = useState(false); const [items, setItems] = useState([]); - const handleSubmit = async (deviceId, from, to, mail, headers) => { + const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ deviceId, from, to, daily, mail, }); @@ -51,8 +52,10 @@ const SummaryReportPage = () => { window.location.assign(window.URL.createObjectURL(await response.blob())); } } + } else { + throw Error(await response.text()); } - }; + }); const formatValue = (item, key) => { switch (key) { diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index c9d620e8..6e230388 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -12,6 +12,7 @@ import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; import ColumnSelect from './components/ColumnSelect'; import usePersistedState from '../common/util/usePersistedState'; +import { useCatch } from '../reactHelper'; const columnsArray = [ ['startTime', 'reportStartTime'], @@ -39,7 +40,7 @@ const TripReportPage = () => { const [columns, setColumns] = usePersistedState('tripColumns', ['startTime', 'endTime', 'distance', 'averageSpeed']); const [items, setItems] = useState([]); - const handleSubmit = async (deviceId, from, to, mail, headers) => { + const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => { const query = new URLSearchParams({ deviceId, from, to, mail, }); @@ -53,8 +54,10 @@ const TripReportPage = () => { window.location.assign(window.URL.createObjectURL(await response.blob())); } } + } else { + throw Error(await response.text()); } - }; + }); const formatValue = (item, key) => { switch (key) { 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}> diff --git a/modern/src/store/errors.js b/modern/src/store/errors.js new file mode 100644 index 00000000..d1b86e5a --- /dev/null +++ b/modern/src/store/errors.js @@ -0,0 +1,21 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const { reducer, actions } = createSlice({ + name: 'errors', + initialState: { + errors: [], + }, + reducers: { + push(state, action) { + state.errors.push(action.payload); + }, + pop(state, _) { + if (state.errors.length) { + state.errors.shift(); + } + }, + }, +}); + +export { actions as errorsActions }; +export { reducer as errorsReducer }; diff --git a/modern/src/store/index.js b/modern/src/store/index.js index 6e2bb204..72867b76 100644 --- a/modern/src/store/index.js +++ b/modern/src/store/index.js @@ -1,5 +1,6 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit'; +import { errorsReducer as errors } from './errors'; import { sessionReducer as session } from './session'; import { devicesReducer as devices } from './devices'; import { positionsReducer as positions } from './positions'; @@ -9,6 +10,7 @@ import { driversReducer as drivers } from './drivers'; import { maintenancesReducer as maintenances } from './maintenances'; const reducer = combineReducers({ + errors, session, devices, positions, @@ -18,6 +20,7 @@ const reducer = combineReducers({ maintenances, }); +export { errorsActions } from './errors'; export { sessionActions } from './session'; export { devicesActions } from './devices'; export { positionsActions } from './positions'; |