From f71098d9e8f446a3e5bc1523bfa83834e658fa41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Thu, 1 Feb 2024 14:34:27 +0100
Subject: [PATCH] tracking active month via URL param

---
 app/page.tsx         | 11 +++++++----
 app/ui/MonthCard.tsx | 47 ++++++++++++++++++++++++++++----------------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index d92873d..00f77ba 100644
--- a/app/page.tsx
+++ b/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} />
-        <AddLocationButton 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} />)
               }
diff --git a/app/ui/MonthCard.tsx b/app/ui/MonthCard.tsx
index 8ce52d0..9ee73e4 100644
--- a/app/ui/MonthCard.tsx
+++ b/app/ui/MonthCard.tsx
@@ -1,27 +1,40 @@
+"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 }) =>
-<div className="collapse collapse-plus bg-base-200 my-1">
-  <input type="radio" name="my-accordion-3" /> 
-  <div className="collapse-title text-xl font-medium">
-    {`${formatYearMonth(yearMonth)}`}
-    {
-      monthlyExpense>0 ?
-        <p className="text-xs font-medium">
-          Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
-        </p> : null
-    }
-  </div>
-  <div className="collapse-content"> 
-    {children}
-  </div>
-</div>
\ No newline at end of file
+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" checked={expanded} onChange={handleChange} /> 
+      <div className="collapse-title text-xl font-medium">
+        {`${formatYearMonth(yearMonth)}`}
+        {
+          monthlyExpense>0 ?
+            <p className="text-xs font-medium">
+              Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
+            </p> : null
+        }
+      </div>
+      <div className="collapse-content"> 
+        {children}
+      </div>
+    </div>
+  )
+};