1 files changed, 35 insertions, 0 deletions
diff --git a/web/src/components/NotificationBar.tsx b/web/src/components/NotificationBar.tsx
new file mode 100644
index 000000000..315a6f1cb
--- /dev/null
+++ b/web/src/components/NotificationBar.tsx
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from "react";
+import { Snackbar } from "@material-ui/core";
+import ColoredSnackbarContent from "./ColoredSnackbarContent";
+import { useNotifications } from "../hooks/NotificationsContext";
+import { Notification } from "../models/Notifications";
+
+export interface Props {
+    onClose: () => void;
+}
+
+export default function (props: Props) {
+    const [tmpNotification, setTmpNotification] = useState(null as Notification | null);
+    const { notification } = useNotifications();
+
+    useEffect(() => {
+        if (notification && notification !== null) {
+            setTmpNotification(notification);
+        }
+    }, [notification]);
+
+    const shouldSnackbarBeOpen = notification !== undefined && notification !== null;
+
+    return (
+        <Snackbar
+            open={shouldSnackbarBeOpen}
+            anchorOrigin={{ vertical: "top", horizontal: "right" }}
+            autoHideDuration={tmpNotification ? tmpNotification.timeout * 1000 : 10000}
+            onClose={props.onClose}
+            onExited={() => setTmpNotification(null)}>
+            <ColoredSnackbarContent
+                variant={tmpNotification ? tmpNotification.level : "info"}
+                message={tmpNotification ? tmpNotification.message : ""} />
+        </Snackbar>
+    )
+}
+\ No newline at end of file