Use snackbar globally

1 files changed, 25 insertions, 0 deletions

diff --git a/client/src/components/GlobalSnackbar.tsx b/client/src/components/GlobalSnackbar.tsx
new file mode 100644
index 0000000..f0019fa
--- /dev/null
+++ b/client/src/components/GlobalSnackbar.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Alert, Snackbar } from '@mui/material';
+import { hideSnackbar, selectSnackbarState } from '../slices/snackbarSlice';
+
+function GlobalSnackbar() {
+  const dispatch = useDispatch();
+  const { open, message, severity } = useSelector(selectSnackbarState);
+
+  const handleClose = () => {
+    dispatch(hideSnackbar());
+  };
+
+  return (
+    <Snackbar open={open} onClose={handleClose} autoHideDuration={5000}>
+      <div>
+        <Alert severity={severity} onClose={handleClose}>
+          {message}
+        </Alert>
+      </div>
+    </Snackbar>
+  );
+}
+
+export default GlobalSnackbar;