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

CFE-6 debugging notifications

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-29 17:42:31 +03:30
parent ae5313ef2d
commit 3be39d451c
12 changed files with 89 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/dashboard/edit-profile/index.jsx
View File

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

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

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

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

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

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

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

2
src/core/components/notifications/UploadFileNotification.jsx
View File

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

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

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

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

@@ -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
*/

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

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

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

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

26
src/layouts/AppLayout.jsx
View File

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

15
src/lib/app/contexts/socket.jsx
View File

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

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

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