DBC22-2599: cleanups, added fade animations

bcgov · Aug 27, 2024 · a1972d5 · a1972d5
1 parent a25bbb2
commit a1972d5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/src/frontend/src/App.js b/src/frontend/src/App.js
@@ -75,8 +75,6 @@ function App() {
       return;
     }
 
-    console.log(alertMessage);
-
     if (alertMessage) {
       // Clear existing close alert timers
       if (timeout.current) {
@@ -199,9 +197,7 @@ function App() {
 
               <Modal />
 
-              {alertMessage &&
-                <Alert alertMessage={alertMessage} closeAlert={() => setAlertMessage(null)} />
-              }
+              <Alert alertMessage={alertMessage} closeAlert={() => setAlertMessage(null)} />
             </div>
           </AlertContext.Provider>
         </CamsContext.Provider>

diff --git a/src/frontend/src/Components/shared/Alert.js b/src/frontend/src/Components/shared/Alert.js
@@ -1,5 +1,5 @@
 // React
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 // External imports
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -10,16 +10,32 @@ import Button from 'react-bootstrap/Button';
 import './Alert.scss';
 
 export default function Alert(props) {
+  /* Setup */
+  // Props
   const { alertMessage, closeAlert } = props;
 
-  console.log(alertMessage);
+  // States
+  const [visible, setVisible] = useState(false);
+  const [renderedAlertMessage, setRenderedAlertMessage] = useState(alertMessage);
+
+  // Effects
+  useEffect(() => {
+    // Do not update on closing
+    if (alertMessage) {
+      setVisible(true);
+      setRenderedAlertMessage(alertMessage);
+
+    } else {
+      setVisible(false);
+    }
+  }, [alertMessage]);
 
   /* Main rendering function */
-  return (
-    <div className="alert">
+  return renderedAlertMessage && (
+    <div className={`alert fade-out ${!visible ? 'hidden' : ''}`}>
       <div className="content">
         <div className="content__text">
-          {alertMessage}
+          {renderedAlertMessage}
         </div>
 
         <Button

diff --git a/src/frontend/src/Components/shared/Alert.scss b/src/frontend/src/Components/shared/Alert.scss
@@ -1,5 +1,14 @@
 @import "../../styles/variables.scss";
 
+.fade-out {
+  opacity: 1;
+  transition: opacity 0.5s ease-out;
+}
+
+.fade-out.hidden {
+  opacity: 0;
+}
+
 .alert {
   position: fixed;
   left: 50%;
@@ -42,7 +51,7 @@
 
     &__text {
       margin: 0;
-      
+
       p {
         font-size: 0.875rem;
         color: white;