client/src/base/App.jsx

@@ -1,4 +1,5 @@
 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';
@@ -8,7 +9,6 @@ const AppImpl = () => {
 
   useEffect(() => {
     context.api.getCurrentPeriod();
-    context.api.getAccounts();
   }, []);
 
   return (

client/src/data/context/BudgetContext.jsx

@@ -6,8 +6,7 @@ const BudgetContext = createContext();
 
 const BudgetState = (props) => {
     const initialState = {
-        budgetPeriods: [],
-        accounts: []
+        budgetPeriods: []
     },
     [state, dispatch] = useReducer(BudgetReducer, initialState),
     api = {
@@ -19,19 +18,9 @@ const BudgetState = (props) => {
                     crossorigin: true
                 }
             }).then(response => {
-                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 });
+                dispatch({ type: 'budget/populate', data: [{ ...response.data, id: response.data.id }] });
             });
+
         },
         updateBillPaid: (periodId, billId) => {
             dispatch({ type: 'budget/period/bills/update', data: { periodId, billId }});

client/src/data/context/BudgetReducer.js

@@ -15,12 +15,6 @@ 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, periodData.startingAmount]);
+    }, [paidBills, paidIncomes]);
     useEffect(() => {
         setProjectedLeftover(
             bankBalance - 

client/src/views/BudgetPeriodTransTable.jsx

@@ -1,43 +1,24 @@
-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 context = useContext(BudgetContext),
-        [tableData, setTableData] = useState([]),
-        columns = [
+    const columns = [
         'Description',
         'Amount',
         { 
             name: 'Actions',
             formatter: (cell, row) => {
-                    let buttonText = '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);
+                }, row.cells[2].data.paid ? 'Unpay' : 'Pay');
             }
         }
-        ];
-
-    useEffect(() => {
-        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]);
+    ],
+        toCurrency = (amount) => { return '$' + (isBill === true ? '-' : '') + amount; },
+        tableData = transList.map(t => { return [t.description, toCurrency(t.amount), t]});
 
     return (
         <div className='budget-period-trans-table'>