implementation error handler

src/core/components/ResendToken.jsx

@@ -29,17 +29,17 @@ const ResendToken = ({initialTimerValue, timer, setTimer, PhoneNumber}) => {
     const handleResendClick = async () => {
         // work on it
         if (timer != 0) return;
-        Notifications(directionApp, t, undefined);
+        Notifications(t, undefined);
         await axios
             .post(SEND_OTP_TOKEN, {
                 phone_number: PhoneNumber,
             })
             .then(function (response) {
-                Notifications(directionApp, t, response);
+                Notifications(t, response);
                 setTimer(initialTimerValue);
             })
             .catch(function (error) {
-                Notifications(directionApp, t, error.response);
+                Notifications(t, error.response);
             });
     };
     // End Handle Resend Token

src/core/components/notifications/ErrorNotification.jsx

@@ -2,7 +2,7 @@ import DangerousIcon from "@mui/icons-material/Dangerous";
 import {Box, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const ErrorNotification = (directionApp, t, status, message) => {
+const ErrorNotification = (t, status, message) => {
     toast(
         ({closeToast}) => (
             <>
@@ -29,7 +29,6 @@ const ErrorNotification = (directionApp, t, status, message) => {
             </>
         ),
         {
-            position: directionApp === "ltr" ? "top-left" : "top-right",
             autoClose: false,
             closeOnClick: false,
             draggable: false,

src/core/components/notifications/PendingNotification.jsx

@@ -0,0 +1,11 @@
+import {toast} from "react-toastify";
+
+const PendingNotification = (t) => {
+    toast(t("notifications.pending"), {
+        autoClose: false,
+        closeOnClick: false,
+        draggable: false,
+    });
+};
+
+export default PendingNotification;

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 = (directionApp, t, status) => {
+const SuccessNotification = (t, status) => {
     toast(
         () => (
             <>
@@ -30,7 +30,6 @@ const SuccessNotification = (directionApp, t, status) => {
             </>
         ),
         {
-            position: directionApp === "ltr" ? "top-left" : "top-right",
             autoClose: 3000,
             hideProgressBar: true,
             pauseOnHover: true,

src/core/components/notifications/WarningNotification.jsx

@@ -2,7 +2,7 @@ import ReportIcon from "@mui/icons-material/Report";
 import {Box, Divider, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const WarningNotification = (directionApp, t, status) => {
+const WarningNotification = (t, status) => {
     toast(
         ({closeToast}) => (
             <>
@@ -30,7 +30,6 @@ const WarningNotification = (directionApp, t, status) => {
             </>
         ),
         {
-            position: directionApp === "ltr" ? "top-left" : "top-right",
             autoClose: false,
             closeOnClick: false,
             draggable: false,

src/core/components/notifications/index.jsx

@@ -3,37 +3,36 @@ import ErrorNotification from "./ErrorNotification";
 import SuccessNotification from "./SuccessNotification";
 import WarningNotification from "./WarningNotification";
 
-const Notifications = async (directionApp, t, response) => {
+const Notifications = async (t, response) => {
     const {status, data} = response != undefined ? response : ""
     toast.dismiss();
     switch (status) {
         case 200:
-            SuccessNotification(directionApp, t, status);
+            SuccessNotification(t, status);
             break;
         case 400:
-            ErrorNotification(directionApp, t, status);
+            ErrorNotification(t, status);
             break;
         case 401:
-            ErrorNotification(directionApp, t, status);
+            ErrorNotification(t, status);
             break;
         case 403:
-            ErrorNotification(directionApp, t, status);
+            ErrorNotification(t, status);
             break;
         case 422:
-            ErrorNotification(directionApp, t, status, data.message);
+            ErrorNotification(t, status, data.message);
             break;
         case 500:
-            WarningNotification(directionApp, t, status);
+            WarningNotification(t, status);
             break;
         case 503:
-            WarningNotification(directionApp, t, status);
+            WarningNotification(t, status);
             break;
         case 504:
-            WarningNotification(directionApp, t, status);
+            WarningNotification(t, status);
             break;
         default:
             toast(t("pending"), {
-                position: directionApp === "ltr" ? "top-left" : "top-right",
                 autoClose: false,
                 closeOnClick: false,
                 draggable: false,
@@ -47,9 +46,9 @@ 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.
+** 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

@@ -0,0 +1,62 @@
+import ErrorNotification from "@/core/components/notifications/ErrorNotification";
+import WarningNotification from "@/core/components/notifications/WarningNotification";
+import {toast} from "react-toastify";
+
+export const errorSetting = (t, notification) => {
+    //todo
+}
+
+export const errorRequest = (t, notification) => {
+    //todo
+}
+
+export const errorResponse = (response, clearToken, t, notification) => {
+    toast.dismiss();
+    if (isServerError(response.status)) {
+        errorServer(response, t, notification)
+    } else if (isClientError(response.status)) {
+        errorClient(response, clearToken, t, notification)
+    }
+}
+
+const errorServer = (response, t, notification) => {
+    if (notification) WarningNotification(t, response.status);
+}
+const errorClient = (response, clearToken, t, notification) => {
+    switch (response.status) {
+        case 401:
+            clearToken()
+            if (notification) ErrorNotification(t, response.status)
+            break;
+        case 422:
+            if ('type' in response.data) {
+                errorLogic(response, t, notification)
+                break;
+            }
+            errorValidation(response, t, notification)
+            break;
+        case 429:
+            if (notification) ErrorNotification(t, response.status)
+            break
+        default:
+            if (notification) ErrorNotification(t, response.status)
+            break
+    }
+}
+
+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)
+}
+const errorValidation = (response, t, notification) => {
+    if (notification) {
+        const errorsMap = Object.keys(response.data.errors)
+        const errorsArray = response.data.errors
+
+        errorsMap.map((item, index) => {
+            ErrorNotification(t, response.status, errorsArray[item][0]);
+        })
+    }
+}

src/core/utils/succesHandler.js

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

src/core/utils/theme.jsx

@@ -15,6 +15,15 @@ const theme = {
             dark: colord(process.env.NEXT_PUBLIC_SECONDARY_MAIN).darken(0.1).toHex(),
         },
     },
+    components: {
+        MuiBackdrop: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: colord(process.env.NEXT_PUBLIC_PRIMARY_MAIN).darken(0.2).alpha(0.7).toHex(),
+                },
+            },
+        },
+    },
 };
 
 export default theme;