From 89c4e6d545371f043fb6c9ca709310de5c6da412 Mon Sep 17 00:00:00 2001 From: Mathias Wagner <germannewsmaker@gmail.com> Date: Fri, 2 Jun 2023 15:59:12 +0200 Subject: [PATCH] Created the ToastNotification.jsx --- .../ToastNotification/ToastNotification.jsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 client/src/common/contexts/ToastNotification/ToastNotification.jsx diff --git a/client/src/common/contexts/ToastNotification/ToastNotification.jsx b/client/src/common/contexts/ToastNotification/ToastNotification.jsx new file mode 100644 index 0000000..6e260e6 --- /dev/null +++ b/client/src/common/contexts/ToastNotification/ToastNotification.jsx @@ -0,0 +1,43 @@ +import React, {createContext, useRef, useState} from "react"; +import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import "./styles.sass"; + +export const ToastNotificationContext = createContext({}); + +export const ToastNotificationProvider = (props) => { + + const notificationRef = useRef(); + const [timeOutId, setTimeOutId] = useState(null); + const [toastNotification, setToastNotification] = useState(null); + + const updateToast = (text, color = "red", icon = faExclamationTriangle) => { + setToastNotification({text, color, icon}); + + if (timeOutId) { + clearTimeout(timeOutId); + setTimeOutId(null); + } + setTimeOutId(setTimeout(close, 5000)); + } + + const close = () => notificationRef.current.classList.add("toast-hidden"); + + const onAnimationEnd = (event) => { + if (event.animationName === "moveOut") setToastNotification(null); + } + + return ( + <ToastNotificationContext.Provider value={updateToast}> + <div className={"toast-notification" + (toastNotification ? "" : " toast-hidden") + " toast-" + toastNotification?.color} + onAnimationEnd={onAnimationEnd} ref={notificationRef} onClick={close}> + {toastNotification && <div className="toast-content"> + <FontAwesomeIcon icon={toastNotification.icon} /> + <h2>{toastNotification.text}</h2> + </div>} + </div> + + {props.children} + </ToastNotificationContext.Provider> + ); +} \ No newline at end of file