Extract Snackbar & Alert code

components/Account/Modal.js

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Button, Modal, makeStyles, Snackbar,
+  Button, Modal, makeStyles,
 } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
 
 import api from '../../utils/api';
 import { useAuth } from '../../src/contexts/auth';
+import SnackAlert from '../shared/alert';
 
 function getModalStyle() {
   const top = 50;
@@ -90,26 +90,8 @@ function DeleteAccountModal({ open, setOpen }) {
         >
           Delete Account
         </Button>
-        <Snackbar
-          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-          open={successOpen}
-          autoHideDuration={3000}
-          onClose={handleSnackClose}
-        >
-          <Alert onClose={handleSnackClose} severity="success">
-            Account has been deleted. Redirecting...
-          </Alert>
-        </Snackbar>
-        <Snackbar
-          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-          open={errorOpen}
-          autoHideDuration={3000}
-          onClose={handleSnackClose}
-        >
-          <Alert onClose={handleSnackClose} severity="error">
-            Some error occurred. Please try again later.
-          </Alert>
-        </Snackbar>
+        <SnackAlert open={successOpen} onClose={handleSnackClose} severity="success" message="Account has been deleted. Redirecting..." />
+        <SnackAlert open={errorOpen} onClose={handleSnackClose} severity="error" message="Some error occurred. Please try again later." />
       </div>
     </Modal>
   );

components/Editor/index.js

@@ -4,9 +4,7 @@ import {
   Button,
   makeStyles,
   Grid,
-  Snackbar,
 } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
 import PropTypes from 'prop-types';
 import { Formik, Form } from 'formik';
 import { useRouter } from 'next/router';
@@ -20,6 +18,7 @@ import EnvironmentVariablesCard from './EnvironmentVariablesCard';
 import HeadersCard from './HeadersCard';
 
 import api from '../../utils/api';
+import SnackAlert from '../shared/alert';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -198,26 +197,8 @@ function Editor({ bridge, isEditView }) {
           </Formik>
         </Grid>
       </Grid>
-      <Snackbar
-        open={open}
-        autoHideDuration={3000}
-        onClose={handleClose}
-        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      >
-        <Alert onClose={handleClose} severity="success">
-          Bridge has been saved.
-        </Alert>
-      </Snackbar>
-      <Snackbar
-        open={errorOpen}
-        autoHideDuration={3000}
-        onClose={handleClose}
-        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      >
-        <Alert onClose={handleClose} severity="error">
-          Some error has occured. Please try again.
-        </Alert>
-      </Snackbar>
+      <SnackAlert open={open} onClose={handleClose} severity="success" message="Bridge has been saved." />
+      <SnackAlert open={errorOpen} onClose={handleClose} severity="error" message="Some error has occured. Please try again." />
     </>
   );
 }

components/shared/alert/index.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { Snackbar } from '@material-ui/core';
+import Alert from '@material-ui/lab/Alert';
+
+function SnackAlert({
+  open, severity, message, onClose,
+}) {
+  return (
+    <Snackbar
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      open={open}
+      onClose={onClose}
+      autoHideDuration={3000}
+    >
+      <Alert severity={severity}>
+        { message }
+      </Alert>
+    </Snackbar>
+  );
+}
+
+export default SnackAlert;
+
+SnackAlert.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
+  severity: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+};
+
+SnackAlert.defaultProps = {
+  onClose: () => {},
+};

pages/users/account.js

@@ -7,9 +7,7 @@ import {
   Container,
   Grid,
   Typography,
-  Snackbar,
 } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
 import { TextField, CheckboxWithLabel } from 'formik-material-ui';
 
 import Navbar from '../../components/shared/dashboard/Navbar';
@@ -19,6 +17,7 @@ import ProtectRoute from '../../utils/ProtectRoute';
 
 import api from '../../utils/api';
 import fetchDataOrRedirect from '../../utils/ssrRedirect';
+import SnackAlert from '../../components/shared/alert';
 
 function Account({ user }) {
   const [open, setOpen] = useState(false);
@@ -212,26 +211,8 @@ function Account({ user }) {
           </Form>
         )}
       </Formik>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-        open={successOpen}
-        autoHideDuration={3000}
-        onClose={handleSnackClose}
-      >
-        <Alert onClose={handleSnackClose} severity="success">
-          Account info has been updated.
-        </Alert>
-      </Snackbar>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-        open={errorOpen}
-        autoHideDuration={3000}
-        onClose={handleSnackClose}
-      >
-        <Alert onClose={handleSnackClose} severity="error">
-          Some error occurred. Please try again later.
-        </Alert>
-      </Snackbar>
+      <SnackAlert open={successOpen} onClose={handleSnackClose} severity="success" message="Account info has been updated." />
+      <SnackAlert open={errorOpen} onClose={handleSnackClose} severity="error" message="Some error occurred. Please try again later." />
     </ProtectRoute>
   );
 }

pages/users/signup.js

@@ -7,9 +7,7 @@ import {
   makeStyles,
   Link,
   Paper,
-  Snackbar,
 } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
 import { useRouter } from 'next/router';
 
 import { Formik, Form, Field } from 'formik';
@@ -18,6 +16,7 @@ import { TextField } from 'formik-material-ui';
 import { useAuth } from '../../src/contexts/auth';
 import emailValidator from '../../utils/emailValidator';
 import api from '../../utils/api';
+import SnackAlert from '../../components/shared/alert';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -179,26 +178,8 @@ function Signup() {
           </Link>
         </Container>
       </Paper>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        open={successOpen}
-        autoHideDuration={3000}
-        onClose={handleSnackClose}
-      >
-        <Alert onClose={handleSnackClose} severity="success">
-          Account has been created. Redirecting...
-        </Alert>
-      </Snackbar>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        open={errorOpen}
-        autoHideDuration={3000}
-        onClose={handleSnackClose}
-      >
-        <Alert onClose={handleSnackClose} severity="error">
-          Some error occurred. Please try again.
-        </Alert>
-      </Snackbar>
+      <SnackAlert open={successOpen} onClose={handleSnackClose} severity="success" message="Account has been created. Redirecting..." />
+      <SnackAlert open={errorOpen} onClose={handleSnackClose} severity="error" message="Some error occurred. Please try again." />
     </Grid>
   );
 }