From 7cc55c59f45adf9e7ac5c2c6dde0ac90dba930ea Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Fri, 30 Jul 2021 01:06:28 +0300
Subject: [PATCH] Toast container in separate component

---
 src/components/toast/ToastContainer.js   | 22 ++++++++++++++++++++++
 src/components/toast/styles.js           | 13 +++++++++++++
 src/pages/notifications/Notifications.js | 17 +++--------------
 src/pages/notifications/styles.js        |  9 ---------
 4 files changed, 38 insertions(+), 23 deletions(-)
 create mode 100644 src/components/toast/ToastContainer.js
 create mode 100644 src/components/toast/styles.js

diff --git a/src/components/toast/ToastContainer.js b/src/components/toast/ToastContainer.js
new file mode 100644
index 0000000..676db99
--- /dev/null
+++ b/src/components/toast/ToastContainer.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { ToastContainer as ReactToastContainer } from "react-toastify";
+import { Close as CloseIcon } from "@material-ui/icons";
+import useStyles from "./styles";
+
+const ToastContainer = () => {
+  var classes = useStyles();
+  return (
+    <ReactToastContainer
+      className={classes.toastsContainer}
+      closeButton={<CloseButton className={classes.notificationCloseButton} />}
+      closeOnClick={false}
+      progressClassName={classes.notificationProgress}
+    />
+  );
+};
+
+function CloseButton({ closeToast, className }) {
+  return <CloseIcon className={className} onClick={closeToast} />;
+}
+
+export default ToastContainer;
diff --git a/src/components/toast/styles.js b/src/components/toast/styles.js
new file mode 100644
index 0000000..456f118
--- /dev/null
+++ b/src/components/toast/styles.js
@@ -0,0 +1,13 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles((theme) => ({
+  toastsContainer: {
+    width: 400,
+    marginTop: theme.spacing(6),
+    right: 0
+  },
+  notificationCloseButton: {
+    position: "absolute",
+    right: theme.spacing(2)
+  }
+}));
diff --git a/src/pages/notifications/Notifications.js b/src/pages/notifications/Notifications.js
index f455119..f41157e 100644
--- a/src/pages/notifications/Notifications.js
+++ b/src/pages/notifications/Notifications.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Grid } from "@material-ui/core";
-import { Close as CloseIcon } from "@material-ui/icons";
-import { ToastContainer, toast } from "react-toastify";
+import { toast } from "react-toastify";
+import ToastContainer from "../../components/toast/ToastContainer";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import classnames from "classnames";
@@ -36,14 +36,7 @@ export default function NotificationsPage(props) {
     <>
       <PageTitle title="Notifications" />
       <Grid container spacing={4}>
-        <ToastContainer
-          className={classes.toastsContainer}
-          closeButton={
-            <CloseButton className={classes.notificationCloseButton} />
-          }
-          closeOnClick={false}
-          progressClassName={classes.notificationProgress}
-        />
+        <ToastContainer />
         <Grid item xs={12}>
           <Widget disableWidgetMenu>
             <Grid container item xs={12}>
@@ -416,7 +409,3 @@ export default function NotificationsPage(props) {
     setNotificationPosition(positionId);
   }
 }
-
-function CloseButton({ closeToast, className }) {
-  return <CloseIcon className={className} onClick={closeToast} />;
-}
diff --git a/src/pages/notifications/styles.js b/src/pages/notifications/styles.js
index 9d47b8a..08b2026 100644
--- a/src/pages/notifications/styles.js
+++ b/src/pages/notifications/styles.js
@@ -55,15 +55,6 @@ export default makeStyles((theme) => ({
   notificationItem: {
     marginTop: theme.spacing(2)
   },
-  notificationCloseButton: {
-    position: "absolute",
-    right: theme.spacing(2)
-  },
-  toastsContainer: {
-    width: 400,
-    marginTop: theme.spacing(6),
-    right: 0
-  },
   progress: {
     visibility: "hidden"
   },