CFE-6 notification bug fix

src/core/components/notifications/ErrorNotification.jsx

@@ -1,9 +1,11 @@
 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 = (t, status, message) => {
+const ErrorNotification = (notificationType, t, status, message) => {
-    toast(
+    const {pushToastList} = useToast();
+    const toastId = toast(
         () => (
             <>
                 <Box
@@ -35,6 +37,7 @@ const ErrorNotification = (t, status, message) => {
             draggable: false,
         }
     );
+    pushToastList(notificationType, toastId);
 };
 
 export default ErrorNotification;

src/core/components/notifications/PendingNotification.jsx

@@ -1,14 +1,17 @@
 import {toast} from "react-toastify";
+import useToast from "@/lib/app/hooks/useToast";
 
-let a = {pending: []}
+const PendingNotification = (notificationType, t) => {
-const PendingNotification = (t) => {
+    const {pushToastList} = useToast();
-    toast(t("notifications.pending"), {
+
+    const toastId = toast(t("notifications.pending"), {
         containerId: 'validation',
         autoClose: false,
         closeButton: false,
         closeOnClick: false,
         draggable: false,
-    })
+    });
+    pushToastList(notificationType, toastId);
 };
 
 export default PendingNotification;

src/core/components/notifications/SuccessNotification.jsx

@@ -2,8 +2,8 @@ import BeenhereIcon from "@mui/icons-material/Beenhere";
 import {Box, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const SuccessNotification = (t, status) => {
+const SuccessNotification = (notificationType, t, status) => {
-    toast(
+    const toastId = toast(
         () => (
             <>
                 <Box
@@ -38,6 +38,7 @@ const SuccessNotification = (t, status) => {
             draggable: true,
         }
     );
+    notification_type_id.success.push(toastId);
 };
 
 export default SuccessNotification;

src/core/components/notifications/WarningNotification.jsx

@@ -2,8 +2,8 @@ import ReportIcon from "@mui/icons-material/Report";
 import {Box, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const WarningNotification = (t, status) => {
+const WarningNotification = (notificationType, t, status) => {
-    toast(
+    const toastId = toast(
         () => (
             <>
                 <Box
@@ -36,6 +36,7 @@ const WarningNotification = (t, status) => {
             draggable: false,
         }
     );
+    notification_type_id.warning.push(toastId);
 };
 
 export default WarningNotification;

src/core/components/notifications/index.jsx

@@ -4,21 +4,23 @@ import ErrorNotification from "@/core/components/notifications/ErrorNotification
 import SuccessNotification from "@/core/components/notifications/SuccessNotification";
 
 const Notifications = (notificationType, t, status, message) => {
-    let notification_type_id = {
+    switch (notificationType) {
-        pending: [],
+        case "pending":
-        error: [],
+            pendingNotification(notificationType, t);
-        warning: [],
+            break;
-        success: []
+        case "warning":
-    }
+            WarningNotification(notificationType, t, status);
-
+            break;
-    if (notificationType === "pending") {
+        case "error":
-        pendingNotification(t);
+            if (message) {
-    } else if (notificationType === "warning") {
+                ErrorNotification(notificationType, t, status, message)
-        WarningNotification(t, status);
+            } else {
-    } else if (notificationType === "error") {
+                ErrorNotification(notificationType, t, status)
-        message ? ErrorNotification(t, status, message) : ErrorNotification(t, status);
+            }
-    } else if (notificationType === "success") {
+            break;
-        SuccessNotification(t, status);
+        case "success":
+            SuccessNotification(notificationType, t, status);
+            break;
     }
 };
 

src/layouts/DashboardLayout.jsx

@@ -1,4 +1,3 @@
-import CallWidget from "src/components/layouts/Dashboard/CallWidget";
 import Dashboard from "src/components/layouts/Dashboard";
 
 const DashboardLayout = (props) => {
@@ -6,7 +5,7 @@ const DashboardLayout = (props) => {
     return (
         <>
             <Dashboard {...props}/>
-            <CallWidget/>
+            {/*<CallWidget/>*/}
         </>
     );
 };

src/lib/app/contexts/toast.jsx

@@ -0,0 +1,30 @@
+import {createContext, useReducer} from "react";
+
+export const ToastContext = createContext()
+
+const reducer = (state, action) => {
+    switch (action.type) {
+        case "PUSH":
+            return {
+                ...state,
+                [action.toast_type]: [...state[action.toast_type], action.toast_id]
+            };
+    }
+};
+
+export const ToastProvider = ({children}) => {
+    const [state, dispatch] = useReducer(reducer, {
+        pending: [],
+        error: [],
+        warning: [],
+        success: []
+    });
+
+    console.log(state)
+
+    return (
+        <ToastContext.Provider value={{state, dispatch}}>
+            {children}
+        </ToastContext.Provider>
+    );
+};

src/lib/app/hooks/useRequest.jsx

@@ -5,6 +5,7 @@ import useUser from "@/lib/app/hooks/useUser";
 import {errorRequest, errorResponse, errorSetting} from "@/core/utils/errorHandler";
 import useNetwork from "@/lib/app/hooks/useNetwork";
 import Notifications from "@/core/components/notifications";
+import useToast from "@/lib/app/hooks/useToast";
 
 const defaultOptions = {
     auth: false, data: {}, requestOptions: {
@@ -23,6 +24,7 @@ const useRequest = (initOptions) => {
     const network = useNetwork()
     const t = useTranslations()
     const {token, clearToken} = useUser()
+    const {pushToastList} = useToast();
     let _options = {...defaultOptions, ...initOptions}
 
     function requestServer(url = '', method = 'get', options) {
@@ -33,13 +35,13 @@ const useRequest = (initOptions) => {
                 headers: {..._options.requestOptions.headers, authorization: `Bearer ${token}`}
             }
         }
-
         return new Promise((resolve, reject) => {
             if (!network.online) {
                 reject()
                 return
             }
             if (_options.notification && _options.failed.notification.show && _options.pending) Notifications("pending", t)
+
             axios({
                 url: url, method: method, data: _options.data, ..._options.requestOptions
             })

src/lib/app/hooks/useToast.jsx

@@ -0,0 +1,22 @@
+import {useContext} from "react";
+import {ToastContext} from "@/lib/app/contexts/toast";
+
+const useToast = () => {
+    const {state, dispatch} = useContext(ToastContext);
+
+    const pushToastList = (toast_type, toast_id) => {
+        console.log()
+        dispatch({type: "PUSH", toast_type, toast_id});
+    };
+
+    const dismissToastList = () => {
+        dispatch({type: "DISMISS"});
+    };
+
+    return {
+        pushToastList,
+        dismissToastList
+    }
+};
+
+export default useToast;

src/pages/_app.jsx

@@ -8,21 +8,24 @@ import "moment/locale/fa";
 import {NextIntlProvider} from "next-intl";
 import TitlePage from "@/core/components/TitlePage";
 import {SocketProvider} from "@/lib/app/contexts/socket";
+import {ToastProvider} from "@/lib/app/contexts/toast";
 
 const App = ({Component, pageProps}) => {
 
     return (<>
         <UserProvider>
             <LanguageProvider>
-                <NextIntlProvider locale = {pageProps.locale} messages = {pageProps.messages || {}}>
+                <NextIntlProvider locale={pageProps.locale} messages={pageProps.messages || {}}>
-                    <MuiLayout isBot = {pageProps.isBot}>
+                    <MuiLayout isBot={pageProps.isBot}>
-                        {pageProps.messages ? <TitlePage text = {pageProps.title}/> : ''}
+                        {pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
                         <LoadingProvider>
-                            <AppLayout isBot = {pageProps.isBot}>
+                            <ToastProvider>
-                                <SocketProvider>
+                                <AppLayout isBot={pageProps.isBot}>
-                                    <Component {...pageProps} />
+                                    <SocketProvider>
-                                </SocketProvider>
+                                        <Component {...pageProps} />
-                            </AppLayout>
+                                    </SocketProvider>
+                                </AppLayout>
+                            </ToastProvider>
                         </LoadingProvider>
                     </MuiLayout>
                 </NextIntlProvider>