New: Show badge of number of created txns

brafdlog · Nov 21, 2022 · 88be256 · 88be256
1 parent 1e35bf7
commit 88be256
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/ui-react/src/Store.tsx b/ui-react/src/Store.tsx
@@ -106,7 +106,7 @@ export default class Store {
         }
         const accountScrapingData = this.accountScrapingData.get(accountId);
         if (accountScrapingData) {
-          accountScrapingData.logs.push({message: budgetTrackingEvent.message});
+          accountScrapingData.logs.push({message: budgetTrackingEvent.message, originalEvent: budgetTrackingEvent});
           accountScrapingData.status = budgetTrackingEvent.accountStatus;
         }
       }

diff --git a/ui-react/src/components/accounts/Account.module.css b/ui-react/src/components/accounts/Account.module.css
@@ -37,3 +37,7 @@
     height: 18px;
     width: 18px;
 }
+
+.newTxnsIndicator {
+    margin-right: 8px;
+}
diff --git a/ui-react/src/components/accounts/Account.tsx b/ui-react/src/components/accounts/Account.tsx
@@ -1,3 +1,4 @@
+import Badge from 'react-bootstrap/Badge';
 import styles from './Account.module.css';
 import { Account as AccountType } from '../../types';
 import StatusIndicator from './StatusIndicator';
@@ -17,6 +18,8 @@ export default function Account({
   account, actionButtons
 }: AccountProps) {
   const containerStyles = [styles.container];
+
+  const badgeNumberLog = account.logs.find(log => log.originalEvent && log.originalEvent.exportedTransactionsNum > 0);
   if (!account.active) containerStyles.push(styles.notActive);
   return (
     <div className={containerStyles.join(' ')}>
@@ -28,6 +31,7 @@ export default function Account({
             <img className={styles.logsButton} src={icon} alt="action" onClick={clickHandler} key={icon} />)
         }
       <StatusIndicator status={account.status} />
+        { badgeNumberLog && <Badge className={styles.newTxnsIndicator} bg={'success'}>{badgeNumberLog.originalEvent.exportedTransactionsNum}</Badge>}
     </div>
   );
 }
diff --git a/ui-react/src/types.tsx b/ui-react/src/types.tsx
@@ -118,6 +118,7 @@ export type BudgetTrackingEvent = {
 
 export interface Log {
   message: string;
+  originalEvent?: BudgetTrackingEvent
 }
 
 export interface Account {