form action redirects user to tjhe appropriate year

app/attachment/[id]/route.tsx

@@ -4,7 +4,7 @@ import { notFound } from 'next/navigation';
 export async function GET(request: Request, { params:{ id } }: { params: { id:string } }) {
     const [locationID, billID] = id.split('-');
 
-    const bill = await fetchBillById(locationID, billID);
+    const [location, bill] = await fetchBillById(locationID, billID) ? [];
 
     if(!bill?.attachment) {
         notFound();

app/bill/[id]/add/page.tsx

@@ -1,3 +1,4 @@
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
 import { BillEditForm } from '@/app/ui/BillEditForm';
 import { Main } from '@/app/ui/Main';
 

app/bill/[id]/delete/page.tsx

@@ -1,14 +1,17 @@
-import { deleteBillById } from '@/app/lib/actions/billActions';
-import { revalidatePath } from 'next/cache';
-import { notFound, redirect } from 'next/navigation';
+import { notFound } from 'next/navigation';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
+import { BillDeleteForm } from '@/app/ui/BillDeleteForm';
+import { fetchBillById } from '@/app/lib/actions/billActions';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
     const [locationID, billID] = id.split('-');
 
-    if(await deleteBillById(locationID, billID) === 0) {
+    const [location, bill] = await fetchBillById(locationID, billID) ?? [];
+    
+    if (!location || !bill) {
         return(notFound());
     }
 
-    revalidatePath('/');
-    redirect(`/`);
+    return (<BillDeleteForm location={location} bill={bill} />);
 }

app/bill/[id]/edit/page.tsx

@@ -7,14 +7,14 @@ export default async function Page({ params:{ id } }: { params: { id:string } })
 
     const [locationID, billID] = id.split('-');
 
-    const bill = await fetchBillById(locationID, billID);
+    const [location, bill] = await fetchBillById(locationID, billID) ?? [];
 
     if (!bill) {
         return(notFound());
     }
     return (
         <Main>
-            <BillEditForm locationID={locationID} bill={bill} />
+            <BillEditForm locationID={locationID} bill={bill} billYear={location?.yearMonth.year} />
         </Main>
     );
 }

app/lib/actions/billActions.ts

@@ -1,13 +1,12 @@
 'use server';
 
 import { z } from 'zod';
-import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
-import clientPromise, { getDbClient } from '../dbClient';
-import { BillAttachment, BillingLocation } from '../db-types';
+import { getDbClient } from '../dbClient';
+import { Bill, BillAttachment, BillingLocation, YearMonth } from '../db-types';
 import { ObjectId } from 'mongodb';
 import { withUser } from '@/app/lib/auth';
 import { AuthenticatedUser } from '../types/next-auth';
+import { gotoHome } from './navigationActions';
 
 export type State = {
     errors?: {
@@ -110,7 +109,7 @@ const serializeAttachment = async (billAttachment: File | null) => {
  * @param formData form data
  * @returns 
  */
-export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationId: string, billId:string|undefined, prevState:State, formData: FormData) => {
+export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationId: string, billId:string|undefined, billYear:number|undefined, prevState:State, formData: FormData) => {
 
     const { id: userId } = user;
 
@@ -192,18 +191,9 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
                 }
             });
     }
-
-    // clear the cache for the path
-    revalidatePath('/');
-    // go to the bill list
-    redirect('/');
+    await gotoHome(billYear ? `/?year=${billYear}` : undefined);
 })
 
-export async function gotoHome() {
-    revalidatePath('/');
-    redirect('/');   
-}
-
 export const fetchBillById = withUser(async (user:AuthenticatedUser, locationID:string, billID:string) => {
 
     const { id: userId } = user;
@@ -226,10 +216,10 @@ export const fetchBillById = withUser(async (user:AuthenticatedUser, locationID:
         return(null);
     }
 
-    return(bill);
+    return([billLocation, bill] as [BillingLocation, Bill]);
 })
 
-export const deleteBillById = withUser(async (user:AuthenticatedUser, locationID:string, billID:string) => {
+export const deleteBillById = withUser(async (user:AuthenticatedUser, locationID:string, billID:string, year:number) => {
 
     const { id: userId } = user;
 
@@ -250,5 +240,6 @@ export const deleteBillById = withUser(async (user:AuthenticatedUser, locationID
             }
         });
     
+    await gotoHome(`/?year=${year}`);
     return(post.modifiedCount);
 });

app/lib/actions/locationActions.ts

@@ -1,14 +1,12 @@
 'use server';
 
 import { z } from 'zod';
-import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
-import clientPromise, { getDbClient } from '../dbClient';
+import { getDbClient } from '../dbClient';
 import { BillingLocation, YearMonth } from '../db-types';
 import { ObjectId } from 'mongodb';
-import { auth, withUser } from '@/app/lib/auth';
+import { withUser } from '@/app/lib/auth';
 import { AuthenticatedUser } from '../types/next-auth';
-import { NormalizedRouteManifest } from 'next/dist/server/base-server';
+import { gotoHome } from './navigationActions';
 
 export type State = {
     errors?: {
@@ -82,10 +80,7 @@ export const updateOrAddLocation = withUser(async (user:AuthenticatedUser, locat
         });
     }
 
-    // clear the cache for the path
-    revalidatePath('/');
-    // go to the bill list
-    redirect('/');
+    await gotoHome(yearMonth ? `/?year=${yearMonth?.year}` : undefined)
 });
 
 
@@ -128,7 +123,7 @@ export const fetchLocationById = withUser(async (user:AuthenticatedUser, locatio
     return(billLocation);
 })
 
-export const deleteLocationById = withUser(async (user:AuthenticatedUser, locationID:string) => {
+export const deleteLocationById = withUser(async (user:AuthenticatedUser, locationID:string, yearMonth:YearMonth) => {
 
     const dbClient = await getDbClient();
 
@@ -137,5 +132,5 @@ export const deleteLocationById = withUser(async (user:AuthenticatedUser, locati
     // find a location with the given locationID
     const post = await dbClient.collection<BillingLocation>("lokacije").deleteOne({ _id: locationID, userId });
     
-    return(post.deletedCount);
+    await gotoHome(`/?year=${yearMonth?.year}`)
 })

app/lib/actions/monthActions.ts

@@ -1,10 +1,8 @@
 'use server';
 
-import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
-import clientPromise, { getDbClient } from '../dbClient';
+import { getDbClient } from '../dbClient';
 import { ObjectId } from 'mongodb';
-import { BillingLocation, YearMonth } from '../db-types';
+import { Bill, BillingLocation, YearMonth } from '../db-types';
 import { AuthenticatedUser } from '../types/next-auth';
 import { withUser } from '../auth';
 
@@ -22,7 +20,6 @@ export const addMonth = withUser(async (user:AuthenticatedUser, { year, month }:
     // update the bill in the mongodb
     const dbClient = await getDbClient();
 
-
     const prevYear = month === 1 ? year - 1 : year;
     const prevMonth = month === 1 ? 12 : month - 1;
 
@@ -52,24 +49,16 @@ export const addMonth = withUser(async (user:AuthenticatedUser, { year, month }:
                     paid: false,
                     attachment: null,
                     notes: null,
-                }
+                    payedAmount: null
+                } as Bill
             })
         } as BillingLocation);
     });
 
     const newMonthLocations = await newMonthLocationsCursor.toArray()
     await dbClient.collection<BillingLocation>("lokacije").insertMany(newMonthLocations);
-
-    // clear the cache for the path
-    revalidatePath('/');
-    // go to the bill list
-    redirect('/');
 });
 
-export async function gotoHome() {
-    redirect('/');   
-}
-
 export const fetchAvailableYears = withUser(async (user:AuthenticatedUser) => {
     const { id: userId } = user;
 

app/lib/actions/navigationActions.ts

@@ -0,0 +1,9 @@
+'use server';
+
+import { revalidatePath } from "next/cache";
+import { redirect } from 'next/navigation';
+
+export async function gotoHome(path: string = '/') {
+    revalidatePath(path, "page");
+    redirect(path);
+}

app/location/[id]/delete/page.tsx

@@ -1,15 +1,14 @@
-import { deleteBillById } from '@/app/lib/actions/billActions';
-import { deleteLocationById } from '@/app/lib/actions/locationActions';
-import { revalidatePath } from 'next/cache';
-import { notFound, redirect } from 'next/navigation';
+import { notFound } from 'next/navigation';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
-    const locationID = id;
 
-    if(await deleteLocationById(locationID) === 0) {
+    const location = await fetchLocationById(id);
+
+    if (!location) {
         return(notFound());
     }
 
-    revalidatePath('/');
-    redirect(`/`);
+    return (<LocationDeleteForm location={location} />);
 }

app/location/[id]/edit/page.tsx

@@ -9,5 +9,5 @@ export default async function Page({ params:{ id } }: { params: { id:string } })
     if (!location) {
         return(notFound());
     }
-    return (<LocationEditForm location={location} />);
+    return (<LocationEditForm location={location} yearMonth={location.yearMonth} />);
 }

app/page.tsx

@@ -8,7 +8,7 @@ import { formatCurrency } from './lib/formatStrings';
 import { fetchAvailableYears } from './lib/actions/monthActions';
 import { YearMonth } from './lib/db-types';
 import { formatYearMonth } from './lib/format';
-import { FC } from 'react';
+import { FC, Fragment } from 'react';
 import Pagination from './ui/Pagination';
 import { PageHeader } from './ui/PageHeader';
 import { Main } from './ui/Main';
@@ -89,17 +89,17 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
             monthlyExpense += location.bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
             
             return (
-              <>
+              <Fragment key={`location-${location._id}`}>
                 {
                   // show month title above the first LocationCard in the month
                   isFirstLocationInMonth ?
-                    <MonthTitle key={`${year}-${month}`} yearMonth={location.yearMonth} /> : null
+                    <MonthTitle yearMonth={location.yearMonth} /> : null
                 }
-                <LocationCard key={`${location._id}`} location={location} />
+                <LocationCard location={location} />
                 {
                   // show AddLocationButton as a last item in the first month
                   isLastLocationOfLatestMonth && isLatestYear ?
-                    <AddLocationButton key={`add-loc-${formatYearMonth(location.yearMonth)}`} yearMonth={location.yearMonth} /> : null
+                    <AddLocationButton yearMonth={location.yearMonth} /> : null
                 }
                 {
                   isLastLocationInMonth && monthlyExpense>0 ?
@@ -111,7 +111,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
                         </span>
                     </div> : null
                 }
-              </>
+              </Fragment>
             )
           })
         }

app/ui/BillDeleteForm.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { FC } from "react";
+import { Bill, BillingLocation } from "../lib/db-types";
+import { deleteLocationById } from "../lib/actions/locationActions";
+import { useFormState } from "react-dom";
+import { Main } from "./Main";
+import { gotoHome } from "../lib/actions/navigationActions";
+import { deleteBillById } from "../lib/actions/billActions";
+
+export interface BillDeleteFormProps {
+    bill: Bill,
+    location: BillingLocation
+}
+
+export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) =>
+{
+    const handleAction = deleteBillById.bind(null, location._id, bill._id, location.yearMonth.year);
+    const [ state, dispatch ] = useFormState(handleAction, null);
+
+    const handleCancel = () => {
+        gotoHome(`/?year=${location.yearMonth.year}`);
+    };
+
+    return(
+        <Main>
+            <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+                <div className="card-body">
+                    <form action={dispatch}>
+                        <p className="py-6 px-6">
+                            Please confirm deletion of bill “<strong>{bill.name}</strong>” at “<strong>{location.name}</strong>”.
+                        </p>
+                        <div className="pt-4 text-center">
+                          <button className="btn btn-primary">Confim</button>
+                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </Main>
+    )
+}

app/ui/BillEditForm.tsx

@@ -4,37 +4,38 @@ import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Bill } from "../lib/db-types";
 import React, { FC } from "react";
 import { useFormState } from "react-dom";
-import { gotoHome, updateOrAddBill } from "../lib/actions/billActions";
+import { updateOrAddBill } from "../lib/actions/billActions";
 import Link from "next/link";
+import { gotoHome } from "../lib/actions/navigationActions";
 
 // Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
 // This is a workaround for that
-const updateOrAddBillMiddleware = (locationId: string, billId:string|undefined, prevState:any, formData: FormData) => {
+const updateOrAddBillMiddleware = (locationId: string, billId:string|undefined, billYear:number|undefined, prevState:any, formData: FormData) => {
     // URL encode the file name of the attachment so it is correctly sent to the server
     const billAttachment = formData.get('billAttachment') as File;
     formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name));
-    return updateOrAddBill(locationId, billId, prevState, formData);
+    return updateOrAddBill(locationId, billId, billYear, prevState, formData);
 }
 
 export interface BillEditFormProps {
     locationID: string,
-    bill?: Bill
+    bill?: Bill,
+    billYear?: number
 }
 
-export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
+export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill, billYear }) => {
 
     const { _id: billID, name, paid, attachment, notes, payedAmount } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
 
     const initialState = { message: null, errors: {} };
-    const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID);
+    const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID, billYear);
     const [ state, dispatch ] = useFormState(handleAction, initialState);
 
     const [ isPaid, setIsPaid ] = React.useState<boolean>(paid);
 
     // redirect to the main page
     const handleCancel = () => {
-        console.log('handleCancel');
-        gotoHome();
+        gotoHome(billYear ? `/?year=${billYear}` : undefined);
     };
 
     const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {

app/ui/LocationCard.tsx

@@ -18,7 +18,7 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
     const monthlyExpense = bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
     
     return(
-        <div className="card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1">
+        <div data-key={_id } className="card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1">
             <div className="card-body">
                 <Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
                     <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
@@ -26,7 +26,7 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
                 <h2 className="card-title mr-[2em]">{formatYearMonth(yearMonth)} {name}</h2>
                 <div className="card-actions">
                     {
-                        bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
+                        bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
                     }
                     <Link href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
                         <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />

app/ui/LocationDeleteForm.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { FC } from "react";
+import { BillingLocation } from "../lib/db-types";
+import { deleteLocationById } from "../lib/actions/locationActions";
+import { useFormState } from "react-dom";
+import { Main } from "./Main";
+import { gotoHome } from "../lib/actions/navigationActions";
+
+export interface LocationDeleteFormProps {
+    /** location which should be deleted */
+    location: BillingLocation
+}
+
+export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
+{
+    const handleAction = deleteLocationById.bind(null, location._id, location.yearMonth);
+    const [ state, dispatch ] = useFormState(handleAction, null);
+
+    const handleCancel = () => {
+        gotoHome(`/location/${location._id}/edit/`);
+    };
+
+    return(
+        <Main>
+            <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+                <div className="card-body">
+                    <form action={dispatch}>
+                        <p className="py-6 px-6">
+                            Please confirm deletion of location “<strong>{location.name}</strong>”.
+                        </p>
+                        <div className="pt-4 text-center">
+                          <button className="btn btn-primary">Confim</button>
+                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </Main>
+    )
+}

app/ui/LocationEditForm.tsx

@@ -5,9 +5,9 @@ import { FC } from "react";
 import { BillingLocation, YearMonth } from "../lib/db-types";
 import { updateOrAddLocation } from "../lib/actions/locationActions";
 import { useFormState } from "react-dom";
-import { gotoHome } from "../lib/actions/billActions";
 import { Main } from "./Main";
 import Link from "next/link";
+import { gotoHome } from "../lib/actions/navigationActions";
 
 export interface LocationEditFormProps {
     /** location which should be edited */
@@ -25,7 +25,7 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
     // redirect to the main page
     const handleCancel = () => {
         console.log('handleCancel');
-        gotoHome();
+        gotoHome(location ? `/?year=${location?.yearMonth?.year}` : undefined);
     };
 
     return(

app/ui/Pagination.tsx

@@ -83,7 +83,7 @@ export default function Pagination({ availableYears } : { availableYears: number
 
             return (
               <YearNumber
-                key={`${year}-${index}`}
+                key={`year-number-${year}-${index}`}
                 href={createYearURL(year)}
                 year={year}
                 position={position}

app/year-month/[id]/add/page.tsx

@@ -1,12 +1,13 @@
 import { addMonth } from '@/app/lib/actions/monthActions';
+import { gotoHome } from '@/app/lib/actions/navigationActions';
 import { parseYearMonth } from '@/app/lib/format';
-import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
-    await addMonth(parseYearMonth(id));
+    const { year, month } = parseYearMonth(id);
+    await addMonth({ year, month });
 
-    revalidatePath('/');
-    redirect(`/`);
+    await gotoHome(`/?year=${year}`);
+
+    return null; // if we don't return anything, the client-side will not re-validate cache
 }