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,38 +33,66 @@ 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 {availableYears, months, status, error} = homePageStatus;
-
-  const year = searchParams.get('year');
-  const currentYear = year ? parseInt(year, 10) : new Date().getFullYear();
 
   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(),
-          locations: await fetchAllLocations(currentYear),
+          months,
           status: "loaded",
         });
+
       } catch (error: any) {
         setHomePageStatus({
           status: "error",
           availableYears: [],
-          locations: [],
           error: error.message
         });
       }
@@ -84,38 +120,6 @@ export const HomePage:FC<HomePageProps> = () => {
     return (<MonthLocationList />);
   }
 
-  // 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} />
   );