home page converted back to server-side component

app/page.tsx

@@ -1,11 +1,7 @@
 import { FC, Suspense } from 'react';
 import { Main } from './ui/Main';
-import dynamic from 'next/dynamic'
+import HomePage from './ui/HomePage';
-
+import { MonthCardSkeleton } from './ui/MonthCardSkeleton';
-const HomePage = dynamic(
-  () => import('./ui/HomePage'),
-  { ssr: false }
-)
 
 export interface PageProps {
   searchParams?: {
@@ -14,11 +10,20 @@ export interface PageProps {
   };
 }
 
+const HomePageSkeleton = () => 
+<>
+  <MonthCardSkeleton checked={true} />
+  <MonthCardSkeleton />
+  <MonthCardSkeleton />
+</>
+
 const Page:FC<PageProps> = async ({ searchParams }) => {
 
  return (
     <Main>
-      <HomePage />
+      <Suspense fallback={<HomePageSkeleton />}>
+        <HomePage searchParams={searchParams} />
+      </Suspense>
     </Main>
   );
 }

app/ui/HomePage.tsx

@@ -1,118 +1,30 @@
-"use client";
+import { fetchAllLocations } from '@/app/lib/actions/locationActions';
-
+import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
 import { BillingLocation, YearMonth } from '@/app/lib/db-types';
-import { FC, useEffect, useState } from 'react';
+import { FC } from 'react';
 import { MonthLocationList } from '@/app/ui/MonthLocationList';
-import { WithId } from 'mongodb';
-import { MonthCardSkeleton } from './MonthCardSkeleton';
-import { useSearchParams } from 'next/navigation';
 
 export interface HomePageProps {
+  searchParams?: {
+    year?: string;
+    month?: string;
+  };
 }
 
-type MonthsLocations = {
+export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
-    [key:string]:{
-    yearMonth: YearMonth,
-    locations: BillingLocation[],
-    monthlyExpense: number
-  }
-}
 
-const fetchAllLocations = async (year: number) => {
+  let availableYears: number[];
-  const response = await fetch(`/api/locations/in-year/?year=${year}`);
-  const { locations } : { locations: WithId<BillingLocation>[] } = await response.json();
-  return locations;
-}
 
-const fetchAvailableYears = async () => {
+  // const asyncTimout = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
-  const response = await fetch(`/api/locations/available-years/`);
+  // await asyncTimout(5000);
-  const { availableYears }: { availableYears: number[]} = await response.json();
-  return availableYears;
-}
 
-export const HomePage:FC<HomePageProps> = () => {
+  try {
-
+    availableYears = await fetchAvailableYears();
-  const searchParams = useSearchParams();
+  } catch (error:any) {
-  const year = searchParams.get('year');
-  const currentYear = year ? parseInt(year, 10) : new Date().getFullYear();
-
-  const [ homePageStatus, setHomePageStatus ] = useState<{
-    status: "loading" | "loaded" | "error",
-    availableYears: number[],
-    months?: MonthsLocations,
-    error?: string
-  }>({
-    status: "loading",
-    availableYears: [],
-  });
-
-  const {availableYears, months, status, error} = homePageStatus;
-
-  useEffect(() => {
-
-    const fetchData = async () => {
-
-      try {
-        const locations = await fetchAllLocations(currentYear);
-
-        // group locations by month
-        const months = locations.reduce((acc, location) => {
-          const {year, month} =  location.yearMonth;
-          const key = `${year}-${month}`;
-
-          const locationsInMonth = acc[key];
-
-          if(locationsInMonth) {
-            return({
-              ...acc,
-              [key]: {
-                yearMonth: location.yearMonth,
-                locations: [...locationsInMonth.locations, location],
-                monthlyExpense: locationsInMonth.monthlyExpense + location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
-              }
-            })
-          }
-
-          return({
-            ...acc,
-            [key]: {
-              yearMonth: location.yearMonth,
-              locations: [location],
-              monthlyExpense: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
-            }
-          });
-        }, {} as MonthsLocations);
-        
-        setHomePageStatus({
-          availableYears: await fetchAvailableYears(),
-          months,
-          status: "loaded",
-        });
-
-      } catch (error: any) {
-        setHomePageStatus({
-          status: "error",
-          availableYears: [],
-          error: error.message
-        });
-      }
-    }
-
-    fetchData();
-  }, [currentYear]);
-
-  if(status === "loading") {
     return (
-      <>
+      <main className="flex min-h-screen flex-col p-6 bg-base-300">
-        <MonthCardSkeleton checked={true} />
+        <p className="text-center text-2xl text-red-500">{error.message}</p>
-        <MonthCardSkeleton />
+      </main>);
-        <MonthCardSkeleton />
-      </>
-    );
-  }
-
-  if(status === "error") {
-    return(<p className="text-center text-2xl text-red-500">{error}</p>);
   }
 
   // if the database is in it's initial state, show the add location button for the current month
@@ -120,6 +32,42 @@ export const HomePage:FC<HomePageProps> = () => {
     return (<MonthLocationList />);
   }
 
+  const currentYear = Number(searchParams?.year) || availableYears[0];
+  
+  const locations = await fetchAllLocations(currentYear);
+
+  // group locations by month
+  const months = locations.reduce((acc, location) => {
+    const {year, month} =  location.yearMonth;
+    const key = `${year}-${month}`;
+
+    const locationsInMonth = acc[key];
+
+    if(locationsInMonth) {
+      return({
+        ...acc,
+        [key]: {
+          yearMonth: location.yearMonth,
+          locations: [...locationsInMonth.locations, location],
+          monthlyExpense: locationsInMonth.monthlyExpense + location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
+        }
+      })
+    }
+
+    return({
+      ...acc,
+      [key]: {
+        yearMonth: location.yearMonth,
+        locations: [location],
+        monthlyExpense: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
+      }
+    });
+  }, {} as {[key:string]:{
+    yearMonth: YearMonth,
+    locations: BillingLocation[],
+    monthlyExpense: number
+  } });
+
  return (
     <MonthLocationList availableYears={availableYears} months={months} />
   );

app/ui/LocationCard.tsx

@@ -18,12 +18,12 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
     const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
     
     return(
-        <div data-key={_id } className="card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1">
+        <div data-key={_id } className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
             <div className="card-body">
                 <Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
                     <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
                 </Link>
-                <h2 className="card-title mr-[2em]">{formatYearMonth(yearMonth)} {name}</h2>
+                <h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
                 <div className="card-actions">
                     {
                         bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)

app/ui/MonthCard.tsx

@@ -30,7 +30,7 @@ export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpen
   }, [expanded]);
 
   return(
-    <div className="collapse collapse-plus bg-base-200 my-1" ref={elRef}>
+    <div className={`collapse collapse-plus bg-base-200 my-1 ${expanded ? "border-2 border-neutral" : ""}`} ref={elRef}>
       <input type="checkbox" name="my-accordion-3" checked={expanded} onChange={handleChange} /> 
       <div className="collapse-title text-xl font-medium">
         {`${formatYearMonth(yearMonth)}`}

app/ui/MonthLocationList.tsx

@@ -63,10 +63,10 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
     const handleMonthToggle = (yearMonth:YearMonth) => {
         // if the month is already expanded, collapse it
         if(expandedMonth === yearMonth.month) {
-            router.push(`/?year=${yearMonth.year}`);
+            // router.push(`/?year=${yearMonth.year}`);
             setExpandedMonth(-1); // no month is expanded
         } else  {
-            router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
+            // router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
             setExpandedMonth(yearMonth.month);
         }
     }