diff --git a/src/components/dashboard/edit-profile/index.jsx b/src/components/dashboard/edit-profile/index.jsx index e35e3bf..d15d467 100644 --- a/src/components/dashboard/edit-profile/index.jsx +++ b/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 axios.post(UPDATE_AVATAR, formData, { - headers: { - authorization: `Bearer ${token}`, - "Content-Type": "multipart/form-data", - }, - }); + await requestServer(UPDATE_AVATAR, 'post', {formData}).then((response) => { + }) + .catch(() => { + }).finally(() => { + }); } catch (error) { - Notifications(t, error.response); throw error; } }; @@ -99,11 +95,7 @@ const DashboardEditProfile = () => { margin="normal" size="small" disabled={true} - error={ - props.touched.username && props.errors.username - ? true - : false - } + error={!!(props.touched.username && props.errors.username)} helperText={ props.touched.username ? props.errors.username @@ -123,11 +115,7 @@ const DashboardEditProfile = () => { margin="normal" size="small" disabled={true} - error={ - props.touched.name && props.errors.name - ? true - : false - } + error={!!(props.touched.name && props.errors.name)} helperText={ props.touched.name ? props.errors.name : null } @@ -145,11 +133,7 @@ const DashboardEditProfile = () => { margin="normal" size="small" disabled={true} - error={ - props.touched.email && props.errors.email - ? true - : false - } + error={!!(props.touched.email && props.errors.email)} helperText={ props.touched.email ? props.errors.email : null } @@ -168,12 +152,7 @@ const DashboardEditProfile = () => { margin="normal" size="small" disabled={true} - error={ - props.touched.province_name && - props.errors.province_name - ? true - : false - } + error={!!(props.touched.province_name && props.errors.province_name)} helperText={ props.touched.province_name ? props.errors.province_name @@ -193,11 +172,7 @@ const DashboardEditProfile = () => { margin="normal" size="small" disabled={true} - error={ - props.touched.position && props.errors.position - ? true - : false - } + error={!!(props.touched.position && props.errors.position)} helperText={ props.touched.position ? props.errors.position diff --git a/src/core/components/notifications/ErrorNotification.jsx b/src/core/components/notifications/ErrorNotification.jsx index 05e2fb9..2face73 100644 --- a/src/core/components/notifications/ErrorNotification.jsx +++ b/src/core/components/notifications/ErrorNotification.jsx @@ -29,6 +29,7 @@ const ErrorNotification = (t, status, message) => { ), { + containerId: 'validation', autoClose: false, closeOnClick: false, draggable: false, diff --git a/src/core/components/notifications/PendingNotification.jsx b/src/core/components/notifications/PendingNotification.jsx index 6183f6b..1e482fd 100644 --- a/src/core/components/notifications/PendingNotification.jsx +++ b/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; \ No newline at end of file diff --git a/src/core/components/notifications/SuccessNotification.jsx b/src/core/components/notifications/SuccessNotification.jsx index 3507cef..264d764 100644 --- a/src/core/components/notifications/SuccessNotification.jsx +++ b/src/core/components/notifications/SuccessNotification.jsx @@ -30,6 +30,7 @@ const SuccessNotification = (t, status) => { ), { + containerId: 'validation', autoClose: 3000, hideProgressBar: true, pauseOnHover: true, diff --git a/src/core/components/notifications/UploadFileNotification.jsx b/src/core/components/notifications/UploadFileNotification.jsx index 89ebbb2..1c20ba3 100644 --- a/src/core/components/notifications/UploadFileNotification.jsx +++ b/src/core/components/notifications/UploadFileNotification.jsx @@ -26,6 +26,8 @@ const UploadFileNotification = (t) => { ), { + containerId: 'validation', + toastId: 'upload', autoClose: 3000, hideProgressBar: true, pauseOnHover: true, diff --git a/src/core/components/notifications/WarningNotification.jsx b/src/core/components/notifications/WarningNotification.jsx index 19d6a2f..8d29dca 100644 --- a/src/core/components/notifications/WarningNotification.jsx +++ b/src/core/components/notifications/WarningNotification.jsx @@ -30,6 +30,7 @@ const WarningNotification = (t, status) => { ), { + containerId: 'validation', autoClose: false, closeOnClick: false, draggable: false, diff --git a/src/core/components/notifications/index.jsx b/src/core/components/notifications/index.jsx index bc8eb66..4fe5473 100644 --- a/src/core/components/notifications/index.jsx +++ b/src/core/components/notifications/index.jsx @@ -1,54 +1,25 @@ -import {toast} from "react-toastify"; -import ErrorNotification from "./ErrorNotification"; -import WarningNotification from "./WarningNotification"; -import SuccessNotification from "./SuccessNotification"; +import pendingNotification from "@/core/components/notifications/PendingNotification"; +import WarningNotification from "@/core/components/notifications/WarningNotification"; +import ErrorNotification from "@/core/components/notifications/ErrorNotification"; +import SuccessNotification from "@/core/components/notifications/SuccessNotification"; -const Notifications = async (t, response) => { - const {status, data} = response != undefined ? response : "" - toast.dismiss(); - switch (status) { - case 200: - SuccessNotification(t, status); - break; - case 400: - ErrorNotification(t, status); - break; - case 401: - ErrorNotification(t, status); - break; - case 403: - ErrorNotification(t, status); - break; - 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; +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); } }; 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 -*/ diff --git a/src/core/utils/errorHandler.js b/src/core/utils/errorHandler.js index 8dbd364..3f1d341 100644 --- a/src/core/utils/errorHandler.js +++ b/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); }) } } \ No newline at end of file diff --git a/src/core/utils/succesHandler.js b/src/core/utils/succesHandler.js index a61ac85..f8bd707 100644 --- a/src/core/utils/succesHandler.js +++ b/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); } } \ No newline at end of file diff --git a/src/layouts/AppLayout.jsx b/src/layouts/AppLayout.jsx index 4fc5e1d..5bb1d23 100644 --- a/src/layouts/AppLayout.jsx +++ b/src/layouts/AppLayout.jsx @@ -41,16 +41,22 @@ function AppLayout({children, isBot}) { if (!languageIsReady) return; } - return (<> - - - - - {children} - ); + return ( + <> + + + + + {children} + + ); } export default AppLayout; diff --git a/src/lib/app/contexts/socket.jsx b/src/lib/app/contexts/socket.jsx index 47154c8..68826e1 100644 --- a/src/lib/app/contexts/socket.jsx +++ b/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: }) }, [connectionError]); - return {children} + return ( + + + {children} + + ) } \ No newline at end of file diff --git a/src/lib/app/hooks/useRequest.jsx b/src/lib/app/hooks/useRequest.jsx index d361e08..8aa5730 100644 --- a/src/lib/app/hooks/useRequest.jsx +++ b/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 })