implemented pagination

app/page.tsx

@@ -3,12 +3,13 @@ import { MonthTitle } from './ui/MonthTitle';
 import { AddMonthButton } from './ui/AddMonthButton';
 import { AddLocationButton } from './ui/AddLocationButton';
 import { PageFooter } from './ui/PageFooter';
-import { isAuthErrorMessage } from '@/app/lib/auth';
 import { fetchAllLocations } from './lib/actions/locationActions';
 import { formatCurrency } from './lib/formatStrings';
 import { fetchAvailableYears } from './lib/actions/monthActions';
 import { YearMonth } from './lib/db-types';
 import { formatYearMonth } from './lib/format';
+import { FC } from 'react';
+import Pagination from './ui/Pagination';
 
 const getNextYearMonth = (yearMonth:YearMonth) => {
   const {year, month} = yearMonth;
@@ -18,20 +19,27 @@ const getNextYearMonth = (yearMonth:YearMonth) => {
   } as YearMonth);
 }
 
-const Page = async () => {
+export interface PageProps {
+  searchParams?: {
+    year?: string;
+  };
+}
 
- const locations = await fetchAllLocations();
- const availableYears = await fetchAvailableYears();
+const Page:FC<PageProps> = async ({ searchParams }) => {
 
- if(isAuthErrorMessage(locations)) {
-  return (
-    <main className="flex min-h-screen flex-col p-6 bg-base-300">
-      <p className="text-center text-2xl text-red-500">{locations.message}</p>
-    </main>);
+  let availableYears: number[];
+
+  try {
+    availableYears = await fetchAvailableYears();
+  } catch (error:any) {
+    return (
+      <main className="flex min-h-screen flex-col p-6 bg-base-300">
+        <p className="text-center text-2xl text-red-500">{error.message}</p>
+      </main>);
   }
 
   // if the database is in it's initial state, show the add location button for the current month
-  if(locations.length === 0) {
+  if(availableYears.length === 0) {
     
     const currentYearMonth:YearMonth = {
       year: new Date().getFullYear(),
@@ -47,11 +55,21 @@ const Page = async () => {
     );
   }
 
+  console.log("page.availableYears", availableYears)
+
+  const [ latestYear ] = availableYears;
+  const currentYear = Number(searchParams?.year) || availableYears[0];
+  const locations = await fetchAllLocations(currentYear);
+
   let monthlyExpense = 0;
 
  return (
     <main className="flex min-h-screen flex-col p-6 bg-base-300">
-        <AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
+        {
+          // if this is the latest year, show the add month button
+          currentYear === latestYear &&
+            <AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
+        }
         {
           locations.map((location, ix, array) => {
 
@@ -59,9 +77,10 @@ const Page = async () => {
             const { year: prevYear, month: prevMonth } = array[ix-1]?.yearMonth ?? { year: undefined, month: undefined };
             const { year: nextYear, month: nextMonth } = array[ix+1]?.yearMonth ?? { year: undefined, month: undefined };
 
+            const isLatestYear = year === latestYear;
             const isFirstLocationInMonth = ix === 0 || year !== prevYear || month !== prevMonth;
             const isLastLocationInMonth = year !== nextYear || month !== nextMonth;
-            const isLastLocationOfFirstMonth = isLastLocationInMonth && year === array[0].yearMonth.year && month === array[0].yearMonth.month
+            const isLastLocationOfLatestMonth = isLastLocationInMonth && year === array[0].yearMonth.year && month === array[0].yearMonth.month
 
             if(isFirstLocationInMonth) {
               monthlyExpense = 0;
@@ -78,8 +97,8 @@ const Page = async () => {
                 }
                 <LocationCard key={`${location._id}`} location={location} />
                 {
-                  // show AddLocationButton as a last item in the firts month
-                  isLastLocationOfFirstMonth ?
+                  // show AddLocationButton as a last item in the first month
+                  isLastLocationOfLatestMonth && isLatestYear ?
                     <AddLocationButton key={`add-loc-${formatYearMonth(location.yearMonth)}`} yearMonth={location.yearMonth} /> : null
                 }
                 {
@@ -96,8 +115,10 @@ const Page = async () => {
             )
           })
         }
+        <div className="mt-5 flex w-full justify-center">
+          <Pagination availableYears={availableYears} />
+        </div>
         <PageFooter />
-        { availableYears.map(ym => <p key={`year-month-${ym}`}>{ym}</p>) }
     </main>
   );
 }