From cd90adee01d7a86988aa9d027d0aab71cf79bc74 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Tue, 31 Oct 2023 15:11:53 +0330 Subject: [PATCH] CFE-6 bug fix toast and make better flow for remove and add toast in page --- .../notifications/ErrorNotification.jsx | 4 +- .../notifications/PendingNotification.jsx | 5 +- .../notifications/SuccessNotification.jsx | 4 +- .../notifications/WarningNotification.jsx | 4 +- src/core/components/notifications/index.jsx | 12 ++--- src/core/utils/errorHandler.js | 48 +++++++++---------- src/core/utils/succesHandler.js | 7 ++- src/lib/app/contexts/toast.jsx | 11 ++++- src/lib/app/hooks/useRequest.jsx | 15 +++--- src/lib/app/hooks/useToast.jsx | 7 ++- 10 files changed, 59 insertions(+), 58 deletions(-) diff --git a/src/core/components/notifications/ErrorNotification.jsx b/src/core/components/notifications/ErrorNotification.jsx index 27ae26e..776c904 100644 --- a/src/core/components/notifications/ErrorNotification.jsx +++ b/src/core/components/notifications/ErrorNotification.jsx @@ -1,10 +1,8 @@ import DangerousIcon from "@mui/icons-material/Dangerous"; import {Box, Typography} from "@mui/material"; import {toast} from "react-toastify"; -import useToast from "@/lib/app/hooks/useToast"; -const ErrorNotification = (notificationType, t, status, message) => { - const {pushToastList} = useToast(); +const ErrorNotification = (pushToastList, notificationType, t, status, message) => { const toastId = toast( () => ( <> diff --git a/src/core/components/notifications/PendingNotification.jsx b/src/core/components/notifications/PendingNotification.jsx index fe0d47f..cc28a58 100644 --- a/src/core/components/notifications/PendingNotification.jsx +++ b/src/core/components/notifications/PendingNotification.jsx @@ -1,9 +1,6 @@ import {toast} from "react-toastify"; -import useToast from "@/lib/app/hooks/useToast"; - -const PendingNotification = (notificationType, t) => { - const {pushToastList} = useToast(); +const PendingNotification = (pushToastList, notificationType, t) => { const toastId = toast(t("notifications.pending"), { containerId: 'validation', autoClose: false, diff --git a/src/core/components/notifications/SuccessNotification.jsx b/src/core/components/notifications/SuccessNotification.jsx index 0ad83cd..1207000 100644 --- a/src/core/components/notifications/SuccessNotification.jsx +++ b/src/core/components/notifications/SuccessNotification.jsx @@ -2,7 +2,7 @@ import BeenhereIcon from "@mui/icons-material/Beenhere"; import {Box, Typography} from "@mui/material"; import {toast} from "react-toastify"; -const SuccessNotification = (notificationType, t, status) => { +const SuccessNotification = (pushToastList, notificationType, t, status) => { const toastId = toast( () => ( <> @@ -38,7 +38,7 @@ const SuccessNotification = (notificationType, t, status) => { draggable: true, } ); - notification_type_id.success.push(toastId); + pushToastList(notificationType, toastId); }; export default SuccessNotification; \ No newline at end of file diff --git a/src/core/components/notifications/WarningNotification.jsx b/src/core/components/notifications/WarningNotification.jsx index 8284f7a..bc2a1fb 100644 --- a/src/core/components/notifications/WarningNotification.jsx +++ b/src/core/components/notifications/WarningNotification.jsx @@ -2,7 +2,7 @@ import ReportIcon from "@mui/icons-material/Report"; import {Box, Typography} from "@mui/material"; import {toast} from "react-toastify"; -const WarningNotification = (notificationType, t, status) => { +const WarningNotification = (pushToastList, notificationType, t, status) => { const toastId = toast( () => ( <> @@ -36,7 +36,7 @@ const WarningNotification = (notificationType, t, status) => { draggable: false, } ); - notification_type_id.warning.push(toastId); + pushToastList(notificationType, toastId); }; export default WarningNotification; \ No newline at end of file diff --git a/src/core/components/notifications/index.jsx b/src/core/components/notifications/index.jsx index 8383009..34e44f3 100644 --- a/src/core/components/notifications/index.jsx +++ b/src/core/components/notifications/index.jsx @@ -3,23 +3,23 @@ import WarningNotification from "@/core/components/notifications/WarningNotifica import ErrorNotification from "@/core/components/notifications/ErrorNotification"; import SuccessNotification from "@/core/components/notifications/SuccessNotification"; -const Notifications = (notificationType, t, status, message) => { +const Notifications = (pushToastList, notificationType, t, status, message) => { switch (notificationType) { case "pending": - pendingNotification(notificationType, t); + pendingNotification(pushToastList, notificationType, t); break; case "warning": - WarningNotification(notificationType, t, status); + WarningNotification(pushToastList, notificationType, t, status); break; case "error": if (message) { - ErrorNotification(notificationType, t, status, message) + ErrorNotification(pushToastList, notificationType, t, status, message) } else { - ErrorNotification(notificationType, t, status) + ErrorNotification(pushToastList, notificationType, t, status) } break; case "success": - SuccessNotification(notificationType, t, status); + SuccessNotification(pushToastList, notificationType, t, status); break; } }; diff --git a/src/core/utils/errorHandler.js b/src/core/utils/errorHandler.js index 3f1d341..2c12ab2 100644 --- a/src/core/utils/errorHandler.js +++ b/src/core/utils/errorHandler.js @@ -1,50 +1,48 @@ -import {toast} from "react-toastify"; import Notifications from "@/core/components/notifications"; -export const errorSetting = (t, notification) => { +export const errorSetting = (dismissToastList, t, notification) => { if (notification) { - toast.dismiss() + dismissToastList(["pending", "warning", "error", "success"]) + } +} +export const errorRequest = (dismissToastList, t, notification) => { + if (notification) { + dismissToastList(["pending", "warning", "error", "success"]) } } -export const errorRequest = (t, notification) => { +export const errorResponse = (pushToastList, dismissToastList, response, clearToken, t, notification) => { if (notification) { - toast.dismiss() - } -} - -export const errorResponse = (response, clearToken, t, notification) => { - if (notification) { - toast.dismiss() + dismissToastList(["pending", "warning", "error", "success"]) } if (isServerError(response.status)) { - errorServer(response, t, notification) + errorServer(pushToastList, response, t, notification) } else if (isClientError(response.status)) { - errorClient(response, clearToken, t, notification) + errorClient(pushToastList, response, clearToken, t, notification) } } -const errorServer = (response, t, notification) => { - if (notification) Notifications("warning", t, response.status); +const errorServer = (pushToastList, response, t, notification) => { + if (notification) Notifications(pushToastList, "warning", t, response.status); } -const errorClient = (response, clearToken, t, notification) => { +const errorClient = (pushToastList, response, clearToken, t, notification) => { switch (response.status) { case 401: clearToken() - if (notification) Notifications("error", t, response.status); + if (notification) Notifications(pushToastList, "error", t, response.status); break; case 422: if ('type' in response.data) { - errorLogic(response, t, notification) + errorLogic(pushToastList, response, t, notification) break; } - errorValidation(response, t, notification) + errorValidation(pushToastList, response, t, notification) break; case 429: - if (notification) Notifications("error", t, response.status); + if (notification) Notifications(pushToastList, "error", t, response.status); break default: - if (notification) Notifications("error", t, response.status); + if (notification) Notifications(pushToastList, "error", t, response.status); break } } @@ -52,16 +50,16 @@ const errorClient = (response, clearToken, t, notification) => { const isServerError = status => status >= 500 && status <= 599; const isClientError = status => status >= 400 && status <= 499; -const errorLogic = (response, t, notification) => { - if (notification) Notifications("error", t, response.status, response.data.message); +const errorLogic = (pushToastList, response, t, notification) => { + if (notification) Notifications(pushToastList, "error", t, response.status, response.data.message); } -const errorValidation = (response, t, notification) => { +const errorValidation = (pushToastList, response, t, notification) => { if (notification) { const errorsMap = Object.keys(response.data.errors) const errorsArray = response.data.errors errorsMap.map((item, index) => { - Notifications("error", t, errorsArray[item][0], response.data.message); + Notifications(pushToastList, "error", t, errorsArray[item][0], response.data.message); }) } } \ No newline at end of file diff --git a/src/core/utils/succesHandler.js b/src/core/utils/succesHandler.js index f8bd707..c852f86 100644 --- a/src/core/utils/succesHandler.js +++ b/src/core/utils/succesHandler.js @@ -1,9 +1,8 @@ -import SuccessNotification from "@/core/components/notifications/SuccessNotification"; import Notifications from "@/core/components/notifications"; -export const successRequest = (response, t, options) => { +export const successRequest = (pushToastList, dismissToastList, response, t, options) => { if (options.notification && options.success.notification.show) { - SuccessNotification(t, response.status) - Notifications("success", t, response.status); + dismissToastList(["pending", "warning", "error", "success"]) + Notifications(pushToastList, "success", t, response.status); } } \ No newline at end of file diff --git a/src/lib/app/contexts/toast.jsx b/src/lib/app/contexts/toast.jsx index e8c7bc6..b9d4cbc 100644 --- a/src/lib/app/contexts/toast.jsx +++ b/src/lib/app/contexts/toast.jsx @@ -1,4 +1,5 @@ import {createContext, useReducer} from "react"; +import {toast} from "react-toastify"; export const ToastContext = createContext() @@ -9,6 +10,14 @@ const reducer = (state, action) => { ...state, [action.toast_type]: [...state[action.toast_type], action.toast_id] }; + case "DISMISS": + action.toast_type.map((item) => { + state[item].map((id) => { + toast.dismiss(id); + }) + state[item] = [] + }); + return state; } }; @@ -20,8 +29,6 @@ export const ToastProvider = ({children}) => { success: [] }); - console.log(state) - return ( {children} diff --git a/src/lib/app/hooks/useRequest.jsx b/src/lib/app/hooks/useRequest.jsx index a4c305b..4c3be1d 100644 --- a/src/lib/app/hooks/useRequest.jsx +++ b/src/lib/app/hooks/useRequest.jsx @@ -24,7 +24,7 @@ const useRequest = (initOptions) => { const network = useNetwork() const t = useTranslations() const {token, clearToken} = useUser() - const {pushToastList} = useToast(); + const {pushToastList, dismissToastList} = useToast(); let _options = {...defaultOptions, ...initOptions} function requestServer(url = '', method = 'get', options) { @@ -40,22 +40,25 @@ const useRequest = (initOptions) => { reject() return } - if (_options.notification && _options.failed.notification.show && _options.pending) Notifications("pending", t) + if (_options.notification && _options.failed.notification.show && _options.pending) { + dismissToastList(["pending", "warning", "error", "success"]); + Notifications(pushToastList, "pending", t); + } axios({ url: url, method: method, data: _options.data, ..._options.requestOptions }) .then(response => { - successRequest(response, t, _options) + successRequest(pushToastList, dismissToastList, response, t, _options) resolve(response) }) .catch(error => { if (error.response) { - errorResponse(error.response, clearToken, t, _options.notification && _options.failed.notification.show) + errorResponse(pushToastList, dismissToastList, error.response, clearToken, t, _options.notification && _options.failed.notification.show) } else if (error.request) { - errorRequest(t, _options.notification && _options.failed.notification.show) + errorRequest(dismissToastList, t, _options.notification && _options.failed.notification.show) } else { - errorSetting(t, _options.notification && _options.failed.notification.show) + errorSetting(dismissToastList, t, _options.notification && _options.failed.notification.show) } reject(error) }) diff --git a/src/lib/app/hooks/useToast.jsx b/src/lib/app/hooks/useToast.jsx index 8cc7875..5e1d5b4 100644 --- a/src/lib/app/hooks/useToast.jsx +++ b/src/lib/app/hooks/useToast.jsx @@ -2,15 +2,14 @@ import {useContext} from "react"; import {ToastContext} from "@/lib/app/contexts/toast"; const useToast = () => { - const {state, dispatch} = useContext(ToastContext); + const {dispatch} = useContext(ToastContext); const pushToastList = (toast_type, toast_id) => { - console.log() dispatch({type: "PUSH", toast_type, toast_id}); }; - const dismissToastList = () => { - dispatch({type: "DISMISS"}); + const dismissToastList = (toast_type) => { + dispatch({type: "DISMISS", toast_type}); }; return {