diff --git a/src/core/components/notifications/ErrorNotification.jsx b/src/core/components/notifications/ErrorNotification.jsx index 2face73..27ae26e 100644 --- a/src/core/components/notifications/ErrorNotification.jsx +++ b/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) => { - toast( +const ErrorNotification = (notificationType, t, status, message) => { + const {pushToastList} = useToast(); + const toastId = toast( () => ( <> { draggable: false, } ); + pushToastList(notificationType, toastId); }; export default ErrorNotification; \ No newline at end of file diff --git a/src/core/components/notifications/PendingNotification.jsx b/src/core/components/notifications/PendingNotification.jsx index 1e482fd..fe0d47f 100644 --- a/src/core/components/notifications/PendingNotification.jsx +++ b/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 = (t) => { - toast(t("notifications.pending"), { +const PendingNotification = (notificationType, t) => { + const {pushToastList} = useToast(); + + const toastId = toast(t("notifications.pending"), { containerId: 'validation', autoClose: false, closeButton: false, closeOnClick: false, draggable: false, - }) + }); + pushToastList(notificationType, toastId); }; export default PendingNotification; \ No newline at end of file diff --git a/src/core/components/notifications/SuccessNotification.jsx b/src/core/components/notifications/SuccessNotification.jsx index 264d764..0ad83cd 100644 --- a/src/core/components/notifications/SuccessNotification.jsx +++ b/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) => { - toast( +const SuccessNotification = (notificationType, t, status) => { + const toastId = toast( () => ( <> { draggable: true, } ); + notification_type_id.success.push(toastId); }; export default SuccessNotification; \ No newline at end of file diff --git a/src/core/components/notifications/WarningNotification.jsx b/src/core/components/notifications/WarningNotification.jsx index 8d29dca..8284f7a 100644 --- a/src/core/components/notifications/WarningNotification.jsx +++ b/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) => { - toast( +const WarningNotification = (notificationType, t, status) => { + const toastId = toast( () => ( <> { draggable: false, } ); + notification_type_id.warning.push(toastId); }; export default WarningNotification; \ No newline at end of file diff --git a/src/core/components/notifications/index.jsx b/src/core/components/notifications/index.jsx index 4fe5473..8383009 100644 --- a/src/core/components/notifications/index.jsx +++ b/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 = { - pending: [], - error: [], - warning: [], - success: [] - } - - if (notificationType === "pending") { - pendingNotification(t); - } else if (notificationType === "warning") { - WarningNotification(t, status); - } else if (notificationType === "error") { - message ? ErrorNotification(t, status, message) : ErrorNotification(t, status); - } else if (notificationType === "success") { - SuccessNotification(t, status); + switch (notificationType) { + case "pending": + pendingNotification(notificationType, t); + break; + case "warning": + WarningNotification(notificationType, t, status); + break; + case "error": + if (message) { + ErrorNotification(notificationType, t, status, message) + } else { + ErrorNotification(notificationType, t, status) + } + break; + case "success": + SuccessNotification(notificationType, t, status); + break; } }; diff --git a/src/layouts/DashboardLayout.jsx b/src/layouts/DashboardLayout.jsx index 3c62a77..37554cd 100644 --- a/src/layouts/DashboardLayout.jsx +++ b/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 ( <> - + {/**/} ); }; diff --git a/src/lib/app/contexts/toast.jsx b/src/lib/app/contexts/toast.jsx new file mode 100644 index 0000000..e8c7bc6 --- /dev/null +++ b/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 ( + + {children} + + ); +}; diff --git a/src/lib/app/hooks/useRequest.jsx b/src/lib/app/hooks/useRequest.jsx index 8aa5730..a4c305b 100644 --- a/src/lib/app/hooks/useRequest.jsx +++ b/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 }) diff --git a/src/lib/app/hooks/useToast.jsx b/src/lib/app/hooks/useToast.jsx new file mode 100644 index 0000000..8cc7875 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 4cd2a1d..2d23745 100644 --- a/src/pages/_app.jsx +++ b/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 (<> - - - {pageProps.messages ? : ''} + + + {pageProps.messages ? : ''} - - - - - + + + + + + +