[Refactor] Move to src-ui/views and src-ui/logics structure.

src-ui/views/app/others/snackbar_controller/SnackbarController.jsx

@@ -0,0 +1,115 @@
+import React, { useEffect, useState, isValidElement } from "react";
+import { ToastContainer, toast, cssTransition } from "react-toastify";
+import clsx from "clsx";
+
+import "./ReactToastifyOverrideClass.scss";
+import styles from "./SnackbarController.module.scss";
+
+import XMarkSvg from "@images/cancel.svg?react";
+import WarningSvg from "@images/warning.svg?react";
+import MegaphoneSvg from "@images/megaphone.svg?react";
+import CheckMarkSvg from "@images/check_mark.svg?react";
+import ErrorSvg from "@images/error.svg?react";
+
+import { useNotificationStatus } from "@logics_common";
+
+const CustomTransition = cssTransition({
+    enter: "fade_in",
+    exit: "fade_out",
+    collapse: false,
+});
+
+
+export const SnackbarController = () => {
+    const { currentNotificationStatus, closeNotification } = useNotificationStatus();
+    const [containerKey, setContainerKey] = useState(0);
+
+    const settings = currentNotificationStatus.data;
+
+    const snackbar_classname = clsx(
+        styles.snackbar_content,
+        {
+            [styles.is_success]: settings.status === "success",
+            [styles.is_warning]: settings.status === "warning",
+            [styles.is_error]:   settings.status === "error",
+        }
+    );
+
+    let hide_duration = 5000;
+    if (settings.options?.hide_duration === null) {
+        hide_duration = false;
+    } else if (Number(settings.options?.hide_duration)) {
+        hide_duration = Number(settings.options?.hide_duration);
+    }
+
+
+    useEffect(() => {
+        if (!settings.is_open) return;
+
+        const message_text = settings.message;
+        const category_id = settings.category_id ? settings.category_id : message_text;
+
+        const to_hide_progress_bar = (settings.options?.to_hide_progress_bar === true) ? true : false;
+
+        const asyncShowNotification = async () => {
+            setTimeout(() => {
+                toast(message_text, {
+                    toastId: category_id,
+                    type: settings.status,
+                    autoClose: hide_duration,
+                    transition: CustomTransition,
+                    toastClassName: snackbar_classname,
+                    hideProgressBar: to_hide_progress_bar,
+                    progressClassName: styles.toast_progress,
+                    closeButton: <CloseButtonContainer />,
+                    onClose: () => {
+                        closeNotification();
+                    },
+                });
+            }, 100);
+        };
+
+        // setContainerKey(prevKey => prevKey + 1);
+        asyncShowNotification();
+
+    }, [settings]);
+
+    return (
+        <ToastContainer
+            // key={containerKey}
+            position="bottom-left"
+            transition={CustomTransition}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick={false}
+            pauseOnFocusLoss={false}
+            draggable={false}
+            pauseOnHover={true}
+            theme="dark"
+            icon={({ type }) => {
+                switch (type) {
+                    case "info":
+                        return <MegaphoneSvg className={styles.megaphone_svg} />;
+                    case "error":
+                        return <ErrorSvg className={styles.error_svg} />;
+                    case "success":
+                        return <CheckMarkSvg className={styles.check_mark_svg} />;
+                    case "warning":
+                        return <WarningSvg className={styles.warning_svg} />;
+                    default:
+                        return null;
+                }
+            }}
+        />
+    );
+};
+
+const CloseButtonContainer = ({ closeToast }) => {
+    return (
+        <button className={styles.close_button_wrapper} onClick={closeToast}>
+            <div className={styles.close_button}>
+                <XMarkSvg className={styles.x_mark_svg} />
+            </div>
+        </button>
+    );
+};