HomePage: switched to client-side rendering

app/ui/HomePage.tsx

@@ -1,30 +1,79 @@
-import { fetchAllLocations } from '@/app/lib/actions/locationActions';
-import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
+"use client";
+
 import { BillingLocation, YearMonth } from '@/app/lib/db-types';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { MonthLocationList } from '@/app/ui/MonthLocationList';
+import { WithId } from 'mongodb';
+import { MonthCardSkeleton } from './MonthCardSkeleton';
 
 export interface HomePageProps {
-  searchParams?: {
-    year?: string;
-    month?: string;
-  };
 }
 
-export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
+const fetchAllLocations = async (year: number) => {
+  const response = await fetch(`/api/all-locations/?year=${year}`);
+  const { locations } : { locations: WithId<BillingLocation>[] } = await response.json();
+  return locations;
+}
 
-  let availableYears: number[];
+const fetchAvailableYears = async () => {
+  const response = await fetch(`/api/available-years/`);
+  const { availableYears }: { availableYears: number[]} = await response.json();
+  return availableYears;
+}
 
-  // const asyncTimout = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
-  // await asyncTimout(5000);
+export const HomePage:FC<HomePageProps> = () => {
 
-  try {
-    availableYears = await fetchAvailableYears();
-  } catch (error:any) {
+  const [ homePageStatus, setHomePageStatus ] = useState<{
+    status: "loading" | "loaded" | "error",
+    availableYears: number[],
+    locations: WithId<BillingLocation>[],
+    error?: string
+  }>({
+    status: "loading",
+    availableYears: [],
+    locations: []
+  });
+
+  const {availableYears, locations, status, error} = homePageStatus;
+
+  const year = new URLSearchParams(window.location.search).get('year');
+  const currentYear = year ? parseInt(year, 10) : new Date().getFullYear();
+
+  useEffect(() => {
+
+    const fetchData = async () => {
+
+      try {
+        setHomePageStatus({
+          availableYears: await fetchAvailableYears(),
+          locations: await fetchAllLocations(currentYear),
+          status: "loaded",
+        });
+      } catch (error: any) {
+        setHomePageStatus({
+          status: "error",
+          availableYears: [],
+          locations: [],
+          error: error.message
+        });
+      }
+    }
+
+    fetchData();
+  }, [currentYear]);
+
+  if(status === "loading") {
     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>);
+      <>
+        <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
@@ -32,10 +81,6 @@ export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
     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;