improved re-render time when expanding month

app/page.tsx

@@ -1,22 +1,12 @@
-import { LocationCard } from './ui/LocationCard';
-import { AddMonthButton } from './ui/AddMonthButton';
 import { AddLocationButton } from './ui/AddLocationButton';
 import { PageFooter } from './ui/PageFooter';
 import { fetchAllLocations } from './lib/actions/locationActions';
 import { fetchAvailableYears } from './lib/actions/monthActions';
 import { BillingLocation, YearMonth } from './lib/db-types';
 import { FC } from 'react';
-import Pagination from './ui/Pagination';
 import { Main } from './ui/Main';
 import { MonthCard } from './ui/MonthCard';
-
+import { MonthLocationList } from './ui/MonthLocationList';
-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 PageProps {
   searchParams?: {
@@ -57,7 +47,6 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
   }
 
   const currentYear = Number(searchParams?.year) || availableYears[0];
-  const currentMonth = Number(searchParams?.month);
   
   const locations = await fetchAllLocations(currentYear);
 
@@ -95,23 +84,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
 
  return (
     <Main>
-        <AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
+        <MonthLocationList availableYears={availableYears} months={months} />
-        {
-          Object.entries(months).map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => 
-            <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === currentMonth } >
-              {
-                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>
     </Main>
   );
 }

app/ui/MonthCard.tsx

@@ -4,23 +4,23 @@ import { FC, useEffect, useRef } from "react";
 import { formatYearMonth } from "../lib/format";
 import { YearMonth } from "../lib/db-types";
 import { formatCurrency } from "../lib/formatStrings";
-import { useRouter } from "next/navigation";
+
 
 export interface MonthCardProps {
     yearMonth: YearMonth,
     children?: React.ReactNode,
     monthlyExpense:number,
-    expanded?:boolean
+    expanded?:boolean,
+    onToggle: (yearMonth:YearMonth) => void
 }
 
-export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded }) => {
+export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded, onToggle }) => {
 
-  const router = useRouter();
   const elRef = useRef<HTMLDivElement>(null);
 
   // Setting the `month` will activate the accordion belonging to that month
   // If the accordion is already active, it will collapse it
-  const handleChange = (event:any) => router.push(expanded ? `/?year=${yearMonth.year}` : `/?year=${yearMonth.year}&month=${yearMonth.month}`);
+  const handleChange = (event:any) => onToggle(yearMonth);
 
   useEffect(() => {
     if(expanded && elRef.current) {

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>
+
+        </>)
+}