CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-31 15:11:53 +03:30
parent 73ca237817
commit cd90adee01
10 changed files with 59 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/core/components/notifications/ErrorNotification.jsx
View File

@@ -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(
() => (
<>

5
src/core/components/notifications/PendingNotification.jsx
View File

@@ -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,

4
src/core/components/notifications/SuccessNotification.jsx
View File

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

4
src/core/components/notifications/WarningNotification.jsx
View File

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

12
src/core/components/notifications/index.jsx
View File

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

48
src/core/utils/errorHandler.js
View File

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

7
src/core/utils/succesHandler.js
View File

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

11
src/lib/app/contexts/toast.jsx
View File

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

15
src/lib/app/hooks/useRequest.jsx
View File

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

7
src/lib/app/hooks/useToast.jsx
View File

@@ -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 {