HomePage: state optimization

app/ui/HomePage.tsx

@@ -10,6 +10,14 @@ import { useSearchParams } from 'next/navigation';
 export interface HomePageProps {
 }
 
+type MonthsLocations = {
+    [key:string]:{
+    yearMonth: YearMonth,
+    locations: BillingLocation[],
+    monthlyExpense: number
+  }
+}
+
 const fetchAllLocations = async (year: number) => {
   const response = await fetch(`/api/locations/in-year/?year=${year}`);
   const { locations } : { locations: WithId<BillingLocation>[] } = await response.json();
@@ -25,64 +33,27 @@ const fetchAvailableYears = async () => {
 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[],
-    locations: WithId<BillingLocation>[],
+    months?: MonthsLocations,
     error?: string
   }>({
     status: "loading",
     availableYears: [],
-    locations: []
   });
 
-  const {availableYears, locations, status, error} = homePageStatus;
-
-  const year = searchParams.get('year');
-  const currentYear = year ? parseInt(year, 10) : new Date().getFullYear();
+  const {availableYears, months, status, error} = homePageStatus;
 
   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 (
-      <>
-        <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 />);
-  }
+        const locations = await fetchAllLocations(currentYear);
 
         // group locations by month
         const months = locations.reduce((acc, location) => {
@@ -110,11 +81,44 @@ export const HomePage:FC<HomePageProps> = () => {
               monthlyExpense: location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0)
             }
           });
-  }, {} as {[key:string]:{
-    yearMonth: YearMonth,
-    locations: BillingLocation[],
-    monthlyExpense: number
-  } });
+        }, {} 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 (
+      <>
+        <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} />