tracking active month via URL param

app/page.tsx

@@ -21,6 +21,7 @@ const getNextYearMonth = (yearMonth:YearMonth) => {
 export interface PageProps {
   searchParams?: {
     year?: string;
+    month?: string;
   };
 }
 
@@ -47,15 +48,17 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
     
     return (
       <main className="flex min-h-screen flex-col p-6 bg-base-300">
-        <MonthTitle yearMonth={currentYearMonth} />
+        <MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0}>
           <AddLocationButton yearMonth={currentYearMonth} />
+        </MonthCard>
         <PageFooter />
       </main>
     );
   }
 
-  const [ latestYear ] = availableYears;
   const currentYear = Number(searchParams?.year) || availableYears[0];
+  const currentMonth = Number(searchParams?.month);
+  
   const locations = await fetchAllLocations(currentYear);
 
   // group locations by month
@@ -95,7 +98,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
         <AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
         {
           Object.entries(months).map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => 
-            <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense}>
+            <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === currentMonth } >
               {
                 locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
               }

app/ui/MonthCard.tsx

@@ -1,17 +1,28 @@
+"use client";
+
 import { FC } from "react";
 import { formatYearMonth } from "../lib/format";
 import { YearMonth } from "../lib/db-types";
 import { formatCurrency } from "../lib/formatStrings";
+import { redirect, useParams, useRouter } from "next/navigation";
 
 export interface MonthCardProps {
     yearMonth: YearMonth,
     children?: React.ReactNode,
-    monthlyExpense:number
+    monthlyExpense:number,
+    expanded?:boolean
 }
 
-export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense }) =>
+export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded }) => {
+
+  const router = useRouter();
+
+  // setting the `month` will activate the accordion belonging to that month
+  const handleChange = (event:any) => router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`)
+
+  return(
     <div className="collapse collapse-plus bg-base-200 my-1">
-  <input type="radio" name="my-accordion-3" /> 
+      <input type="radio" name="my-accordion-3" checked={expanded} onChange={handleChange} /> 
       <div className="collapse-title text-xl font-medium">
         {`${formatYearMonth(yearMonth)}`}
         {
@@ -25,3 +36,5 @@ export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpen
         {children}
       </div>
     </div>
+  )
+};