implemented bill deletion + var rename

app/attachment/[id]/not-found.tsx

@@ -1,18 +1,4 @@
-import Link from 'next/link';
+import { NotFoundPage } from '@/app/ui/NotFoundPage';
-import { FaceFrownIcon } from '@heroicons/react/24/outline';
  
-export default function NotFound() {
+export default () =>
-  return (
+<NotFoundPage title="404 File Not Found" description="Could not find the requested attachment." />;
-    <main className="flex h-full flex-col items-center justify-center gap-2">
-      <FaceFrownIcon className="w-10 text-gray-400" />
-      <h2 className="text-xl font-semibold">404 File Not Found</h2>
-      <p>Could not find the requested attachment.</p>
-      <Link
-        href="/"
-        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
-      >
-        Go Back
-      </Link>
-    </main>
-  );
-}

app/attachment/[id]/route.tsx

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

app/bills/[id]/delete/not-found.tsx

@@ -0,0 +1,4 @@
+import { NotFoundPage } from '@/app/ui/NotFoundPage';
+ 
+export default () =>
+<NotFoundPage title="404 Bill Not Found" description="Could not find the requested Bill." />;

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

@@ -0,0 +1,12 @@
+import { deleteBillById } from '@/app/lib/actions';
+import { notFound, redirect } from 'next/navigation';
+
+export default async function Page({ params:{ id } }: { params: { id:string } }) {
+    const [locationID, billID] = id.split('-');
+
+    if(await deleteBillById(locationID, billID) === 0) {
+        return(notFound());
+    }
+
+    redirect(`/`);
+}

app/bills/[id]/edit/not-found.tsx

@@ -1,18 +1,4 @@
-import Link from 'next/link';
+import { NotFoundPage } from '@/app/ui/NotFoundPage';
-import { FaceFrownIcon } from '@heroicons/react/24/outline';
  
-export default function NotFound() {
+export default () =>
-  return (
+<NotFoundPage title="404 Bill Not Found" description="Could not find the requested Bill." />;
-    <main className="flex h-full flex-col items-center justify-center gap-2">
-      <FaceFrownIcon className="w-10 text-gray-400" />
-      <h2 className="text-xl font-semibold">404 Bill Not Found</h2>
-      <p>Could not find the requested Bill.</p>
-      <Link
-        href="/"
-        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
-      >
-        Go Back
-      </Link>
-    </main>
-  );
-}

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

@@ -1,5 +1,5 @@
-import { PlainLocation, PlainBill, MongoLocation } from '@/app/lib/db-types';
+import { BillingLocation, Bill } from '@/app/lib/db-types';
-import { fetchBillById } from '@/app/lib/fetchBillById';
+import { fetchBillById } from '@/app/lib/actions';
 import clientPromise from '@/app/lib/mongodb';
 import { BillEditForm } from '@/app/ui/BillEditForm';
 import { ObjectId } from 'mongodb';
@@ -7,16 +7,16 @@ import { notFound } from 'next/navigation';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
-    const [invoiceID, billID] = id.split('-');
+    const [locationID, billID] = id.split('-');
 
-    const bill = await fetchBillById(invoiceID, billID);
+    const bill = await fetchBillById(locationID, billID);
 
     if (!bill) {
-        notFound();
+        return(notFound());
     }
     return (
         <main>
-            <BillEditForm invoiceID={invoiceID} bill={bill} />
+            <BillEditForm locationID={locationID} bill={bill} />
         </main>
     );
 }

app/lib/actions.ts

@@ -4,8 +4,7 @@ import { z } from 'zod';
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 import clientPromise from './mongodb';
-import { ObjectId } from 'mongodb';
+import { BillAttachment, Bill } from './db-types';
-import { BillAttachment } from './db-types';
 
 export type State = {
     errors?: {
@@ -113,7 +112,7 @@ export async function updateBill(locationId: string, billId:string, prevState:St
 
 
     // find a location with the given locationID
-    const post = await db.collection<Location>("lokacije").updateOne(
+    const post = await db.collection<BillingLocation>("lokacije").updateOne(
         {
             _id: locationId // find a location with the given locationID
         },
@@ -121,7 +120,7 @@ export async function updateBill(locationId: string, billId:string, prevState:St
             $set: mongoDbSet
         }, {
             arrayFilters: [
-                { "elem._id": { $eq: new ObjectId(billId) } } // find a bill with the given billID
+                { "elem._id": { $eq: billId } } // find a bill with the given billID
             ]
         });
 
@@ -134,3 +133,53 @@ export async function updateBill(locationId: string, billId:string, prevState:St
 export async function gotoHome() {
     redirect('/');   
 }
+
+export const fetchBillById = async (locationID:string, billID:string) => {
+    const client = await clientPromise;
+    const db = client.db("rezije");
+
+    // find a location with the given locationID
+    const billLocation = await db.collection<BillingLocation>("lokacije").findOne({ _id: locationID })
+
+    if(!billLocation) {
+        console.log(`Location ${locationID} not found`);
+        return(null);
+    }
+
+    // find a bill with the given billID
+    const Bill = billLocation?.bills.find(({ _id }) => _id.toString() === billID);
+
+    if(!Bill) {
+        console.log('Bill not found');
+        return(null);
+    }
+
+    const { _id, ...billBase  } = Bill;
+
+    return({
+        id: _id.toString(),
+        ...billBase
+    } as Bill);
+
+}
+
+export const deleteBillById = async (locationID:string, billID:string) => {
+    const client = await clientPromise;
+    const db = client.db("rezije");
+
+    // find a location with the given locationID
+    const post = await db.collection<BillingLocation>("lokacije").updateOne(
+        {
+            _id: locationID // find a location with the given locationID
+        },
+        {
+            // remove the bill with the given billID
+            $pull: {
+                bills: {
+                    _id: billID
+                }
+            }
+        });
+    
+    return(post.modifiedCount);
+}

app/lib/db-types.ts

@@ -8,42 +8,20 @@ export interface BillAttachment {
     fileContentsBase64: string;
 };
 
-/** Bill basic data */
+/** bill object in the form returned by MongoDB */
-export interface LocationBase {
+export interface BillingLocation {
+    _id: string;
     name: string;
     /** the value is encoded as yyyymm (i.e. 202301) */
     yearMonth: number;
+    bills: Bill[];
 };
 
-
-/** bill object in the form returned by MongoDB */
-export interface MongoLocation {
-    _id: ObjectId;
-    bills: MongoBill[];
-};
-
-/** plain-object Location version */
-export interface PlainLocation {
-    id: string;
-    bills: PlainBill[];
-};
-
-
 /** Bill basic data */
-export interface BillBase {
+export interface Bill {
+    _id: string;
     name: string;
     paid: boolean;
     attachment?: BillAttachment|null;
     notes?: string|null;
 };
-
-/** bill object in the form returned by MongoDB */
-export interface MongoBill extends BillBase {
-    _id: ObjectId;
-};
-
-
-/** plain-object bill version */
-export interface PlainBill extends BillBase {
-    id: string;
-};

app/lib/fetchBillById.ts

@@ -1,31 +1,2 @@
-import { PlainBill, MongoLocation } from '@/app/lib/db-types';
+import { Bill, BillingLocation } from '@/app/lib/db-types';
 import clientPromise from '@/app/lib/mongodb';
-
-export const fetchBillById = async (locationID:string, billID:string) => {
-    const client = await clientPromise;
-    const db = client.db("rezije");
-
-    // find a location with the given locationID
-    const billLocation = await db.collection<MongoLocation>("lokacije").findOne({ _id: locationID })
-
-    if(!billLocation) {
-        console.log(`Location ${locationID} not found`);
-        return(null);
-    }
-
-    // find a bill with the given billID
-    const mongoBill = billLocation?.bills.find(({ _id }) => _id.toString() === billID);
-
-    if(!mongoBill) {
-        console.log('Bill not found');
-        return(null);
-    }
-
-    const { _id, ...billBase  } = mongoBill;
-
-    return({
-        id: _id.toString(),
-        ...billBase
-    } as PlainBill);
-
-}

app/ui/BillBadge.tsx

@@ -1,10 +1,9 @@
 import { FC } from "react"
-import { Bill, Location } from "@/app/lib/db-types"
+import { Bill } from "@/app/lib/db-types"
 import Link from "next/link"
-import { ObjectId } from "mongodb";
 
 export interface BillBadgeProps {
-    locationId: ObjectId,
+    locationId: string,
     bill: Bill
 };
 

app/ui/BillEditForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { PlainBill } from "../lib/db-types";
+import { Bill } from "../lib/db-types";
 import { FC } from "react";
 import { useFormState } from "react-dom";
 import { gotoHome, updateBill } from "../lib/actions";
@@ -20,14 +20,14 @@ const updateBill2 = (locationId: string, billId:string, prevState:any, formData:
 }
 
 export interface BillEditFormProps {
-    invoiceID: string,
+    locationID: string,
-    bill: PlainBill
+    bill: Bill
 }
 
-export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name, paid, attachment, notes } }) => {
+export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill: { id, name, paid, attachment, notes } }) => {
 
     const initialState = { message: null, errors: {} };
-    const updateBillWithId = updateBill2.bind(null, invoiceID, id);
+    const updateBillWithId = updateBill2.bind(null, locationID, id);
     const [ state, dispatch ] = useFormState(updateBillWithId, initialState);
 
     // redirect to the main page
@@ -40,7 +40,9 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
     <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
         <div className="card-body">
             <form action={ dispatch }>
+                <a href={`/bills/${locationID}-${id}/delete/`}>
                     <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
+                </a>
 
                 <input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} required />
                 <div id="status-error" aria-live="polite" aria-atomic="true">
@@ -55,7 +57,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
                     // <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
 
                     attachment ? 
-                    <a href={`/attachment/${invoiceID}-${id}/${attachment.fileName}`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
+                    <a href={`/attachment/${locationID}-${id}/${attachment.fileName}`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
                         <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
                         {decodeURIComponent(attachment.fileName)}
                     </a>

app/ui/NotFoundPage.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import { FaceFrownIcon } from "@heroicons/react/24/outline";
+import { FC } from 'react';
+
+export interface NotFoundPageProps {
+    title?:string,
+    description?:string,
+}
+
+export const NotFoundPage:FC<NotFoundPageProps> = ({ title="404 Not Found", description="Could not find the requested content." }) =>
+    <main className="flex h-full flex-col items-center justify-center gap-2">
+        <FaceFrownIcon className="w-10 text-gray-400" />
+        <h2 className="text-xl font-semibold">{title}</h2>
+        <p>{description}</p>
+        <Link href="/" className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400">
+            Go Back
+        </Link>
+    </main>