implemente bill add

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

@@ -0,0 +1,10 @@
+import { BillEditForm } from '@/app/ui/BillEditForm';
+
+export default async function Page({ params:{ id:locationID } }: { params: { id:string } }) {
+
+    return (
+        <main>
+            <BillEditForm locationID={locationID} />
+        </main>
+    );
+}

app/lib/actions.ts

@@ -4,7 +4,8 @@ import { z } from 'zod';
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 import clientPromise from './mongodb';
-import { BillAttachment, Bill } from './db-types';
+import { BillAttachment, Bill, BillingLocation } from './db-types';
+import { ObjectId } from 'mongodb';
 
 export type State = {
     errors?: {
@@ -61,14 +62,14 @@ const serializeAttachment = async (billAttachment: File | null) => {
 }
 
 /**
- * Server-side action which creates a new bill
+ * Server-side action which adds or updates a bill
  * @param locationId location of the bill
  * @param billId ID of the bill
  * @param prevState previous state of the form
  * @param formData form data
  * @returns 
  */
-export async function updateBill(locationId: string, billId:string, prevState:State, formData: FormData) {
+export async function updateOrAddBill(locationId: string, billId?:string, prevState:State, formData: FormData) {
 
     const validatedFields = UpdateBill.safeParse({
         billName: formData.get('billName'),
@@ -110,19 +111,37 @@ export async function updateBill(locationId: string, billId:string, prevState:St
         "bills.$[elem].notes": billNotes,
     };
 
-
-    // find a location with the given locationID
-    const post = await db.collection<BillingLocation>("lokacije").updateOne(
-        {
-            _id: locationId // find a location with the given locationID
-        },
-        {
-            $set: mongoDbSet
-        }, {
-            arrayFilters: [
-                { "elem._id": { $eq: billId } } // find a bill with the given billID
-            ]
-        });
+    if(billId) {
+        // find a location with the given locationID
+        const post = await db.collection<BillingLocation>("lokacije").updateOne(
+            {
+                _id: locationId // find a location with the given locationID
+            },
+            {
+                $set: mongoDbSet
+            }, {
+                arrayFilters: [
+                    { "elem._id": { $eq: billId } } // find a bill with the given billID
+                ]
+            });
+    } else {
+        // find a location with the given locationID
+        const post = await db.collection<BillingLocation>("lokacije").updateOne(
+            {
+                _id: locationId // find a location with the given locationID
+            },
+            {
+                $push: {
+                    bills: {
+                        _id: (new ObjectId()).toHexString(),
+                        name: billName,
+                        paid: billPaid,
+                        attachment: billAttachment,
+                        notes: billNotes,
+                    }
+                }
+            });
+    }
 
     // clear the cache for the path
     revalidatePath('/');
@@ -147,20 +166,14 @@ export const fetchBillById = async (locationID:string, billID:string) => {
     }
 
     // find a bill with the given billID
-    const Bill = billLocation?.bills.find(({ _id }) => _id.toString() === billID);
+    const bill = billLocation?.bills.find(({ _id }) => _id.toString() === billID);
 
-    if(!Bill) {
+    if(!bill) {
         console.log('Bill not found');
         return(null);
     }
 
-    const { _id, ...billBase  } = Bill;
-
-    return({
-        id: _id.toString(),
-        ...billBase
-    } as Bill);
-
+    return(bill);
 }
 
 export const deleteBillById = async (locationID:string, billID:string) => {

app/lib/fetchBillById.ts

@@ -1,2 +0,0 @@
-import { Bill, BillingLocation } from '@/app/lib/db-types';
-import clientPromise from '@/app/lib/mongodb';

app/ui/BillEditForm.tsx

@@ -4,31 +4,29 @@ import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Bill } from "../lib/db-types";
 import { FC } from "react";
 import { useFormState } from "react-dom";
-import { gotoHome, updateBill } from "../lib/actions";
-import { redirect } from 'next/navigation';
+import { gotoHome, updateOrAddBill } from "../lib/actions";
 
 // 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 updateBill2 = (locationId: string, billId:string, prevState:any, formData: FormData) => {
-    console.log('updateBill2', formData.get('billAttachment'));
-    
+const updateOrAddBillMiddleware = (locationId: string, billId:string|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 updateBill(locationId, billId, prevState, formData);
+    return updateOrAddBill(locationId, billId, prevState, formData);
 }
 
 export interface BillEditFormProps {
     locationID: string,
-    bill: Bill
+    bill?: Bill
 }
 
-export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill: { id, name, paid, attachment, notes } }) => {
+export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
+
+    const { _id: billID, name, paid, attachment, notes } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
 
     const initialState = { message: null, errors: {} };
-    const updateBillWithId = updateBill2.bind(null, locationID, id);
-    const [ state, dispatch ] = useFormState(updateBillWithId, initialState);
+    const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID);
+    const [ state, dispatch ] = useFormState(handleAction, initialState);
 
     // redirect to the main page
     const handleCancel = () => {
@@ -40,9 +38,13 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill: { id, nam
     <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={`/bill/${locationID}-${id}/delete/`}>
-                    <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
-                </a>
+                {
+                    // don't show the delete button if we are adding a new bill
+                    bill ?
+                    <a href={`/bill/${locationID}-${billID}/delete/`}>
+                        <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
+                    </a> : null
+                }
 
                 <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">
@@ -57,7 +59,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill: { id, nam
                     // <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/${locationID}-${id}/${attachment.fileName}`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
+                    <a href={`/attachment/${locationID}-${billID}/${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/LocationCard.tsx

@@ -3,11 +3,11 @@
 import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 import { FC } from "react";
 import { BillBadge } from "./BillBadge";
-import { Bill, Location } from "../lib/db-types";
+import { BillingLocation } from "../lib/db-types";
 import { formatYearMonth } from "../lib/format";
 
 export interface LocationCardProps {
-    location: Location
+    location: BillingLocation
 }
 
 export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => 
@@ -19,9 +19,9 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
         {
             bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
         }
-        <div className="tooltip" data-tip="Dodaj novi tip računa">
+        <a href={`/bill/${_id}/add`} className="tooltip" data-tip="Dodaj novi tip računa">
             <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
-        </div>
+        </a>
     </div>
     </div>
 </div>;