improved re-render time when expanding month

app/ui/MonthLocationList.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import React from "react";
+import { AddLocationButton } from "./AddLocationButton";
+import { AddMonthButton } from "./AddMonthButton";
+import { MonthCard } from "./MonthCard";
+import Pagination from "./Pagination";
+import { LocationCard } from "./LocationCard";
+import { BillingLocation, YearMonth } from "../lib/db-types";
+import { useParams, useRouter } from "next/navigation";
+
+const getNextYearMonth = (yearMonth:YearMonth) => {
+    const {year, month} = yearMonth;
+    return({
+        year: month===12 ? year+1 : year,
+        month: month===12 ? 1 : month+1
+    } as YearMonth);
+}
+
+export interface MonthLocationListProps {
+    availableYears: number[];
+    months: {
+        [key: string]: {
+            yearMonth: YearMonth;
+            locations: BillingLocation[];
+            monthlyExpense: number;
+        };
+    };
+}
+
+export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
+    availableYears,
+    months,
+}) => {
+
+    const router = useRouter();
+    const params = useParams();
+
+    const { month: initialMonth } = params;
+    
+    const [expandedMonth, setExpandedMonth] = React.useState<number>(
+        initialMonth ? parseInt(initialMonth as string) : new Date().getMonth() + 1
+    );
+
+    const monthsArray = Object.entries(months);
+
+    // when the month is toggled, update the URL
+    // and set the the new expandedMonth
+    const handleMonthToggle = (yearMonth:YearMonth) => {
+        // if the month is already expanded, collapse it
+        if(expandedMonth === yearMonth.month) {
+            router.push(`/?year=${yearMonth.year}`);
+            setExpandedMonth(-1); // no month is expanded
+        } else  {
+            router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
+            setExpandedMonth(yearMonth.month);
+        }
+    }
+
+    return(<>
+            <AddMonthButton yearMonth={getNextYearMonth(monthsArray[0][1].locations[0].yearMonth)} />
+            {
+                monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => 
+                <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === expandedMonth } onToggle={handleMonthToggle} >
+                    {
+                        locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
+                    }
+                    {
+                        // show AddLocationButton as a last item in the first month
+                        monthIx === 0 ? <AddLocationButton yearMonth={yearMonth} /> : null
+                    }
+                </MonthCard>
+                )
+            }
+            <div className="mt-5 flex w-full justify-center">
+                <Pagination availableYears={availableYears} />
+            </div>
+
+        </>)
+}