budget-demo/src/views/BudgetPeriodCard.jsx

import { useState, useEffect, useRef } from 'react';
import BudgetPeriodTransTable from './BudgetPeriodTransTable';
import Lock from '../resources/Lock.svg';
import OpenLock from '../resources/OpenLock.svg';
import './BudgetPeriodCard.scss';

const BudgetPeriodCard = ({periodData, isActive}) => {
    const cardRef = useRef(),
        [bankBalance, setBankBalance] = useState(0),
        [projectedLeftover, setProjectedLeftover] = useState(0),
        [bills, setBills] = useState(periodData.bills),
        [paidBills, setPaidBills] = useState([]),
        [unpaidBills, setUnpaidBills] = useState([]),
        [incomes, setIncomes] = useState(periodData.income),
        [paidIncomes, setPaidIncomes] = useState([]),
        [unpaidIncomes, setUnpaidIncomes] = useState([]);

    useEffect(() => {
        if(isActive) {
            cardRef.current.scrollIntoView({inline: "start"});
            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(() => {
        setBankBalance(
            periodData.startingAmount - 
            paidBills.reduce((prev, bill) => { return prev + bill.amount; }, 0.0) + 
            paidIncomes.reduce((prev, income) => { return prev + income.amount; }, 0.0)
        );
    }, [paidBills, paidIncomes]);
    useEffect(() => {
        setProjectedLeftover(
            bankBalance - 
            unpaidBills.reduce((prev, bill) => { return prev + bill.amount; }, 0.0) + 
            unpaidIncomes.reduce((prev, income) => { return prev + income.amount; }, 0.0)
        );
    }, [bankBalance, unpaidBills, unpaidIncomes]);

    return (
        <div ref={cardRef} className='budget-period-card'>
            <div className='card-header'>
                <span className={'lock'}>
                    <img src={ periodData.locked ? Lock : OpenLock } alt="lock" />
                </span>
            </div>
            <div className='card-body'>
                <div className='dates'>
                    <span className='dates-start'>{periodData.startDate.toDateString().split(' ').slice(1).join(' ')}</span>
                    <span> - </span>
                    <span className='dates-end'>{ periodData.endDate.toDateString().split(' ').slice(1).join(' ')}</span> 
                </div>
                <div className='bank-current'>
                    <span className='bank-current-label'>Current Balance</span>
                    <span className='bank-current-value'>{ '$' + parseFloat(bankBalance).toFixed(2) }</span>
                </div>
                <div className='bank-projected'>
                    <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={'Paid'} transList={ paidBills } isBill />
                <BudgetPeriodTransTable title={'Income'} transList={ incomes } />
            </div>
        </div>
    );
};

export default BudgetPeriodCard;