[#1] Stubbed out a functional context to begin prototyping

package-lock.json

@@ -14,6 +14,7 @@
         "bootstrap": "^5.1.3",
         "gridjs": "^5.0.2",
         "gridjs-react": "^5.0.2",
+        "lodash": "^4.17.21",
         "react": "^17.0.2",
         "react-bootstrap": "^2.1.2",
         "react-dom": "^17.0.2",

package.json

@@ -9,6 +9,7 @@
     "bootstrap": "^5.1.3",
     "gridjs": "^5.0.2",
     "gridjs-react": "^5.0.2",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",

src/base/App.jsx

@@ -1,10 +1,26 @@
+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';
 
-function App() {
+const AppImpl = () => {
+  const context = useContext(BudgetContext);
+
+  useEffect(() => {
+    context.api.loadData(mockedData.budgetPeriods);
+  }, []);
+
   return (
-    <BudgetCardView budgetPeriods={mockedData.ranges} />
+    <BudgetCardView />
+  );
+};
+
+const App = (props) => {
+  return (
+    <BudgetState>
+      <AppImpl {...props}/>
+    </BudgetState>
   );
 }
 

src/data/context/BudgetContext.jsx

@@ -0,0 +1,27 @@
+import { useReducer, createContext } from 'react';
+import BudgetReducer from './BudgetReducer';
+
+const BudgetContext = createContext();
+
+const BudgetState = (props) => {
+    const initialState = {
+        budgetPeriods: []
+    },
+    [state, dispatch] = useReducer(BudgetReducer, initialState),
+    api = {
+        loadData: (data) => {
+            dispatch({ type: 'budget/populate', data });
+        },
+        updateBillPaid: (periodId, billId) => {
+            dispatch({ type: 'budget/period/bills/update', data: { periodId, billId }});
+        }
+    };
+
+    return (
+        <BudgetContext.Provider value={{...state, api}}>
+            {props.children}
+        </BudgetContext.Provider>
+    );
+};
+
+export { BudgetState, BudgetContext };

src/data/context/BudgetReducer.js

@@ -0,0 +1,21 @@
+const BudgetReducer = (state, action) => {
+    if (action.type === 'budget/populate') {
+        return {
+            ...state,
+            budgetPeriods: action.data
+        };
+    }
+    if (action.type === 'budget/period/bills/update') {
+        return {
+            ...state,
+            budgetPeriods: state.budgetPeriods.map(bp => ({...bp,
+                bills: bp.bills.map(b => ({...b,
+                    paid: (bp.id === action.data.periodId && b.id === action.data.billId) ? !b.paid : b.paid
+                }))
+            }))
+        };
+    }
+    return {...state };
+};
+
+export default BudgetReducer;

src/index.jsx

@@ -8,4 +8,4 @@ ReactDOM.render(
     <App />
   </React.StrictMode>,
   document.getElementById('root')
-);
+);

src/mocked/MockedData.js

@@ -1,26 +1,30 @@
 const mockedData = {
-    ranges: [{
+    budgetPeriods: [{
             id: 1,
             locked: true,
             startDate: new Date('1-7-2022 0:0:0'),
             endDate: new Date('1-20-2022 23:59:59'),
             startingAmount: 0.00,
             bills: [{
+                    id: 1,
                     description: 'Amazon purchase',
                     amount: 46.00,
                     paid: false
                 },
                 {
+                    id: 2,
                     description: 'Bill 1',
                     amount: 40.00,
                     paid: true
                 },
                 {
+                    id: 3,
                     description: 'Bill 2',
                     amount: 50.00,
                     paid: true
                 },
                 {
+                    id: 4,
                     description: 'Bill 3',
                     amount: 30.00,
                     paid: true
@@ -39,21 +43,25 @@ const mockedData = {
             endDate: new Date('2-3-2022 23:59:59'),
             startingAmount: 0.00,
             bills: [{
+                    id: 5,
                     description: 'Amazon purchase',
                     amount: 46.00,
                     paid: false
                 },
                 {
+                    id: 6,
                     description: 'Bill 1',
                     amount: 40.00,
                     paid: true
                 },
                 {
+                    id: 7,
                     description: 'Bill 2',
                     amount: 50.00,
                     paid: true
                 },
                 {
+                    id: 8,
                     description: 'Bill 3',
                     amount: 30.00,
                     paid: true
@@ -72,21 +80,25 @@ const mockedData = {
             endDate: new Date('2-17-2022 23:59:59'),
             startingAmount: 0.00,
             bills: [{
+                    id: 9,
                     description: 'Amazon purchase',
                     amount: 46.00,
                     paid: false
                 },
                 {
+                    id: 10,
                     description: 'Bill 1',
                     amount: 40.00,
                     paid: true
                 },
                 {
+                    id: 11,
                     description: 'Bill 2',
                     amount: 50.00,
                     paid: true
                 },
                 {
+                    id: 12,
                     description: 'Bill 3',
                     amount: 30.00,
                     paid: true
@@ -105,21 +117,25 @@ const mockedData = {
             endDate: new Date('3-3-2022 23:59:59'),
             startingAmount: 0.00,
             bills: [{
+                    id: 13,
                     description: 'Amazon purchase',
                     amount: 46.00,
                     paid: false
                 },
                 {
+                    id: 14,
                     description: 'Bill 1',
                     amount: 40.00,
                     paid: true
                 },
                 {
+                    id: 15,
                     description: 'Bill 2',
                     amount: 50.00,
                     paid: true
                 },
                 {
+                    id: 16,
                     description: 'Bill 3',
                     amount: 30.00,
                     paid: true
@@ -138,21 +154,25 @@ const mockedData = {
             endDate: new Date('3-17-2022 23:59:59'),
             startingAmount: 0.00,
             bills: [{
+                    id: 17,
                     description: 'Amazon purchase',
                     amount: 46.00,
                     paid: false
                 },
                 {
+                    id: 18,
                     description: 'Bill 1',
                     amount: 40.00,
                     paid: true
                 },
                 {
+                    id: 19,
                     description: 'Bill 2',
                     amount: 50.00,
                     paid: true
                 },
                 {
+                    id: 20,
                     description: 'Bill 3',
                     amount: 30.00,
                     paid: true

src/views/BudgetCardView.jsx

@@ -1,13 +1,16 @@
-import BudgetPeriodCard from "./BudgetPeriodCard";
+import _ from 'lodash';
+import BudgetPeriodCard from './BudgetPeriodCard';
+import { BudgetContext } from '../data/context/BudgetContext'
+import { useContext } from 'react';
 import './BudgetCardView.scss';
 
-const BudgetCardView = ({budgetPeriods}) => {
+const BudgetCardView = () => {
-    const activePeriod = budgetPeriods.find(p => !p.locked);
+    const context = useContext(BudgetContext),
+        activePeriod = context?.budgetPeriods?.find?.(p => !p.locked);
 
     return (
         <div className="budget-card-view-tray">
-            {budgetPeriods.map(p => {
+            {context?.budgetPeriods?.map?.(p => {
-                
                 return (
                     <BudgetPeriodCard key={p.id} periodData={p} isActive={p === activePeriod} />
                 );

src/views/BudgetPeriodCard.jsx

@@ -1,19 +1,24 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useContext } from 'react';
 import BudgetPeriodTransTable from './BudgetPeriodTransTable';
 import Lock from '../resources/Lock.svg';
 import OpenLock from '../resources/OpenLock.svg';
 import './BudgetPeriodCard.scss';
+import { BudgetContext } from '../data/context/BudgetContext';
 
 const BudgetPeriodCard = ({periodData, isActive}) => {
     const cardRef = useRef(),
+        context = useContext(BudgetContext),
         [bankBalance, setBankBalance] = useState(0),
         [projectedLeftover, setProjectedLeftover] = useState(0),
-        [bills, setBills] = useState(periodData.bills),
+        paidBills = periodData.bills.filter((bill) => bill.paid),
-        [paidBills, setPaidBills] = useState([]),
+        unpaidBills = periodData.bills.filter((bill) => !bill.paid),
-        [unpaidBills, setUnpaidBills] = useState([]),
         [incomes, setIncomes] = useState(periodData.income),
         [paidIncomes, setPaidIncomes] = useState([]),
-        [unpaidIncomes, setUnpaidIncomes] = useState([]);
+        [unpaidIncomes, setUnpaidIncomes] = useState([]),
+        moveTransItemAction = (row) => {
+            const data = row.cells[2].data
+            context.api.updateBillPaid(periodData.id, data.id);
+        };
 
     useEffect(() => {
         if(isActive) {
@@ -21,8 +26,6 @@ const BudgetPeriodCard = ({periodData, isActive}) => {
             cardRef.current.parentElement.scrollBy(-40, 0);
         }
     }, []);
-    useEffect(() => { setPaidBills(bills.filter((bill) => bill.paid)); }, [bills]);
-    useEffect(() => { setUnpaidBills(bills.filter((bill) => !bill.paid)); }, [bills]);
     useEffect(() => { setPaidIncomes(incomes.filter((income) => income.paid)); }, [incomes]);
     useEffect(() => { setUnpaidIncomes(incomes.filter((income) => !income.paid)); }, [incomes]);
     useEffect(() => {
@@ -61,9 +64,9 @@ const BudgetPeriodCard = ({periodData, isActive}) => {
                     <span className='bank-projected-label'>Projected Leftover</span>
                     <span className='bank-projected-value'>{ '$' + parseFloat(projectedLeftover).toFixed(2) }</span>
                 </div>
-                <BudgetPeriodTransTable title={'Unpaid'} transList={ unpaidBills } isBill />
+                <BudgetPeriodTransTable title={'Unpaid'} transList={ unpaidBills } actionHandler={moveTransItemAction} isBill />
-                <BudgetPeriodTransTable title={'Paid'} transList={ paidBills } isBill />
+                <BudgetPeriodTransTable title={'Paid'} transList={ paidBills } actionHandler={moveTransItemAction} isBill  />
-                <BudgetPeriodTransTable title={'Income'} transList={ incomes } />
+                <BudgetPeriodTransTable title={'Income'} transList={ incomes } isPaid />
             </div>
         </div>
     );

src/views/BudgetPeriodCard.scss

@@ -3,7 +3,7 @@
     border-radius: 5px;
     border: 1px solid #ccc;
     margin: 1em;
-    width: 300px;
+    width: 400px;
     .card-header {
         height: 3em;
         background-color: #ccc;

src/views/BudgetPeriodTransTable.jsx

@@ -1,11 +1,24 @@
 import { Grid } from 'gridjs-react';
+import { h } from 'gridjs';
 import './BudgetPeriodTransTable.scss';
 import '../../node_modules/gridjs/dist/theme/mermaid.css'
 
-const BudgetPeriodTransTable = ({title, transList, isBill}) => {
+const BudgetPeriodTransTable = ({title, transList, isBill, actionHandler}) => {
-    const columns = ['Description', 'Amount'],
+    const columns = [
+        'Description',
+        'Amount',
+        { 
+            name: 'Actions',
+            formatter: (cell, row) => {
+                return h('button', {
+                    className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
+                    onClick: () => actionHandler(row)
+                }, row.cells[2].data.paid ? 'Unpay' : 'Pay');
+            }
+        }
+    ],
         toCurrency = (amount) => { return '$' + (isBill === true ? '-' : '') + amount; },
-        tableData = transList.map(t => { return [t.description, toCurrency(t.amount)]});
+        tableData = transList.map(t => { return [t.description, toCurrency(t.amount), t]});
 
     return (
         <div className='budget-period-trans-table'>