CFE-6 debugging notifications

src/components/dashboard/edit-profile/index.jsx

@@ -7,19 +7,18 @@ import * as Yup from "yup";
 import {Field, Formik} from "formik";
 import {useTranslations} from "next-intl";
 import AvatarUpload from "@/core/components/AvatarUpload";
-import axios from "axios";
 import {UPDATE_AVATAR} from "@/core/data/apiRoutes";
 import useDirection from "@/lib/app/hooks/useDirection";
-import Notifications from "@/core/components/notifications";
 import ImageResizer from "@/core/components/ImageConvertor";
+import useRequest from "@/lib/app/hooks/useRequest";
 
 const DashboardEditProfile = () => {
     const t = useTranslations();
+    const requestServer = useRequest({auth: true})
     const {user, token, getUser, changeUser} = useUser();
     const {directionApp} = useDirection();
 
     const editAvatar = async (avatar) => {
-        Notifications(t);
         try {
             const formData = new FormData();
 
@@ -28,15 +27,12 @@ const DashboardEditProfile = () => {
                 resizedAvatar = await ImageResizer(avatar);
                 formData.append("avatar", resizedAvatar);
             }
-
+            await requestServer(UPDATE_AVATAR, 'post', {formData}).then((response) => {
-            await axios.post(UPDATE_AVATAR, formData, {
+            })
-                headers: {
+                .catch(() => {
-                    authorization: `Bearer ${token}`,
+                }).finally(() => {
-                    "Content-Type": "multipart/form-data",
+                });
-                },
-            });
         } catch (error) {
-            Notifications(t, error.response);
             throw error;
         }
     };
@@ -99,11 +95,7 @@ const DashboardEditProfile = () => {
                                                     margin="normal"
                                                     size="small"
                                                     disabled={true}
-                                                    error={
+                                                    error={!!(props.touched.username && props.errors.username)}
-                                                        props.touched.username && props.errors.username
-                                                            ? true
-                                                            : false
-                                                    }
                                                     helperText={
                                                         props.touched.username
                                                             ? props.errors.username
@@ -123,11 +115,7 @@ const DashboardEditProfile = () => {
                                                     margin="normal"
                                                     size="small"
                                                     disabled={true}
-                                                    error={
+                                                    error={!!(props.touched.name && props.errors.name)}
-                                                        props.touched.name && props.errors.name
-                                                            ? true
-                                                            : false
-                                                    }
                                                     helperText={
                                                         props.touched.name ? props.errors.name : null
                                                     }
@@ -145,11 +133,7 @@ const DashboardEditProfile = () => {
                                                     margin="normal"
                                                     size="small"
                                                     disabled={true}
-                                                    error={
+                                                    error={!!(props.touched.email && props.errors.email)}
-                                                        props.touched.email && props.errors.email
-                                                            ? true
-                                                            : false
-                                                    }
                                                     helperText={
                                                         props.touched.email ? props.errors.email : null
                                                     }
@@ -168,12 +152,7 @@ const DashboardEditProfile = () => {
                                                     margin="normal"
                                                     size="small"
                                                     disabled={true}
-                                                    error={
+                                                    error={!!(props.touched.province_name && props.errors.province_name)}
-                                                        props.touched.province_name &&
-                                                        props.errors.province_name
-                                                            ? true
-                                                            : false
-                                                    }
                                                     helperText={
                                                         props.touched.province_name
                                                             ? props.errors.province_name
@@ -193,11 +172,7 @@ const DashboardEditProfile = () => {
                                                     margin="normal"
                                                     size="small"
                                                     disabled={true}
-                                                    error={
+                                                    error={!!(props.touched.position && props.errors.position)}
-                                                        props.touched.position && props.errors.position
-                                                            ? true
-                                                            : false
-                                                    }
                                                     helperText={
                                                         props.touched.position
                                                             ? props.errors.position

src/core/components/notifications/ErrorNotification.jsx

@@ -29,6 +29,7 @@ const ErrorNotification = (t, status, message) => {
             </>
         ),
         {
+            containerId: 'validation',
             autoClose: false,
             closeOnClick: false,
             draggable: false,

src/core/components/notifications/PendingNotification.jsx

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

src/core/components/notifications/SuccessNotification.jsx

@@ -30,6 +30,7 @@ const SuccessNotification = (t, status) => {
             </>
         ),
         {
+            containerId: 'validation',
             autoClose: 3000,
             hideProgressBar: true,
             pauseOnHover: true,

src/core/components/notifications/UploadFileNotification.jsx

@@ -26,6 +26,8 @@ const UploadFileNotification = (t) => {
             </>
         ),
         {
+            containerId: 'validation',
+            toastId: 'upload',
             autoClose: 3000,
             hideProgressBar: true,
             pauseOnHover: true,

src/core/components/notifications/WarningNotification.jsx

@@ -30,6 +30,7 @@ const WarningNotification = (t, status) => {
             </>
         ),
         {
+            containerId: 'validation',
             autoClose: false,
             closeOnClick: false,
             draggable: false,

src/core/components/notifications/index.jsx

@@ -1,54 +1,25 @@
-import {toast} from "react-toastify";
+import pendingNotification from "@/core/components/notifications/PendingNotification";
-import ErrorNotification from "./ErrorNotification";
+import WarningNotification from "@/core/components/notifications/WarningNotification";
-import WarningNotification from "./WarningNotification";
+import ErrorNotification from "@/core/components/notifications/ErrorNotification";
-import SuccessNotification from "./SuccessNotification";
+import SuccessNotification from "@/core/components/notifications/SuccessNotification";
 
-const Notifications = async (t, response) => {
+const Notifications = (notificationType, t, status, message) => {
-    const {status, data} = response != undefined ? response : ""
+    let notification_type_id = {
-    toast.dismiss();
+        pending: [],
-    switch (status) {
+        error: [],
-        case 200:
+        warning: [],
-            SuccessNotification(t, status);
+        success: []
-            break;
+    }
-        case 400:
+
-            ErrorNotification(t, status);
+    if (notificationType === "pending") {
-            break;
+        pendingNotification(t);
-        case 401:
+    } else if (notificationType === "warning") {
-            ErrorNotification(t, status);
+        WarningNotification(t, status);
-            break;
+    } else if (notificationType === "error") {
-        case 403:
+        message ? ErrorNotification(t, status, message) : ErrorNotification(t, status);
-            ErrorNotification(t, status);
+    } else if (notificationType === "success") {
-            break;
+        SuccessNotification(t, status);
-        case 422:
-            ErrorNotification(t, status, data.message);
-            break;
-        case 500:
-            WarningNotification(t, status);
-            break;
-        case 503:
-            WarningNotification(t, status);
-            break;
-        case 504:
-            WarningNotification(t, status);
-            break;
-        default:
-            toast(t("notifications.pending"), {
-                autoClose: false,
-                closeOnClick: false,
-                draggable: false,
-            });
-            break;
     }
 };
 
 export default Notifications;
-
-/*
-usage document
-
-** for pending use ( Notifications( t, undefined) ) this before your request.
-** for success use ( Notifications( t, response) ) this inside .then() of your request.
-** for Error and Warning use ( Notifications( t, error.response) ) this inside .catche() of your request.
-
-end usage document
-*/

src/core/utils/errorHandler.js

@@ -1,17 +1,22 @@
-import ErrorNotification from "@/core/components/notifications/ErrorNotification";
-import WarningNotification from "@/core/components/notifications/WarningNotification";
 import {toast} from "react-toastify";
+import Notifications from "@/core/components/notifications";
 
 export const errorSetting = (t, notification) => {
-    if (notification) toast.dismiss();
+    if (notification) {
+        toast.dismiss()
+    }
 }
 
 export const errorRequest = (t, notification) => {
-    if (notification) toast.dismiss();
+    if (notification) {
+        toast.dismiss()
+    }
 }
 
 export const errorResponse = (response, clearToken, t, notification) => {
-    if (notification) toast.dismiss();
+    if (notification) {
+        toast.dismiss()
+    }
     if (isServerError(response.status)) {
         errorServer(response, t, notification)
     } else if (isClientError(response.status)) {
@@ -20,13 +25,13 @@ export const errorResponse = (response, clearToken, t, notification) => {
 }
 
 const errorServer = (response, t, notification) => {
-    if (notification) WarningNotification(t, response.status);
+    if (notification) Notifications("warning", t, response.status);
 }
 const errorClient = (response, clearToken, t, notification) => {
     switch (response.status) {
         case 401:
             clearToken()
-            if (notification) ErrorNotification(t, response.status)
+            if (notification) Notifications("error", t, response.status);
             break;
         case 422:
             if ('type' in response.data) {
@@ -36,10 +41,10 @@ const errorClient = (response, clearToken, t, notification) => {
             errorValidation(response, t, notification)
             break;
         case 429:
-            if (notification) ErrorNotification(t, response.status)
+            if (notification) Notifications("error", t, response.status);
             break
         default:
-            if (notification) ErrorNotification(t, response.status)
+            if (notification) Notifications("error", t, response.status);
             break
     }
 }
@@ -48,7 +53,7 @@ const isServerError = status => status >= 500 && status <= 599;
 const isClientError = status => status >= 400 && status <= 499;
 
 const errorLogic = (response, t, notification) => {
-    if (notification) ErrorNotification(t, response.status, response.data.message)
+    if (notification) Notifications("error", t, response.status, response.data.message);
 }
 const errorValidation = (response, t, notification) => {
     if (notification) {
@@ -56,7 +61,7 @@ const errorValidation = (response, t, notification) => {
         const errorsArray = response.data.errors
 
         errorsMap.map((item, index) => {
-            ErrorNotification(t, response.status, errorsArray[item][0]);
+            Notifications("error", t, errorsArray[item][0], response.data.message);
         })
     }
 }

src/core/utils/succesHandler.js

@@ -1,9 +1,9 @@
 import SuccessNotification from "@/core/components/notifications/SuccessNotification";
-import {toast} from "react-toastify";
+import Notifications from "@/core/components/notifications";
 
 export const successRequest = (response, t, options) => {
     if (options.notification && options.success.notification.show) {
-        toast.dismiss();
         SuccessNotification(t, response.status)
+        Notifications("success", t, response.status);
     }
 }

src/layouts/AppLayout.jsx

@@ -41,16 +41,22 @@ function AppLayout({children, isBot}) {
         if (!languageIsReady) return;
     }
 
-    return (<>
+    return (
-        <GlobalHead/>
+        <>
-        <NextNProgress
+            <GlobalHead/>
-            color={theme.palette.secondary.dark}
+            <NextNProgress
-            options={{showSpinner: false}}
+                color={theme.palette.secondary.dark}
-        />
+                options={{showSpinner: false}}
-        <ToastContainer position={directionApp === "ltr" ? "top-left" : "top-right"} rtl={directionApp === 'rtl'}/>
+            />
-        <NetworkComponent/>
+            <ToastContainer
-        {children}
+                enableMultiContainer
-    </>);
+                containerId="validation"
+                position={directionApp === "ltr" ? "top-left" : "top-right"}
+                rtl={directionApp === 'rtl'}/>
+            <NetworkComponent/>
+            {children}
+        </>
+    );
 }
 
 export default AppLayout;

src/lib/app/contexts/socket.jsx

@@ -2,9 +2,10 @@ import {createContext, useEffect, useMemo, useRef, useState} from "react";
 import {io} from "socket.io-client";
 import useUser from "@/lib/app/hooks/useUser";
 import {useTranslations} from "next-intl";
-import {toast} from "react-toastify";
+import {toast, ToastContainer} from "react-toastify";
 import PowerIcon from "@mui/icons-material/Power";
 import PowerOffIcon from "@mui/icons-material/PowerOff";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 export const SocketContext = createContext()
 
@@ -13,6 +14,7 @@ export const SocketProvider = ({children}) => {
     const [connectionError, setConnectionError] = useState(false)
     const socketToastId = useRef(null);
     const t = useTranslations()
+    const {directionApp} = useDirection();
     const socket = useMemo(() => io(process.env.NEXT_PUBLIC_SERVER_SOCKET_URL, {
         autoConnect: false,
         auth: {
@@ -57,11 +59,20 @@ export const SocketProvider = ({children}) => {
             return
         }
         socketToastId.current = toast.warn(t('socket_is_not_connect_message'), {
+            containerId: 'socket',
             draggable: false,
             autoClose: false, closeButton: false, closeOnClick: false, icon: <PowerOffIcon/>
         })
 
     }, [connectionError]);
 
-    return <SocketContext.Provider value={{socket}}>{children}</SocketContext.Provider>
+    return (
+        <SocketContext.Provider value={{socket}}>
+            <ToastContainer
+                enableMultiContainer containerId={'socket'}
+                position={directionApp === "ltr" ? "top-right" : "top-left"}
+                rtl={directionApp === 'rtl'}/>
+            {children}
+        </SocketContext.Provider>
+    )
 }

src/lib/app/hooks/useRequest.jsx

@@ -1,10 +1,10 @@
 import axios from "axios";
 import {successRequest} from "@/core/utils/succesHandler";
-import PendingNotification from "@/core/components/notifications/PendingNotification";
 import {useTranslations} from "next-intl";
 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";
 
 const defaultOptions = {
     auth: false, data: {}, requestOptions: {
@@ -39,7 +39,7 @@ const useRequest = (initOptions) => {
                 reject()
                 return
             }
-            if (_options.notification && _options.failed.notification.show && _options.pending) PendingNotification(t)
+            if (_options.notification && _options.failed.notification.show && _options.pending) Notifications("pending", t)
             axios({
                 url: url, method: method, data: _options.data, ..._options.requestOptions
             })