CFE-6 bug fix toast and make better flow for remove and add toast in page

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 ErrorNotification = (pushToastList, notificationType, t, status, message) => {
-    const {pushToastList} = useToast();
     const toastId = toast(
         () => (
             <>

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,

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;

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;

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;
     }
 };

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()
+        dismissToastList(["pending", "warning", "error", "success"])
-    }
-}
-
-export const errorResponse = (response, clearToken, t, notification) => {
-    if (notification) {
-        toast.dismiss()
     }
     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) => {
+const errorServer = (pushToastList, response, t, notification) => {
-    if (notification) Notifications("warning", t, response.status);
+    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) => {
+const errorLogic = (pushToastList, response, t, notification) => {
-    if (notification) Notifications("error", t, response.status, response.data.message);
+    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);
         })
     }
 }

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)
+        dismissToastList(["pending", "warning", "error", "success"])
-        Notifications("success", t, response.status);
+        Notifications(pushToastList, "success", t, response.status);
     }
 }

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 (
         <ToastContext.Provider value={{state, dispatch}}>
             {children}

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)
                 })

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 = () => {
+    const dismissToastList = (toast_type) => {
-        dispatch({type: "DISMISS"});
+        dispatch({type: "DISMISS", toast_type});
     };
 
     return {