implementiran share by link

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

@@ -1,6 +1,4 @@
 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';
 import { Main } from '@/app/ui/Main';

app/[locale]/share/bill/[id]/not-found.tsx

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

app/[locale]/share/bill/[id]/page.tsx

@@ -0,0 +1,20 @@
+import { fetchBillById } from '@/app/lib/actions/billActions';
+import { ViewBillCard } from '@/app/ui/ViewBillCard';
+import { Main } from '@/app/ui/Main';
+import { notFound } from 'next/navigation';
+
+export default async function Page({ params:{ id } }: { params: { id:string } }) {
+
+    const [locationID, billID] = id.split('-');
+
+    const [location, bill] = await fetchBillById(locationID, billID) ?? [];
+
+    if (!bill || !location) {
+        return(notFound());
+    }
+    return (
+        <Main>
+            <ViewBillCard location={location} bill={bill} />
+        </Main>
+    );
+}

app/[locale]/share/location/[id]/LocationViewPage.tsx

@@ -0,0 +1,13 @@
+import { ViewLocationCard } from '@/app/ui/ViewLocationCard';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { notFound } from 'next/navigation';
+
+export default async function LocationViewPage({ locationId }: { locationId:string }) {
+    const location = await fetchLocationById(locationId);
+
+    if (!location) {
+        return(notFound());
+    }
+
+    return (<ViewLocationCard location={location} />);
+}

app/[locale]/share/location/[id]/page.tsx

@@ -0,0 +1,15 @@
+import { Suspense } from 'react';
+import LocationViewPage from './LocationViewPage';
+import { Main } from '@/app/ui/Main';
+import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
+
+export default async function Page({ params:{ id } }: { params: { id:string } }) {
+
+    return (
+        <Main>
+            <Suspense fallback={<LocationEditFormSkeleton />}>
+                <LocationViewPage  locationId={id} />
+            </Suspense>
+        </Main>
+    );
+}

app/lib/actions/billActions.ts

@@ -207,8 +207,10 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
         await gotoHome({ year: billYear, month: billMonth });
     }
 })
+/*
+Funkcija zamijenjena sa `fetchBillByUserAndId`, koja brže radi i ne treba korisnika
 
-export const fetchBillById = withUser(async (user:AuthenticatedUser, locationID:string, billID:string, includeAttachmentBinary:boolean = false) => {
+export const fetchBillByUserAndId = withUser(async (user:AuthenticatedUser, locationID:string, billID:string, includeAttachmentBinary:boolean = false) => {
 
     const { id: userId } = user;
 
@@ -245,6 +247,43 @@ export const fetchBillById = withUser(async (user:AuthenticatedUser, locationID:
 
     return([billLocation, bill] as [BillingLocation, Bill]);
 })
+*/
+
+export const fetchBillById = async (locationID:string, billID:string, includeAttachmentBinary:boolean = false) => {
+
+
+    const dbClient = await getDbClient();
+
+    // don't include the attachment binary data in the response
+    // if the attachment binary data is not needed
+    const projection = includeAttachmentBinary ? {} : {
+        "bills.attachment.fileContentsBase64": 0,
+    };
+
+    // find a location with the given locationID
+    const billLocation = await dbClient.collection<BillingLocation>("lokacije").findOne(
+        {
+            _id: locationID,
+        },
+        {
+            projection
+        })
+
+    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);
+    }
+
+    return([billLocation, bill] as [BillingLocation, Bill]);
+};
 
 export const deleteBillById = withUser(async (user:AuthenticatedUser, locationID:string, billID:string, year:number, month:number) => {
 

app/lib/actions/locationActions.ts

@@ -132,7 +132,10 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:nu
     return(locations)
 })
 
-export const fetchLocationById = withUser(async (user:AuthenticatedUser, locationID:string) => {
+/*
+ova metoda je zamijenjena sa jednostavnijom `fetchLocationById`, koja brže radi jer ne provjerava korisnika
+
+export const fetchLocationByUserAndId = withUser(async (user:AuthenticatedUser, locationID:string) => {
 
     noStore();
 
@@ -158,7 +161,34 @@ export const fetchLocationById = withUser(async (user:AuthenticatedUser, locatio
     }
 
     return(billLocation);
-})
+});
+*/
+
+export const fetchLocationById = async (locationID:string) => {
+
+    noStore();
+
+    const dbClient = await getDbClient();
+
+    // find a location with the given locationID
+    const billLocation = await dbClient.collection<BillingLocation>("lokacije")
+        .findOne(
+            { _id: locationID },
+            {
+                projection: {
+                    // don't include the attachment binary data in the response
+                    "bills.attachment.fileContentsBase64": 0,
+                },
+            }
+        );
+
+    if(!billLocation) {
+        console.log(`Location ${locationID} not found`);
+        return(null);
+    }
+
+    return(billLocation);
+};
 
 export const deleteLocationById = withUser(async (user:AuthenticatedUser, locationID:string, yearMonth:YearMonth) => {
 

app/lib/auth.ts

@@ -5,6 +5,23 @@ import { Session } from 'next-auth';
 import { AuthenticatedUser } from './types/next-auth';
 import { defaultLocale } from '../i18n';
 
+export const myAuth = () => {
+
+   // Ovo koristim u developmentu
+   //
+   // const session:Session = {
+   //    user: {
+   //       id: "123",
+   //       name: "Test User",
+   //    },
+   //    expires: "123",
+   // };
+   //
+   // return(Promise.resolve(session));
+
+   return(auth());
+}
+
 export const authConfig: NextAuthConfig = {
    callbacks: {
       // method verifies if the user is logged in or not
@@ -83,7 +100,7 @@ export const isAuthErrorMessage = (obj: any): obj is AuthErrorMessage => {
 }
 
 export const withUser = <T, A extends any[]>(fn: (user: AuthenticatedUser, ...args:A) => Promise<T>) => async (...args:A) => {
-   const session = await auth();
+   const session = await myAuth();
 
    if(!session) {
       throw new Error("Not authenticated")

app/ui/LocationCard.tsx

@@ -7,7 +7,7 @@ import { BillingLocation } from "../lib/db-types";
 import { formatYearMonth } from "../lib/format";
 import { formatCurrency } from "../lib/formatStrings";
 import Link from "next/link";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import { toast, useToast } from "react-toastify";
 
 export interface LocationCardProps {
@@ -17,13 +17,14 @@ export interface LocationCardProps {
 export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
 
     const t = useTranslations("home-page.location-card");
+    const currentLocale = useLocale();
 
     // sum all the billAmounts
     const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
 
     const handleCopyLinkClick = () => {
         // copy URL to clipboard
-        const url = `${window.location.origin}/share/location/${_id}`;
+        const url = `${window.location.origin}/${currentLocale}/share/location/${_id}`;
         navigator.clipboard.writeText(url);
 
         // use NextJS toast to notiy user that the link was copied

app/ui/ViewBillBadge.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react"
+import { Bill } from "@/app/lib/db-types"
+import Link from "next/link"
+import { DocumentIcon, TicketIcon } from "@heroicons/react/24/outline";
+import { useLocale } from "next-intl";
+
+export interface ViewBillBadgeProps {
+    locationId: string,
+    bill: Bill
+};
+
+export const ViewBillBadge: FC<ViewBillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid, attachment } }) => {
+
+    const currentLocale = useLocale();
+
+    return (
+        <Link href={`/${currentLocale}//share/bill/${locationId}-${billId}`} className={`badge badge-lg ${paid ? "badge-success" : " badge-outline"} ${!paid && !!attachment ? "btn-outline btn-success" : ""}  cursor-pointer`}>
+            <TicketIcon className="h-[1em] w-[1em]  inline-block mr-1" /> {name}
+        </Link>
+    );
+}

app/ui/ViewBillCard.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { DocumentIcon, CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
+import { Bill, BillingLocation } from "../lib/db-types";
+import React, { FC } from "react";
+import { updateOrAddBill } from "../lib/actions/billActions";
+import Link from "next/link";
+import { formatYearMonth } from "../lib/format";
+import { useLocale, useTranslations } from "next-intl";
+
+// 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, billYear:number|undefined, billMonth: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, billYear, billMonth, prevState, formData);
+}
+
+export interface ViewBillCardProps {
+    location: BillingLocation,
+    bill?: Bill,
+}
+
+export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
+
+    const t = useTranslations("bill-edit-form");
+    const locale = useLocale();
+
+    const { _id: billID, name, paid, attachment, notes, payedAmount, barcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
+
+    const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location;
+
+
+    return(
+    <div className="card card-compact card-bordered bg-base-100 shadow-s">
+        <div className="card-body">
+            <h2 className="card-title">{`${formatYearMonth(location.yearMonth)} ${location.name}`}</h2>
+            <span className="textarea textarea-bordered max-w-[400px] w-full grow">
+                <h3 className="text-xl dark:text-neutral-300">{name}</h3>
+            </span>
+            <p className={`flex textarea textarea-bordered max-w-[400px] w-full block ${paid ? "bg-green-950" : "bg-red-950"}`}>
+                <span className="font-bold uppercase">{t("paid-checkbox")}</span>
+                <span className="text-right inline-block grow">{paid ? <CheckCircleIcon className="h-[1em] w-[1em] ml-[.5em] text-2xl inline-block text-green-500"/> : <XCircleIcon className="h-[1em] w-[1em] text-2xl inline-block text-red-500" />}</span>
+            </p>
+
+            <p className="flex textarea textarea-bordered max-w-[400px] w-full block">
+                <span className="font-bold uppercase">{t("payed-amount")}</span>
+                <span className="text-right inline-block grow">{payedAmount ? payedAmount/100 : ""}</span>
+            </p>
+            <input type="hidden" name="barcodeImage" value={barcodeImage} />
+            {
+                notes ?
+                        <span className="textarea textarea-bordered max-w-[400px] w-full grow">
+                            <p className="font-bold uppercase">{t("notes-placeholder")}</p>
+                            <p className="leading-[1.4em]">
+                                {notes}
+                            </p>
+                        </span>
+                    : null
+            }
+            {
+                attachment ?
+                <span className="textarea textarea-bordered max-w-[400px] w-full grow">
+                    <p className="font-bold uppercase">{t("attachment")}</p>
+                    <Link href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center w-full max-w-[20em] text-nowrap truncate inline-block mt-2'>
+                        <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
+                            {decodeURIComponent(attachment.fileName)}
+                    </Link>
+                </span>
+                : null
+            }
+            {
+                barcodeImage ?
+                <div className="p-1">
+                    <label className="label p-2 grow bg-white">
+                        <img src={barcodeImage} className="grow sm:max-w-[350px]" alt="2D Barcode" />
+                    </label>
+                    <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
+                </div> : null
+            }
+
+            <div className="text-right">
+                <Link className="btn btn-neutral ml-3" href={`/share/location/${locationID}`}>{t("back-button")}</Link>
+            </div>
+
+        </div>
+    </div>);
+}

app/ui/ViewLocationCard.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { FC } from "react";
+import { BillingLocation } from "../lib/db-types";
+import { formatYearMonth } from "../lib/format";
+import { formatCurrency } from "../lib/formatStrings";
+import { useTranslations } from "next-intl";
+import { ViewBillBadge } from "./ViewBillBadge";
+
+export interface ViewLocationCardProps {
+    location: BillingLocation
+}
+
+export const ViewLocationCard:FC<ViewLocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
+
+    const t = useTranslations("home-page.location-card");
+
+    // sum all the billAmounts
+    const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
+
+    return(
+        <div data-key={_id } className="card card-compact card-bordered max-w-[30em] min-w-[350px] bg-base-100 border-1 border-neutral my-1">
+            <div className="card-body">
+                <h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
+                <div className="card-actions mt-[1em] mb-[1em]">
+                    {
+                        bills.map(bill => <ViewBillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
+                    }
+                </div>
+                {
+                    monthlyExpense > 0 ?
+                    <p>
+                        { t("payed-total-label") } <strong>${formatCurrency(monthlyExpense)}</strong>
+                    </p>
+                    : null
+                }
+            </div>
+        </div>);
+};

messages/en.json

@@ -54,7 +54,8 @@
     "location-card": {
       "edit-card-tooltip": "Edit realestate",
       "add-bill-button-tooltip": "Add a new bill",
-      "payed-total-label": "Payed total:"
+      "payed-total-label": "Payed total:",
+      "link-copy-message": "Link copied to clipboard"
     },
     "month-card": {
       "payed-total-label": "Total monthly expenditure:"
@@ -80,7 +81,9 @@
       "not-a-number": "Not a number",
       "negative-number": "Value must be a positive number",
       "form-error-message": "Form validation error. Please check the form and try again."
-    }
+    },
+    "attachment": "Attachment",
+    "back-button": "Back"
   },
   "location-delete-form": {
     "text": "Please confirm deletion of realestate “<strong>{name}</strong>””.",

messages/hr.json

@@ -54,7 +54,8 @@
     "location-card": {
       "edit-card-tooltip": "Izmjeni nekretninu",
       "add-bill-button-tooltip": "Dodaj novi račun",
-      "payed-total-label": "Ukupno plaćeno:"
+      "payed-total-label": "Ukupno plaćeno:",
+      "link-copy-message": "Link kopiran na clipboard"
     },
     "month-card": {
       "payed-total-label": "Ukupni mjesečni trošak:"
@@ -79,7 +80,9 @@
       "not-a-number": "Vrijednost mora biti brojka",
       "negative-number": "Vrijednost mora biti veća od nule",
       "form-error-message": "Forma nije ispravno popunjena. Molimo provjeri, pa pokušaj ponovno"
-    }
+    },
+    "attachment": "Privitak",
+    "back-button": "Nazad"
   },
   "location-delete-form": {
     "text": "Molim potvrdi brisanje nekretnine “<strong>{name}</strong>””.",

middleware.ts

@@ -3,12 +3,14 @@
  * @description hooks-up `next-auth` into the page processing pipeline
  */
 
-import { auth, authConfig } from '@/app/lib/auth'
+import { auth, authConfig, myAuth } from '@/app/lib/auth'
 import createIntlMiddleware from 'next-intl/middleware';
 import { NextRequest, NextResponse } from 'next/server';
 import { locales, defaultLocale } from '@/app/i18n';
+import { Session } from 'next-auth';
 
-const publicPages = ['/terms', '/policy', '/login'];
+// http://localhost:3000/share/location/675c41b227d0df76a35f106e
+const publicPages = ['/terms', '/policy', '/login', '/share/location/.*', '/share/bill/.*'];
  
 const intlMiddleware = createIntlMiddleware({
   locales,
@@ -30,7 +32,8 @@ export default async function middleware(req: NextRequest) {
   // based on https://github.com/nextauthjs/next-auth/discussions/8961
   // The official way of chaining middlewares in AuthJS v5 does not work and is not fully documented
   if (!isPublicPage) {
-    const session = await auth();
+
+    const session = await myAuth();
 
     if (!session) {
       const signInUrl = `${req.nextUrl.protocol}//${req.nextUrl.hostname}${req.nextUrl.port ? `:${req.nextUrl.port}` : ''}${authConfig.pages?.signIn as string}`;