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,58 +1,39 @@
-"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> = () => {
-
-  const searchParams = useSearchParams();
-  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 {
+    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(availableYears.length === 0) {
+    return (<MonthLocationList />);
+  }
+
+  const currentYear = Number(searchParams?.year) || availableYears[0];
+  
   const locations = await fetchAllLocations(currentYear);
 
   // group locations by month
@@ -81,44 +62,11 @@ export const HomePage:FC<HomePageProps> = () => {
         monthlyExpense: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
       }
     });
-        }, {} as MonthsLocations);
+  }, {} as {[key:string]:{
-        
+    yearMonth: YearMonth,
-        setHomePageStatus({
+    locations: BillingLocation[],
-          availableYears: await fetchAvailableYears(),
+    monthlyExpense: number
-          months,
+  } });
-          status: "loaded",
-        });
-
-      } catch (error: any) {
-        setHomePageStatus({
-          status: "error",
-          availableYears: [],
-          error: error.message
-        });
-      }
-    }
-
-    fetchData();
-  }, [currentYear]);
-
-  if(status === "loading") {
-    return (
-      <>
-        <MonthCardSkeleton checked={true} />
-        <MonthCardSkeleton />
-        <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
-  if(availableYears.length === 0) {
-    return (<MonthLocationList />);
-  }
 
  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);
         }
     }