cancel toast removal on click

jwkaterina · Mar 4, 2024 · 4244ae3 · 4244ae3
1 parent 1c394b4
commit 4244ae3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/src/app/components/analysis_cards/alanysis_card.module.css b/src/app/components/analysis_cards/alanysis_card.module.css
@@ -51,6 +51,7 @@
     cursor: pointer;
     height: 2.4rem;
     text-indent: 15px;
+    line-height: 2.4rem;
 }
 
 .form select, .form .long_input {

diff --git a/src/app/components/utilities/toast/toast.tsx b/src/app/components/utilities/toast/toast.tsx
@@ -7,9 +7,10 @@ import styles from './toast.module.css';
 
 const Toast = () => {
 
-    const { message, status } = useContext(StatusContext);
+    const { message, setMessage, status } = useContext(StatusContext);
     const [open, setOpen] = useState(false);
     const [openTimeout, setOpenTimeout] = useState<NodeJS.Timeout | null>(null);
+    const [messageTimeout, setMessageTimeout] = useState<NodeJS.Timeout | null>(null);
     const progressRef = useRef<HTMLDivElement>(null);
 
     const progress: Animation | undefined = progressRef.current?.animate([
@@ -20,33 +21,32 @@ const Toast = () => {
         fill: 'forwards'
     });
 
-    useEffect(() => {
-        const removeMessage = () => {
-            setOpen(false);
-        };
-        document.addEventListener("click", removeMessage);
-	}, []);
-
     useEffect(() => {
         clearTimeout(openTimeout!);
+        clearTimeout(messageTimeout!);
         progress?.cancel();
 
         if (message) {
             setTimeout(() => {
                 setOpen(true);
                 progress?.play();
             }, 100);
-            if(status == StatusType.SUCCESS) {
-                const openTimeout = setTimeout(() => {
-                    setOpen(false);
-                }, 4000);
-                setOpenTimeout(openTimeout);
-            }
+            const openTimeout = setTimeout(() => {
+                setOpen(false);
+            }, 4000);
+            setOpenTimeout(openTimeout);
+            const messageTimeout = setTimeout(() => {
+                setMessage(null);
+            }, 4500);
+            setMessageTimeout(messageTimeout);
         }
     }, [message, status]);
 
     const onClose = () => {
         setOpen(false);
+        setTimeout(() => {
+            setMessage(null);
+        }, 500);
     }
 
     return (
@@ -62,7 +62,7 @@ const Toast = () => {
                 </div>
             </div>
             <FontAwesomeIcon icon={faXmark} className={styles.close} onClick={onClose}/>
-            {status == StatusType.SUCCESS && <div ref={progressRef} className={styles.progress}></div>}
+            <div ref={progressRef} className={styles.progress}></div>
         </div>
     );
 }