HomePage: switched to client-side rendering

app/lib/actions/monthActions.ts

@@ -70,7 +70,7 @@ export const fetchAvailableYears = withUser(async (user:AuthenticatedUser) => {
     const dbClient = await getDbClient();
 
     // query mnogodb for all `yearMonth` values
-    const years = await dbClient.collection<BillingLocation>("lokacije")
+    const years:number[] = await dbClient.collection<BillingLocation>("lokacije")
         .distinct("yearMonth.year", { userId })
 
     // sort the years in descending order

app/page.tsx

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

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> = () => {
+
+  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 {
-    availableYears = await fetchAvailableYears();
-  } catch (error:any) {
+        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;