From 6133aca0ef3967c56c88d7f3e181724a28f28dd1 Mon Sep 17 00:00:00 2001
From: Justin Walrath <walrathjaw@gmail.com>
Date: Sat, 5 Feb 2022 00:37:58 -0500
Subject: [PATCH] Now scrolls the active card into view by default. Active
 means first unlocked card?

---
 src/views/BudgetCardView.jsx   |  9 ++++++++-
 src/views/BudgetPeriodCard.jsx | 15 +++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/views/BudgetCardView.jsx b/src/views/BudgetCardView.jsx
index 28e1f1e..80fcaec 100644
--- a/src/views/BudgetCardView.jsx
+++ b/src/views/BudgetCardView.jsx
@@ -2,9 +2,16 @@ import BudgetPeriodCard from "./BudgetPeriodCard";
 import './BudgetCardView.scss';
 
 const BudgetCardView = ({budgetPeriods}) => {
+    const activePeriod = budgetPeriods.find(p => !p.locked);
+
     return (
         <div className="budget-card-view-tray">
-            {budgetPeriods.map(p => { return (<BudgetPeriodCard key={p.id} periodData={p} />); })}
+            {budgetPeriods.map(p => {
+                
+                return (
+                    <BudgetPeriodCard key={p.id} periodData={p} isActive={p === activePeriod} />
+                );
+            })}
         </div>
     );
 };
diff --git a/src/views/BudgetPeriodCard.jsx b/src/views/BudgetPeriodCard.jsx
index 1d9dbfc..f76ed0d 100644
--- a/src/views/BudgetPeriodCard.jsx
+++ b/src/views/BudgetPeriodCard.jsx
@@ -1,11 +1,12 @@
-import { useState, useEffect } from 'react';
+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}) => {
-    const [bankBalance, setBankBalance] = useState(0),
+const BudgetPeriodCard = ({periodData, isActive}) => {
+    const cardRef = useRef(),
+        [bankBalance, setBankBalance] = useState(0),
         [projectedLeftover, setProjectedLeftover] = useState(0),
         [bills, setBills] = useState(periodData.bills),
         [paidBills, setPaidBills] = useState([]),
@@ -14,6 +15,12 @@ const BudgetPeriodCard = ({periodData}) => {
         [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]);
@@ -34,7 +41,7 @@ const BudgetPeriodCard = ({periodData}) => {
     }, [bankBalance, unpaidBills, unpaidIncomes]);
 
     return (
-        <div className='budget-period-card'>
+        <div ref={cardRef} className='budget-period-card'>
             <div className='card-header'>
                 <span className={'lock'}>
                     <img src={ periodData.locked ? Lock : OpenLock } alt="lock" />