handling of empty database

app/lib/billActions.ts

@@ -150,6 +150,7 @@ export async function updateOrAddBill(locationId: string, billId?:string, prevSt
 }
 
 export async function gotoHome() {
+    revalidatePath('/');
     redirect('/');   
 }
 

app/page.tsx

@@ -4,8 +4,9 @@ import { AddMonthButton } from './ui/AddMonthButton';
 import { AddLocationButton } from './ui/AddLocationButton';
 import clientPromise from './lib/mongodb';
 import { BillingLocation } from './lib/db-types';
+import { PageFooter } from './ui/PageFooter';
 
-const calcNextYearMonth = (yearMonth: number) => {
+const getNextYearMonth = (yearMonth:number) => {
   return(yearMonth % 100 === 12 ? yearMonth + 89 : yearMonth + 1);
 }
 
@@ -20,30 +21,42 @@ export const Page = async () => {
     .limit(20)
     .toArray();
 
+  // if the database is in it's initial state, show the add location button for the current month
+  if(locations.length === 0) {
+    const currentYearMonth = new Date().getFullYear() * 100 + new Date().getMonth() + 1;
+    return (
+      <main className="flex min-h-screen flex-col p-6 bg-base-300">
+        <MonthTitle yearMonth={currentYearMonth} />
+        <AddLocationButton yyyymm={currentYearMonth} />
+        <PageFooter />
+      </main>
+    );
+  }
+
  return (
     <main className="flex min-h-screen flex-col p-6 bg-base-300">
-        <AddMonthButton yearMonth={calcNextYearMonth(locations[0].yearMonth)} />
+        <AddMonthButton nextYearMonth={getNextYearMonth(locations[0].yearMonth)} />
         {
           locations.map((location, ix, array) => {
             
             return (
               <>
                 {
-                  location.yearMonth !== array[0].yearMonth && location.yearMonth !== array[ix-1].yearMonth ? <AddLocationButton key={`add-loc-${location.yearMonth}`} yyyymm={array[ix-1].yearMonth} /> : null
-                }
-                {
-                  // show month title if it's the first location in the month
-                  ix === 0 || location.yearMonth !== array[ix-1].yearMonth ? <MonthTitle key={location.yearMonth} yearMonth={location.yearMonth} /> : null
+                  // show month title above the first LocationCard in the month
+                  ix === 0 || location.yearMonth !== array[ix-1].yearMonth ?
+                    <MonthTitle key={location.yearMonth} yearMonth={location.yearMonth} /> : null
                 }
                 <LocationCard key={`${location._id}`} location={location} />
+                {
+                  // show AddLocationButton as a last item in the firts month
+                  location.yearMonth === array[0].yearMonth && location.yearMonth !== array[ix+1]?.yearMonth ?
+                    <AddLocationButton key={`add-loc-${location.yearMonth}`} yyyymm={location.yearMonth} /> : null
+                }
               </>
             )
           })
         }
-        <h2 className='text-xl text-sky-400/75 font-semibold mt-4'>Docs</h2>
-        <p><a href="https://tailwindcss.com/docs/" target="_blank">tailwindcss.com</a></p>
-        <p><a href="https://heroicons.com/" target="_blank">heroicons.com</a></p>
-        <p><a href="https://daisyui.com/components/" target="_blank">daisyui.com</a></p>
+        <PageFooter />
     </main>
   );
 }

app/ui/AddLocationButton.tsx

@@ -3,7 +3,7 @@ import { PlusCircleIcon } from "@heroicons/react/24/outline";
 
 export interface AddLocationButtonProps {
     /** year month at which the new billing location should be addes */
-    yyyymm: string
+    yyyymm: number
 }
 
 export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yyyymm}) =>

app/ui/AddMonthButton.tsx

@@ -2,10 +2,10 @@ import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import React from "react";
 
 export interface AddMonthButtonProps {
-    yearMonth: number;
+    nextYearMonth: number;
 }
 
-export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ yearMonth }) =>
-<a href={`/year-month/${yearMonth}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
+export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ nextYearMonth }) =>
+<a href={`/year-month/${nextYearMonth}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
     <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
 </a>

app/ui/PageFooter.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const PageFooter:React.FC = () => <>
+    <h2 className='text-xl text-sky-400/75 font-semibold mt-4'>Docs</h2>
+    <p><a href="https://tailwindcss.com/docs/" target="_blank">tailwindcss.com</a></p>
+    <p><a href="https://heroicons.com/" target="_blank">heroicons.com</a></p>
+    <p><a href="https://daisyui.com/components/" target="_blank">daisyui.com</a></p>
+</>