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';
-
-const getNextYearMonth = (yearMonth:YearMonth) => {
-  const {year, month} = yearMonth;
-  return({
-    year: month===12 ? year+1 : year,
-    month: month===12 ? 1 : month+1
-  } as YearMonth);
-}
+import { MonthLocationList } from './ui/MonthLocationList';
 
 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)} />
-        {
-          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>
+        <MonthLocationList availableYears={availableYears} months={months} />
     </Main>
   );
 }