From 3c0fab50c68d46c7cc808f92f67ae4b067e8b0c7 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Thu, 13 Jul 2023 10:31:10 +0330 Subject: [PATCH 1/3] 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 = () => { {isAuth ? ( + + + ), + { + 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( + () => ( + <> + + + + + + {t("success")} ({t("code")}: {status}) + + + {t("success_static_text")} + + + + + + ), + { + 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 }) => ( + <> + + + + + + {t("warning")} ({t("code")}: {status}) + + + {t("warning_static_text")} + + + + + + + + + ), + { + 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; From ae60d656c23a88a662f38e06463baa12d594af6f Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Thu, 13 Jul 2023 11:42:11 +0330 Subject: [PATCH 2/3] complete notifications --- public/locales/fa/app.json | 8 ++++ src/components/login-navy/SendUserData.jsx | 22 +++++---- src/core/components/Notification/index.jsx | 36 --------------- .../ErrorNotification.jsx | 23 ++-------- .../SuccessNotification.jsx | 9 ++-- .../WarningNotification.jsx | 18 +------- src/core/components/notifications/index.jsx | 46 +++++++++++++++++++ 7 files changed, 76 insertions(+), 86 deletions(-) delete mode 100644 src/core/components/Notification/index.jsx rename src/core/components/{Notification => notifications}/ErrorNotification.jsx (58%) rename src/core/components/{Notification => notifications}/SuccessNotification.jsx (81%) rename src/core/components/{Notification => notifications}/WarningNotification.jsx (67%) create mode 100644 src/core/components/notifications/index.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index af54719..b00205e 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -8,6 +8,7 @@ "register_navy": "ثبت نام اعضای ناوگان", "login_welfare_services": "ورود اعضای خدمات رفاهی", "register_welfare_services": "ثبت نام اعضای خدمات رفاهی", + "pending": "درحال اجرا...", "user_navy": "ناوگان", "header": { "open_profile": "پروفایل", @@ -15,6 +16,13 @@ "change_password": "تغییر رمز عبور", "logout": "خروج" }, + "notifications": { + "error_static_text": "عملیات با خطا مواجه شد", + "success_static_text": "عملیات با موفقیت انجام شد", + "code": "کد", + "success": "موفق", + "error": "خطا" + }, "Titles": { "title_login_page": "صفحه ورود", "title_login_navy_page": "ورود اعضای ناوگان", diff --git a/src/components/login-navy/SendUserData.jsx b/src/components/login-navy/SendUserData.jsx index c3197b8..db8a018 100644 --- a/src/components/login-navy/SendUserData.jsx +++ b/src/components/login-navy/SendUserData.jsx @@ -1,5 +1,5 @@ -// import Notifications from "@/core/components/notifications"; import LinkRouting from "@/core/components/LinkRouting"; +import Notifications from "@/core/components/notifications"; import StyledForm from "@/core/components/StyledForm"; import { LOGIN_SEND_OTP_TOKEN } from "@/core/data/apiRoutes"; import CenterLayout from "@/layouts/CenterLayout"; @@ -8,14 +8,14 @@ import useDirection from "@/lib/app/hooks/useDirection"; import FingerprintIcon from "@mui/icons-material/Fingerprint"; import PersonAddIcon from "@mui/icons-material/PersonAdd"; import { - Box, - Button, - Container, - Grid, - Paper, - Stack, - TextField, - Typography + Box, + Button, + Container, + Grid, + Paper, + Stack, + TextField, + Typography } from "@mui/material"; import axios from "axios"; import { Field, Formik } from "formik"; @@ -39,16 +39,18 @@ const SendUserData = ({ setOtpToken, setPhoneNumber }) => { }); const handleSubmit = async (values, props) => { + Notifications(directionApp, t, undefined); await axios .post(LOGIN_SEND_OTP_TOKEN, { phone_number: values.phone_number, }) .then(function (response) { + Notifications(directionApp, t, response); setPhoneNumber(values.phone_number); setOtpToken(true); }) .catch(function (error) { - // Notifications(directionApp, error.response, t); + Notifications(directionApp, t, error.response); props.setSubmitting(false); }); }; diff --git a/src/core/components/Notification/index.jsx b/src/core/components/Notification/index.jsx deleted file mode 100644 index 8152780..0000000 --- a/src/core/components/Notification/index.jsx +++ /dev/null @@ -1,36 +0,0 @@ -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; diff --git a/src/core/components/Notification/ErrorNotification.jsx b/src/core/components/notifications/ErrorNotification.jsx similarity index 58% rename from src/core/components/Notification/ErrorNotification.jsx rename to src/core/components/notifications/ErrorNotification.jsx index 4351aef..8e1b99a 100644 --- a/src/core/components/Notification/ErrorNotification.jsx +++ b/src/core/components/notifications/ErrorNotification.jsx @@ -1,10 +1,8 @@ import DangerousIcon from "@mui/icons-material/Dangerous"; -import { Box, Button, Divider, Typography } from "@mui/material"; +import { Box, Typography } from "@mui/material"; import { toast } from "react-toastify"; -import { useTranslations } from "next-intl"; -const ErrorNotification = (directionApp, status, message) => { - const t = useTranslations(); +const ErrorNotification = (directionApp, t, status, message) => { toast( ({ closeToast }) => ( <> @@ -20,27 +18,14 @@ const ErrorNotification = (directionApp, status, message) => { - {t("error")} ({t("code")}: {status}) + {t("notifications.error")} ({t("notifications.code")}: {status}) - {message && t("error_static_text")} + {message || t("notifications.error_static_text")} - - - ), { diff --git a/src/core/components/Notification/SuccessNotification.jsx b/src/core/components/notifications/SuccessNotification.jsx similarity index 81% rename from src/core/components/Notification/SuccessNotification.jsx rename to src/core/components/notifications/SuccessNotification.jsx index 7f69107..420e99a 100644 --- a/src/core/components/Notification/SuccessNotification.jsx +++ b/src/core/components/notifications/SuccessNotification.jsx @@ -1,10 +1,8 @@ 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(); +const SuccessNotification = (directionApp, t, status) => { toast( () => ( <> @@ -20,10 +18,11 @@ const SuccessNotification = (directionApp, status) => { - {t("success")} ({t("code")}: {status}) + {t("notifications.success")} ({t("notifications.code")}:{" "} + {status}) - {t("success_static_text")} + {t("notifications.success_static_text")} diff --git a/src/core/components/Notification/WarningNotification.jsx b/src/core/components/notifications/WarningNotification.jsx similarity index 67% rename from src/core/components/Notification/WarningNotification.jsx rename to src/core/components/notifications/WarningNotification.jsx index 9507569..1451031 100644 --- a/src/core/components/Notification/WarningNotification.jsx +++ b/src/core/components/notifications/WarningNotification.jsx @@ -1,10 +1,8 @@ import ReportIcon from "@mui/icons-material/Report"; -import { Box, Button, Divider, Typography } from "@mui/material"; -import { useTranslations } from "next-intl"; +import { Box, Divider, Typography } from "@mui/material"; import { toast } from "react-toastify"; -const WarningNotification = (directionApp, status) => { - const t = useTranslations(); +const WarningNotification = (directionApp, t, status) => { toast( ({ closeToast }) => ( <> @@ -29,18 +27,6 @@ const WarningNotification = (directionApp, status) => { - - ), { diff --git a/src/core/components/notifications/index.jsx b/src/core/components/notifications/index.jsx new file mode 100644 index 0000000..b1f4b29 --- /dev/null +++ b/src/core/components/notifications/index.jsx @@ -0,0 +1,46 @@ +import { toast } from "react-toastify"; +import ErrorNotification from "./ErrorNotification"; +import SuccessNotification from "./successNotification"; +import WarningNotification from "./warningNotification"; + +const Notifications = async (directionApp, t, response) => { + console.log(directionApp, t, response); + const { status, data } = response != undefined ? response : "" + toast.dismiss(); + switch (status) { + case 200: + SuccessNotification(directionApp, t, status); + break; + case 400: + ErrorNotification(directionApp, t,status); + break; + case 401: + ErrorNotification(directionApp, t, status); + break; + case 403: + ErrorNotification(directionApp, t, status); + break; + case 422: + ErrorNotification(directionApp, t, status, data.message); + break; + case 500: + WarningNotification(directionApp, t, status); + break; + case 503: + WarningNotification(directionApp, t, status); + break; + case 504: + WarningNotification(directionApp, t, status); + break; + default: + toast(t("pending"), { + position: directionApp === "ltr" ? "top-left" : "top-right", + autoClose: false, + closeOnClick: false, + draggable: false, + }); + break; + } +}; + +export default Notifications; From e3923d81162f5a7688e162bd7f7ed01de8fdb0ca Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Thu, 13 Jul 2023 12:00:27 +0330 Subject: [PATCH 3/3] debug notification --- src/core/components/notifications/index.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/core/components/notifications/index.jsx b/src/core/components/notifications/index.jsx index b1f4b29..9e8e52b 100644 --- a/src/core/components/notifications/index.jsx +++ b/src/core/components/notifications/index.jsx @@ -44,3 +44,13 @@ const Notifications = async (directionApp, t, response) => { }; export default Notifications; + +/* +usage document + +** for pending use ( Notifications(directionApp, t, undefined) ) this before your request. +** for success use ( Notifications(directionApp, t, response) ) this inside .then() of your request. +** for Error and Warning use ( Notifications(directionApp, t, error.response) ) this inside .catche() of your request. + +end usage document +*/