Merge pull request #83 from brianackley001/feature/82

Feature/82 (Auto-dismissible progress alerts) resolves #82
brianackley001 · Mar 28, 2024 · 65baa89 · 65baa89
2 parents 8f2bcde + 18a8f2f
commit 65baa89
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 129 deletions.
diff --git a/src/components/buttons/StoreRefreshButton.tsx b/src/components/buttons/StoreRefreshButton.tsx
@@ -1,5 +1,6 @@
 import { loginSync } from '@/utils/userStateUtils';
 import { useAppSelector, useAppDispatch } from "@/hooks/useStoreHooks";
+import { setAlertState } from "@store/alertSlice";
 import { selectAccessToken, selectUid} from "@store/msalSlice";
 import { selectTransactionPagination } from "@store/transactionSlice"; 
 import axiosInstance from "@utils/axiosInstance";
@@ -34,6 +35,21 @@ export const StoreRefreshButton = () => {
     .catch((error) => {
       console.error(error);
       logError(error);
+      dispatch(
+        setAlertState({
+          headerText: "There was an error refreshing your accounts.",
+          icon: {
+            iconType:'error', 
+            isVisible: true,
+            iconSize: '',
+            iconColor: 'white',
+          },
+          inProgress: false,
+          messageText: error.message,
+          showAlert: true,
+          variantStyle: "danger",
+        })
+      );
     });
 
   };

diff --git a/src/components/buttons/Test1.spec.tsx b/src/components/buttons/Test1.spec.tsx
diff --git a/src/components/buttons/Test1.tsx b/src/components/buttons/Test1.tsx
diff --git a/src/components/buttons/TestingButton.jsx b/src/components/buttons/TestingButton.jsx
diff --git a/src/components/notifications/progressAlert.tsx b/src/components/notifications/progressAlert.tsx
@@ -1,26 +1,56 @@
-import { Alert, Container, Navbar, Spinner } from 'react-bootstrap';
-import divWithClassName from 'react-bootstrap/esm/divWithClassName';
+import { useState, useEffect } from "react";
+import { Container, Spinner, Toast, ToastContainer } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCheckCircle, faTriangleExclamation, faRotate } from '@fortawesome/free-solid-svg-icons'
 import { useAppSelector, useAppDispatch } from "@hooks/useStoreHooks";
 import { selectHeaderText, selectIcon, selectInProgress, selectMessageText, selectShowAlert, selectVariantStyle, setShowAlert } from "@store/alertSlice"
 
+
 function AlertDismissible() {
-  const showComponent = useAppSelector(selectShowAlert);
   const dispatch = useAppDispatch();
   const headerText = useAppSelector(selectHeaderText);
-  const messageText = useAppSelector(selectMessageText);
   const icon = useAppSelector(selectIcon);
   const inProgress = useAppSelector(selectInProgress);
+  const messageText = useAppSelector(selectMessageText);
+  const showComponent = useAppSelector(selectShowAlert);
   const variantStyle = useAppSelector(selectVariantStyle);
-  const DivStyledAsH6 = divWithClassName('h6');
+  const [autoHide, setAutoHide] = useState(true);
+  const [toastTimeout, setToastTimeout] = useState(1000);
 
+  useEffect(() => {
+    if (variantStyle === "error") {
+      setToastTimeout(7000);
+      setAutoHide(true);
+    } else if (variantStyle === "info") {
+      setToastTimeout(960000);
+      setAutoHide(false);
+    } else if (variantStyle === "success") {
+      setToastTimeout(2500);
+      setAutoHide(true);
+    } else {
+      setToastTimeout(4000);
+      setAutoHide(true);
+    }
+  }, [autoHide, variantStyle]);
   return (
-    <>
-      <Container fluid>
-        <Navbar expand="lg" fixed="bottom">
-          <Alert show={showComponent} variant={variantStyle} dismissible onClose={() => dispatch(setShowAlert(false))} className='alertFooter me-auto my-2 my-lg-0 mb-3' >
-            <Alert.Heading as={DivStyledAsH6}>{headerText}</Alert.Heading>
+    <Container fluid>
+      <ToastContainer
+        className="p-3"
+        position="middle-center"
+        style={{ zIndex: 10 }}>
+        <Toast onClose={() => { dispatch(setShowAlert(false)) }}
+          show={showComponent}
+          delay={toastTimeout}
+          autohide={autoHide}
+          className="d-inline-block m-1 p-3"
+          style={{ zIndex: 1 }}
+          bg={variantStyle}>
+          <Toast.Header>
+            <strong className="me-auto">
+              {headerText}
+            </strong>
+          </Toast.Header>
+          <Toast.Body className={'text-white'}>
             {inProgress ? <Spinner animation="border" role="status" size="sm" /> : null}
             <p>
               <span className='iconStyle'>
@@ -30,11 +60,11 @@ function AlertDismissible() {
               </span>
               {messageText}
             </p>
-          </Alert>
-        </Navbar>
-      </Container>
-    </>
+          </Toast.Body>
+        </Toast>
+      </ToastContainer>
+    </Container>
   );
 }
 
-export default AlertDismissible;
+export default AlertDismissible;