From bccb00aaebaa1f86d68529d95321cf59bd5ba3fb 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 15:07:44 +0100
Subject: [PATCH] implemented scroll into view

---
 app/ui/MonthCard.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/ui/MonthCard.tsx b/app/ui/MonthCard.tsx
index 9ee73e4..b66db90 100644
--- a/app/ui/MonthCard.tsx
+++ b/app/ui/MonthCard.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { FC } from "react";
+import { FC, useEffect, useRef } 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";
+import { useRouter } from "next/navigation";
 
 export interface MonthCardProps {
     yearMonth: YearMonth,
@@ -16,12 +16,20 @@ export interface MonthCardProps {
 export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded }) => {
 
   const router = useRouter();
+  const elRef = useRef<HTMLDivElement>(null);
 
   // setting the `month` will activate the accordion belonging to that month
-  const handleChange = (event:any) => router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`)
+  const handleChange = (event:any) => router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
+
+  useEffect(() => {
+    if(expanded && elRef.current) {
+      // if the element i selected > scroll it into view
+      elRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, []);
 
   return(
-    <div className="collapse collapse-plus bg-base-200 my-1">
+    <div className="collapse collapse-plus bg-base-200 my-1" ref={elRef}>
       <input type="radio" name="my-accordion-3" checked={expanded} onChange={handleChange} /> 
       <div className="collapse-title text-xl font-medium">
         {`${formatYearMonth(yearMonth)}`}