Implement API error handling

1 files changed, 26 insertions, 0 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;