From 3c0fab50c68d46c7cc808f92f67ae4b067e8b0c7 Mon Sep 17 00:00:00 2001
From: Mohammad Jalali <muhammad.art79@gmail.com>
Date: Thu, 13 Jul 2023 10:31:10 +0330
Subject: [PATCH] add Notification(Error Handling)

---
 src/components/first/index.jsx                |  2 +-
 .../Notification/ErrorNotification.jsx        | 55 +++++++++++++++++++
 .../Notification/SuccessNotification.jsx      | 44 +++++++++++++++
 .../Notification/WarningNotification.jsx      | 55 +++++++++++++++++++
 src/core/components/Notification/index.jsx    | 36 ++++++++++++
 5 files changed, 191 insertions(+), 1 deletion(-)
 create mode 100644 src/core/components/Notification/ErrorNotification.jsx
 create mode 100644 src/core/components/Notification/SuccessNotification.jsx
 create mode 100644 src/core/components/Notification/WarningNotification.jsx
 create mode 100644 src/core/components/Notification/index.jsx

diff --git a/src/components/first/index.jsx b/src/components/first/index.jsx
index 24ef6bb..897f7cd 100644
--- a/src/components/first/index.jsx
+++ b/src/components/first/index.jsx
@@ -25,7 +25,7 @@ const FirstComponent = () => {
         </Typography>
         {isAuth ? (
           <Button
-            variant="outlined"
+            variant="contained"
             component={NextLinkComposed}
             to={{
               pathname: "/dashboard",
diff --git a/src/core/components/Notification/ErrorNotification.jsx b/src/core/components/Notification/ErrorNotification.jsx
new file mode 100644
index 0000000..4351aef
--- /dev/null
+++ b/src/core/components/Notification/ErrorNotification.jsx
@@ -0,0 +1,55 @@
+import DangerousIcon from "@mui/icons-material/Dangerous";
+import { Box, Button, Divider, Typography } from "@mui/material";
+import { toast } from "react-toastify";
+import { useTranslations } from "next-intl";
+
+const ErrorNotification = (directionApp, status, message) => {
+  const t = useTranslations();
+  toast(
+    ({ closeToast }) => (
+      <>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "start",
+            justifyContent: "start",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <DangerousIcon color="error" sx={{ mr: 1.6 }} />
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <Typography color="error" variant="button">
+                {t("error")} ({t("code")}: {status})
+              </Typography>
+              <Typography variant="caption">
+                {message && t("error_static_text")}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+        <Divider sx={{ my: 1 }} />
+        <Button
+          variant="contained"
+          size="small"
+          color="error"
+          sx={{ mr: 0.5 }}
+          onClick={closeToast}
+        >
+          {t("button_close")}
+        </Button>
+        <Button variant="contained" size="small" color="info">
+          {t("button_contact_us")}
+        </Button>
+      </>
+    ),
+    {
+      position: directionApp === "ltr" ? "top-left" : "top-right",
+      autoClose: false,
+      closeOnClick: false,
+      draggable: false,
+    }
+  );
+};
+
+export default ErrorNotification;
diff --git a/src/core/components/Notification/SuccessNotification.jsx b/src/core/components/Notification/SuccessNotification.jsx
new file mode 100644
index 0000000..7f69107
--- /dev/null
+++ b/src/core/components/Notification/SuccessNotification.jsx
@@ -0,0 +1,44 @@
+import BeenhereIcon from "@mui/icons-material/Beenhere";
+import { Box, Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { toast } from "react-toastify";
+
+const SuccessNotification = (directionApp, status) => {
+  const t = useTranslations();
+  toast(
+    () => (
+      <>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "start",
+            justifyContent: "start",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <BeenhereIcon color="success" sx={{ mr: 1.6 }} />
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <Typography color="success.main" variant="button">
+                {t("success")} ({t("code")}: {status})
+              </Typography>
+              <Typography variant="caption">
+                {t("success_static_text")}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </>
+    ),
+    {
+      position: directionApp === "ltr" ? "top-left" : "top-right",
+      autoClose: 3000,
+      hideProgressBar: true,
+      pauseOnHover: true,
+      closeOnClick: false,
+      draggable: true,
+    }
+  );
+};
+
+export default SuccessNotification;
diff --git a/src/core/components/Notification/WarningNotification.jsx b/src/core/components/Notification/WarningNotification.jsx
new file mode 100644
index 0000000..9507569
--- /dev/null
+++ b/src/core/components/Notification/WarningNotification.jsx
@@ -0,0 +1,55 @@
+import ReportIcon from "@mui/icons-material/Report";
+import { Box, Button, Divider, Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { toast } from "react-toastify";
+
+const WarningNotification = (directionApp, status) => {
+  const t = useTranslations();
+  toast(
+    ({ closeToast }) => (
+      <>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "start",
+            justifyContent: "start",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <ReportIcon color="warning" sx={{ mr: 1.6 }} />
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <Typography color="warning.main" variant="button">
+                {t("warning")} ({t("code")}: {status})
+              </Typography>
+              <Typography variant="caption">
+                {t("warning_static_text")}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+        <Divider sx={{ my: 1 }} />
+        <Button
+          variant="contained"
+          size="small"
+          color="warning"
+          sx={{ mr: 0.5 }}
+          onClick={closeToast}
+        >
+          {t("button_close")}
+        </Button>
+        <Button variant="contained" size="small" color="info">
+          {t("button_contact_us")}
+        </Button>
+      </>
+    ),
+    {
+      position: directionApp === "ltr" ? "top-left" : "top-right",
+      autoClose: false,
+      closeOnClick: false,
+      draggable: false,
+    }
+  );
+};
+
+export default WarningNotification;
diff --git a/src/core/components/Notification/index.jsx b/src/core/components/Notification/index.jsx
new file mode 100644
index 0000000..8152780
--- /dev/null
+++ b/src/core/components/Notification/index.jsx
@@ -0,0 +1,36 @@
+import { toast } from "react-toastify";
+import ErrorNotification from "./ErrorNotification";
+import SuccessNotification from "./successNotification";
+import WarningNotification from "./warningNotification";
+
+const Notifications = (directionApp, response) => {
+  toast.dismiss();
+  switch (response.status) {
+    case 200:
+      SuccessNotification(directionApp, response.status);
+      break;
+    case 400:
+      ErrorNotification(directionApp, response.status);
+      break;
+    case 401:
+      ErrorNotification(directionApp, response.status);
+      break;
+    case 403:
+      ErrorNotification(directionApp, response.status);
+      break;
+    case 422:
+      ErrorNotification(directionApp, response.status, response.data.message);
+      break;
+    case 500:
+      WarningNotification(directionApp, response.status);
+      break;
+    case 503:
+      WarningNotification(directionApp, response.status);
+      break;
+    case 504:
+      WarningNotification(directionApp, response.status);
+      break;
+  }
+};
+
+export default Notifications;