client/src/base/App.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useContext } from 'react';
-import mockedData from '../mocked/MockedData';
 import BudgetCardView from '../views/BudgetCardView';
 import { BudgetContext, BudgetState } from '../data/context/BudgetContext';
 import './App.css';
@@ -9,6 +8,7 @@ const AppImpl = () => {
 
   useEffect(() => {
     context.api.getCurrentPeriod();
+    context.api.getAccounts();
   }, []);
 
   return (

client/src/data/context/BudgetContext.jsx

@@ -6,7 +6,8 @@ const BudgetContext = createContext();
 
 const BudgetState = (props) => {
     const initialState = {
-        budgetPeriods: []
+        budgetPeriods: [],
+        accounts: []
     },
     [state, dispatch] = useReducer(BudgetReducer, initialState),
     api = {
@@ -18,9 +19,19 @@ const BudgetState = (props) => {
                     crossorigin: true
                 }
             }).then(response => {
-                dispatch({ type: 'budget/populate', data: [{ ...response.data, id: response.data.id }] });
+                dispatch({ type: 'budget/populate', data: [response.data] });
+            });
+        },
+        getAccounts: () => {
+            axios.get('http://localhost:3001/jules/accounts', {
+                headers: {
+                    'Access-Control-Allow-Origin': '*',
+                    'Access-Control-Allow-Methods': 'GET',
+                    crossorigin: true
+                }
+            }).then(response => {
+                dispatch({ type: 'accounts/populate', data: response.data });
             });
-
         },
         updateBillPaid: (periodId, billId) => {
             dispatch({ type: 'budget/period/bills/update', data: { periodId, billId }});

client/src/data/context/BudgetReducer.js

@@ -15,6 +15,12 @@ const BudgetReducer = (state, action) => {
             }))
         };
     }
+    if (action.type === 'accounts/populate') {
+        return {
+            ...state,
+            accounts: action.data
+        }
+    }
     return {...state };
 };
 

client/src/views/BudgetPeriodCard.jsx

@@ -25,7 +25,7 @@ const BudgetPeriodCard = ({periodData, isActive}) => {
             cardRef.current.scrollIntoView({inline: "start"});
             cardRef.current.parentElement.scrollBy(-40, 0);
         }
-    }, []);
+    }, [isActive]);
     useEffect(() => { setPaidIncomes(incomes.filter((income) => income.paid)); }, [incomes]);
     useEffect(() => { setUnpaidIncomes(incomes.filter((income) => !income.paid)); }, [incomes]);
     useEffect(() => {
@@ -34,7 +34,7 @@ const BudgetPeriodCard = ({periodData, isActive}) => {
             paidBills.reduce((prev, bill) => { return prev + bill.amount; }, 0.0) + 
             paidIncomes.reduce((prev, income) => { return prev + income.amount; }, 0.0)
         );
-    }, [paidBills, paidIncomes]);
+    }, [paidBills, paidIncomes, periodData.startingAmount]);
     useEffect(() => {
         setProjectedLeftover(
             bankBalance - 

client/src/views/BudgetPeriodTransTable.jsx

@@ -1,24 +1,43 @@
+import { useState, useEffect, useContext } from 'react';
 import { Grid } from 'gridjs-react';
 import { h } from 'gridjs';
+import { BudgetContext } from '../data/context/BudgetContext';
 import './BudgetPeriodTransTable.scss';
 import '../../node_modules/gridjs/dist/theme/mermaid.css'
 
 const BudgetPeriodTransTable = ({title, transList, isBill, actionHandler}) => {
-    const columns = [
+    const context = useContext(BudgetContext),
-        'Description',
+        [tableData, setTableData] = useState([]),
-        'Amount',
+        columns = [
-        { 
+            'Description',
-            name: 'Actions',
+            'Amount',
-            formatter: (cell, row) => {
+            {
-                return h('button', {
+                name: 'Actions',
-                    className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
+                formatter: (cell, row) => {
-                    onClick: () => actionHandler(row)
+                    let buttonText = 'Pay';
-                }, row.cells[2].data.paid ? 'Unpay' : 'Pay');
+
+                    if (row.cells[2].data.postingDate != null) {
+                        buttonText = row.cells[2].data.isIncome ? 'Paid' : 'Unpay';
+                    }
+
+                    return h('button', {
+                        className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
+                        onClick: () => actionHandler(row)
+                    }, buttonText);
+                }
             }
-        }
+        ];
-    ],
+
-        toCurrency = (amount) => { return '$' + (isBill === true ? '-' : '') + amount; },
+    useEffect(() => {
-        tableData = transList.map(t => { return [t.description, toCurrency(t.amount), t]});
+        const toCurrency = (amount) => { return '$' + (isBill === true ? '-' : '') + amount; },
+            lookupAccountName = (accountId) => {
+                return context.accounts.find((a) => a._id === accountId)?.name ?? '';
+            };
+
+        setTableData(transList.map(t => {
+            return [lookupAccountName(t.account), toCurrency(t.amount), t]
+        }));
+    }, [context.accounts, transList, isBill]);
 
     return (
         <div className='budget-period-trans-table'>