loan/user-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Notification(Error Handling)

Browse Source
This commit is contained in:
Mohammad Jalali
2023-07-13 10:31:10 +03:30
parent 73562dce3e
commit 3c0fab50c6
5 changed files with 191 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/first/index.jsx
View File

@@ -25,7 +25,7 @@ const FirstComponent = () => {
</Typography>
{isAuth ? (
<Button
variant="outlined"
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/dashboard",

55
src/core/components/Notification/ErrorNotification.jsx Normal file
View File

@@ -0,0 +1,55 @@
import DangerousIcon from "@mui/icons-material/Dangerous";
import { Box, Button, Divider, Typography } from "@mui/material";
import { toast } from "react-toastify";
import { useTranslations } from "next-intl";
const ErrorNotification = (directionApp, status, message) => {
const t = useTranslations();
toast(
({ closeToast }) => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{ display: "flex", alignItems: "center" }}>
<DangerousIcon color="error" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="error" variant="button">
{t("error")} ({t("code")}: {status})
</Typography>
<Typography variant="caption">
{message && t("error_static_text")}
</Typography>
</Box>
</Box>
</Box>
<Divider sx={{ my: 1 }} />
<Button
variant="contained"
size="small"
color="error"
sx={{ mr: 0.5 }}
onClick={closeToast}
>
{t("button_close")}
</Button>
<Button variant="contained" size="small" color="info">
{t("button_contact_us")}
</Button>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
}
);
};
export default ErrorNotification;

44
src/core/components/Notification/SuccessNotification.jsx Normal file
View File

@@ -0,0 +1,44 @@
import BeenhereIcon from "@mui/icons-material/Beenhere";
import { Box, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
import { toast } from "react-toastify";
const SuccessNotification = (directionApp, status) => {
const t = useTranslations();
toast(
() => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{ display: "flex", alignItems: "center" }}>
<BeenhereIcon color="success" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="success.main" variant="button">
{t("success")} ({t("code")}: {status})
</Typography>
<Typography variant="caption">
{t("success_static_text")}
</Typography>
</Box>
</Box>
</Box>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: 3000,
hideProgressBar: true,
pauseOnHover: true,
closeOnClick: false,
draggable: true,
}
);
};
export default SuccessNotification;

55
src/core/components/Notification/WarningNotification.jsx Normal file
View File

@@ -0,0 +1,55 @@
import ReportIcon from "@mui/icons-material/Report";
import { Box, Button, Divider, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
import { toast } from "react-toastify";
const WarningNotification = (directionApp, status) => {
const t = useTranslations();
toast(
({ closeToast }) => (
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "start",
}}
>
<Box sx={{ display: "flex", alignItems: "center" }}>
<ReportIcon color="warning" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="warning.main" variant="button">
{t("warning")} ({t("code")}: {status})
</Typography>
<Typography variant="caption">
{t("warning_static_text")}
</Typography>
</Box>
</Box>
</Box>
<Divider sx={{ my: 1 }} />
<Button
variant="contained"
size="small"
color="warning"
sx={{ mr: 0.5 }}
onClick={closeToast}
>
{t("button_close")}
</Button>
<Button variant="contained" size="small" color="info">
{t("button_contact_us")}
</Button>
</>
),
{
position: directionApp === "ltr" ? "top-left" : "top-right",
autoClose: false,
closeOnClick: false,
draggable: false,
}
);
};
export default WarningNotification;

36
src/core/components/Notification/index.jsx Normal file
View File

@@ -0,0 +1,36 @@
import { toast } from "react-toastify";
import ErrorNotification from "./ErrorNotification";
import SuccessNotification from "./successNotification";
import WarningNotification from "./warningNotification";
const Notifications = (directionApp, response) => {
toast.dismiss();
switch (response.status) {
case 200:
SuccessNotification(directionApp, response.status);
break;
case 400:
ErrorNotification(directionApp, response.status);
break;
case 401:
ErrorNotification(directionApp, response.status);
break;
case 403:
ErrorNotification(directionApp, response.status);
break;
case 422:
ErrorNotification(directionApp, response.status, response.data.message);
break;
case 500:
WarningNotification(directionApp, response.status);
break;
case 503:
WarningNotification(directionApp, response.status);
break;
case 504:
WarningNotification(directionApp, response.status);
break;
}
};
export default Notifications;