Merge branch 'release/1.6.0'

app/page.tsx

@@ -1,22 +1,7 @@
-import { LocationCard } from './ui/LocationCard';
-import { AddMonthButton } from './ui/AddMonthButton';
-import { AddLocationButton } from './ui/AddLocationButton';
-import { PageFooter } from './ui/PageFooter';
-import { fetchAllLocations } from './lib/actions/locationActions';
-import { fetchAvailableYears } from './lib/actions/monthActions';
-import { BillingLocation, YearMonth } from './lib/db-types';
-import { FC } from 'react';
-import Pagination from './ui/Pagination';
+import { FC, Suspense } from 'react';
 import { Main } from './ui/Main';
-import { MonthCard } from './ui/MonthCard';
-
-const getNextYearMonth = (yearMonth:YearMonth) => {
-  const {year, month} = yearMonth;
-  return({
-    year: month===12 ? year+1 : year,
-    month: month===12 ? 1 : month+1
-  } as YearMonth);
-}
+import HomePage from './ui/HomePage';
+import { HomePageSkeleton } from './ui/MonthCardSceleton';
 
 export interface PageProps {
   searchParams?: {
@@ -27,91 +12,11 @@ export interface PageProps {
 
 const Page:FC<PageProps> = async ({ searchParams }) => {
 
-  let availableYears: number[];
-
-  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) {
-    
-    const currentYearMonth:YearMonth = {
-      year: new Date().getFullYear(),
-      month: new Date().getMonth() + 1
-    };
-    
-    return (
-      <main className="flex min-h-screen flex-col p-6 bg-base-300">
-        <MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0}>
-          <AddLocationButton yearMonth={currentYearMonth} />
-        </MonthCard>
-        <PageFooter />
-      </main>
-    );
-  }
-
-  const currentYear = Number(searchParams?.year) || availableYears[0];
-  const currentMonth = Number(searchParams?.month);
-  
-  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 {[key:string]:{
-    yearMonth: YearMonth,
-    locations: BillingLocation[],
-    monthlyExpense: number
-  } });
-
  return (
     <Main>
-        <AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
-        {
-          Object.entries(months).map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => 
-            <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === currentMonth } >
-              {
-                locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
-              }
-              {
-                // show AddLocationButton as a last item in the first month
-                monthIx === 0 ? <AddLocationButton yearMonth={yearMonth} /> : null
-              }
-            </MonthCard>
-          )
-        }
-        <div className="mt-5 flex w-full justify-center">
-          <Pagination availableYears={availableYears} />
-        </div>
+      <Suspense fallback={<HomePageSkeleton />}>
+        <HomePage searchParams={searchParams} />
+      </Suspense>
     </Main>
   );
 }

app/ui/HomePage.tsx

@@ -0,0 +1,76 @@
+import { fetchAllLocations } from '@/app/lib/actions/locationActions';
+import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
+import { BillingLocation, YearMonth } from '@/app/lib/db-types';
+import { FC } from 'react';
+import { MonthLocationList } from '@/app/ui/MonthLocationList';
+
+export interface HomePageProps {
+  searchParams?: {
+    year?: string;
+    month?: string;
+  };
+}
+
+export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
+
+  let availableYears: number[];
+
+  // const asyncTimout = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
+  // await asyncTimout(5000);
+
+  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
+  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} />
+  );
+}
+
+export default HomePage;

app/ui/LocationEditForm.tsx

@@ -24,7 +24,11 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
 
     // redirect to the main page
     const handleCancel = () => {
-        if(location) gotoHome(location?.yearMonth);
+        if(location)
+            gotoHome(location?.yearMonth);
+        else if(yearMonth)
+            gotoHome(yearMonth);
+            
     };
 
     return(

app/ui/MonthCard.tsx

@@ -4,23 +4,23 @@ import { FC, useEffect, useRef } from "react";
 import { formatYearMonth } from "../lib/format";
 import { YearMonth } from "../lib/db-types";
 import { formatCurrency } from "../lib/formatStrings";
-import { useRouter } from "next/navigation";
+
 
 export interface MonthCardProps {
     yearMonth: YearMonth,
     children?: React.ReactNode,
     monthlyExpense:number,
-    expanded?:boolean
+    expanded?:boolean,
+    onToggle: (yearMonth:YearMonth) => void
 }
 
-export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded }) => {
+export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded, onToggle }) => {
 
-  const router = useRouter();
   const elRef = useRef<HTMLDivElement>(null);
 
   // Setting the `month` will activate the accordion belonging to that month
   // If the accordion is already active, it will collapse it
-  const handleChange = (event:any) => router.push(expanded ? `/?year=${yearMonth.year}` : `/?year=${yearMonth.year}&month=${yearMonth.month}`);
+  const handleChange = (event:any) => onToggle(yearMonth);
 
   useEffect(() => {
     if(expanded && elRef.current) {

app/ui/MonthCardSceleton.tsx

@@ -0,0 +1,32 @@
+import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
+import React from "react"
+
+const LocationCardSkeleton: React.FC = () =>
+<div className={`skeleton card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1`}>
+    <div className="card-body">
+        <h2 className="card-title mr-[2em]"></h2>
+    </div>
+</div>;
+
+export interface MonthCardSkeletonProps {
+    checked?: boolean;
+}
+
+export const MonthCardSkeleton: React.FC<MonthCardSkeletonProps> = ({checked=false}) =>
+    <div className={`skeleton collapse collapse-plus bg-base-200 my-1`}>
+      <input type="checkbox" name="my-accordion-3" checked={checked} disabled />
+      <div className="collapse-title text-xl font-medium w-[15em]">
+      </div>
+      <div className="collapse-content">
+        <LocationCardSkeleton />
+        <LocationCardSkeleton />
+      </div>
+    </div>;
+
+
+export const HomePageSkeleton: React.FC = () =>
+<>
+    <MonthCardSkeleton checked={true} />
+    <MonthCardSkeleton />
+    <MonthCardSkeleton />
+</>;

app/ui/MonthLocationList.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import React from "react";
+import { AddLocationButton } from "./AddLocationButton";
+import { AddMonthButton } from "./AddMonthButton";
+import { MonthCard } from "./MonthCard";
+import Pagination from "./Pagination";
+import { LocationCard } from "./LocationCard";
+import { BillingLocation, YearMonth } from "../lib/db-types";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+
+const getNextYearMonth = (yearMonth:YearMonth) => {
+    const {year, month} = yearMonth;
+    return({
+        year: month===12 ? year+1 : year,
+        month: month===12 ? 1 : month+1
+    } as YearMonth);
+}
+
+export interface MonthLocationListProps {
+    availableYears?: number[];
+    months?: {
+        [key: string]: {
+            yearMonth: YearMonth;
+            locations: BillingLocation[];
+            monthlyExpense: number;
+        };
+    };
+}
+
+export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
+    availableYears,
+    months,
+}) => {
+
+    const router = useRouter();
+    const search = useSearchParams();
+
+    const initialMonth = search.get('month')
+    
+    const [expandedMonth, setExpandedMonth] = React.useState<number>(
+        initialMonth ? parseInt(initialMonth as string) : -1 // no month is expanded
+    );
+
+    if(!availableYears || !months) {
+        const currentYearMonth:YearMonth = {
+            year: new Date().getFullYear(),
+            month: new Date().getMonth() + 1
+          };
+      
+        return(
+            <>
+            <MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0} onToggle={() => {}} expanded={true} >
+                <AddLocationButton yearMonth={currentYearMonth} />
+            </MonthCard>
+        </>)
+    };
+
+    const monthsArray = Object.entries(months);
+
+    // when the month is toggled, update the URL
+    // and set the the new expandedMonth
+    const handleMonthToggle = (yearMonth:YearMonth) => {
+        // if the month is already expanded, collapse it
+        if(expandedMonth === yearMonth.month) {
+            router.push(`/?year=${yearMonth.year}`);
+            setExpandedMonth(-1); // no month is expanded
+        } else  {
+            router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
+            setExpandedMonth(yearMonth.month);
+        }
+    }
+
+    return(<>
+            <AddMonthButton yearMonth={getNextYearMonth(monthsArray[0][1].locations[0].yearMonth)} />
+            {
+                monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => 
+                <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === expandedMonth } onToggle={handleMonthToggle} >
+                    {
+                        locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
+                    }
+                    {
+                        // show AddLocationButton as a last item in the first month
+                        monthIx === 0 ? <AddLocationButton yearMonth={yearMonth} /> : null
+                    }
+                </MonthCard>
+                )
+            }
+            <div className="mt-5 flex w-full justify-center">
+                <Pagination availableYears={availableYears} />
+            </div>
+
+        </>)
+}

docker-compose-deploy.yml

@@ -9,7 +9,7 @@ networks:
 
 services:
   web-app:
-    image: utility-bills-tracker:1.5.0
+    image: utility-bills-tracker:1.6.0
     networks:
       - traefik-network
       - mongo-network