add back toastify message box with 30 sec

src/App.js

@@ -4,7 +4,8 @@ import ThemeCustomization from 'themes';
 import ScrollTop from 'components/ScrollTop';
 import { PNSPS_THEME } from './themes/themeConst';
 import { ThemeProvider } from '@emotion/react';
-import GlobalNotificationModal from 'components/GlobalNotificationModal';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 //import {isUserLoggedIn} from 'utils/Utils';
 //import {DefaultRoute} from 'routes/index'
 // ==============================|| APP - THEME, ROUTER, LOCAL  ||============================== //
@@ -15,8 +16,8 @@ const App = () => (
             <ScrollTop>
                 <Routes />
             </ScrollTop>
-            <GlobalNotificationModal />
         </ThemeProvider>
+        <ToastContainer />
     </ThemeCustomization>
 );
 

src/components/GlobalNotificationModal.js

@@ -1,71 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogActions from '@mui/material/DialogActions';
-import { Button } from '@mui/material';
-import { useIntl } from 'react-intl';
-
-const EVENT_NAME = 'pnsps-notification';
-
-const typeToTitleId = {
-    success: 'success',
-    error: 'error',
-    warning: 'warning'
-};
-
-export default function GlobalNotificationModal() {
-    const intl = useIntl();
-    const [open, setOpen] = useState(false);
-    const [message, setMessage] = useState('');
-    const [type, setType] = useState('success');
-
-    useEffect(() => {
-        const handler = (event) => {
-            const { type: incomingType, message: incomingMessage } = event.detail || {};
-            if (!incomingMessage) return;
-            setType(incomingType || 'success');
-            setMessage(incomingMessage);
-            setOpen(true);
-        };
-
-        window.addEventListener(EVENT_NAME, handler);
-        return () => {
-            window.removeEventListener(EVENT_NAME, handler);
-        };
-    }, []);
-
-    const handleClose = () => {
-        setOpen(false);
-    };
-
-    return (
-        <Dialog
-            open={open}
-            fullWidth
-            maxWidth="sm"
-            onClose={handleClose}
-            aria-labelledby="global-notification-title"
-            aria-describedby="global-notification-description"
-        >
-            <DialogTitle id="global-notification-title">
-                {intl.formatMessage({ id: typeToTitleId[type] || typeToTitleId.success })}
-            </DialogTitle>
-            <DialogContent>
-                <DialogContentText
-                    id="global-notification-description"
-                    sx={{ color: 'black' }}
-                >
-                    {message}
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={handleClose} autoFocus>
-                    {intl.formatMessage({ id: 'close' })}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}
-

src/utils/CommonFunction.js

@@ -1,4 +1,4 @@
-// import {toast} from "react-toastify";
+import { toast } from "react-toastify";
 import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
@@ -82,71 +82,69 @@ export function getDateString(queryDateArray) {
     )
 }
 
-const NOTIFICATION_EVENT_NAME = "pnsps-notification";
-
-const dispatchNotification = (type, message) => {
-    window.dispatchEvent(
-        new CustomEvent(NOTIFICATION_EVENT_NAME, {
-            detail: {
-                type,
-                message
-            }
-        })
-    );
+const manualCloseToastOptions = {
+    position: "bottom-right",
+    autoClose: 30000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+    theme: "light",
 };
 
 export const notifySaveSuccess = () => {
     const userType = JSON.parse(localStorage.getItem("userData")).type;
     const msg = userType === "GLD" ? "Save success!" : "儲存成功!";
-    dispatchNotification("success", msg);
+    toast.success(msg, manualCloseToastOptions);
 };
 
 export const notifyCreateSuccess = () => {
     const userType = JSON.parse(localStorage.getItem("userData")).type;
     const msg = userType === "GLD" ? "Create success!" : "創建成功!";
-    dispatchNotification("success", msg);
+    toast.success(msg, manualCloseToastOptions);
 };
 
 export const notifyVerifySuccess = () => {
     const userType = JSON.parse(localStorage.getItem("userData")).type;
     const msg = userType === "GLD" ? "Verify success!" : "驗證成功!";
-    dispatchNotification("success", msg);
+    toast.success(msg, manualCloseToastOptions);
 };
 
 export const notifyDeleteSuccess = () => {
     const userType = JSON.parse(localStorage.getItem("userData")).type;
     const msg = userType === "GLD" ? "Delete success!" : "刪除成功!";
-    dispatchNotification("success", msg);
+    toast.success(msg, manualCloseToastOptions);
 };
 
 export const notifyLockSuccess = () => {
-    dispatchNotification("success", "Lock success!");
+    toast.success("Lock success!", manualCloseToastOptions);
 };
 
 export const notifyUnlockSuccess = () => {
-    dispatchNotification("success", "Unlock success!");
+    toast.success("Unlock success!", manualCloseToastOptions);
 };
 
 export const notifyActiveSuccess = () => {
-    dispatchNotification("success", "Active success!");
+    toast.success("Active success!", manualCloseToastOptions);
 };
 
 export const notifyDownloadSuccess = () => {
     const userType = JSON.parse(localStorage.getItem("userData")).type;
     const msg = userType === "GLD" ? "Download success!" : "下載成功!";
-    dispatchNotification("success", msg);
+    toast.success(msg, manualCloseToastOptions);
 };
 
 export const notifyActionSuccess = (actionMsg) => {
-    dispatchNotification("success", actionMsg ?? "Success");
+    toast.success(actionMsg ?? "Success", manualCloseToastOptions);
 };
 
 export const notifyActionError = (actionMsg) => {
-    dispatchNotification("error", `${actionMsg}`);
+    toast.error(`${actionMsg}`, manualCloseToastOptions);
 };
 
 export const notifyActionWarning = (actionMsg) => {
-    dispatchNotification("warning", `${actionMsg}`);
+    toast.warn(`${actionMsg}`, manualCloseToastOptions);
 }
 
 export function prettyJson(json) {