Merge branch 'release/1.8.0'

app/location/[id]/add/LocationAddPage.tsx

@@ -0,0 +1,9 @@
+import { notFound } from 'next/navigation';
+import { LocationEditForm } from '@/app/ui/LocationEditForm';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { YearMonth } from '@/app/lib/db-types';
+import { Main } from '@/app/ui/Main';
+
+export default async function LocationAddPage({ yearMonth }: { yearMonth:YearMonth }) {
+    return (<LocationEditForm yearMonth={yearMonth} />);
+}

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

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

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

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

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

@@ -1,14 +1,17 @@
 import { notFound } from 'next/navigation';
 import { fetchLocationById } from '@/app/lib/actions/locationActions';
 import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
+import { Main } from '@/app/ui/Main';
+import { Suspense } from 'react';
+import { LocationDeletePage } from './LocationDeletePage';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
-    const location = await fetchLocationById(id);
+    return (
-
+        <Main>
-    if (!location) {
+            <Suspense fallback={<div>Loading...</div>}>
-        return(notFound());
+                <LocationDeletePage locationId={id} />
-    }
+            </Suspense>
-
+        </Main>
-    return (<LocationDeleteForm location={location} />);
+    );
 }

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

@@ -10,7 +10,7 @@ export default async function LocationEditPage({ locationId }: { locationId:stri
         return(notFound());
     }
 
-    const result = <LocationEditForm location={location} yearMonth={location.yearMonth} />;
+    const result = <LocationEditForm location={location} />;
     
     return (result);
 }

app/ui/LocationDeleteForm.tsx

@@ -4,7 +4,6 @@ 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 { gotoUrl } from "../lib/actions/navigationActions";
 import Link from "next/link";
 
@@ -23,20 +22,18 @@ export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
     };
 
     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 card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
-                <div className="card-body">
+                <form action={dispatch}>
-                    <form action={dispatch}>
+                    <p className="py-6 px-6">
-                        <p className="py-6 px-6">
+                        Please confirm deletion of location “<strong>{location.name}</strong>”.
-                            Please confirm deletion of location “<strong>{location.name}</strong>”.
+                    </p>
-                        </p>
+                    <div className="pt-4 text-center">
-                        <div className="pt-4 text-center">
+                        <button className="btn btn-primary">Confim</button>
-                          <button className="btn btn-primary">Confim</button>
+                        <Link className="btn btn-neutral ml-3" href={`/location/${location._id}/edit/`}>Cancel</Link>
-                          <Link className="btn btn-neutral ml-3" href={`/location/${location._id}/edit/`}>Cancel</Link>
+                    </div>
-                        </div>
+                </form>
-                    </form>
-                </div>
             </div>
-        </Main>
+        </div>
-    )
+    );
 }

app/ui/LocationEditForm.tsx

@@ -12,10 +12,10 @@ export type LocationEditFormProps = {
     /** location which should be edited */
     location: BillingLocation,
     /** year adn month at a new billing location should be assigned */
-    yearMonth: undefined
+    yearMonth?: undefined
 } | {
     /** location which should be edited */
-    location: undefined,
+    location?: undefined,
     /** year adn month at a new billing location should be assigned */
     yearMonth: YearMonth
 }
@@ -23,7 +23,7 @@ export type LocationEditFormProps = {
 export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth }) =>
 {
     const initialState = { message: null, errors: {} };
-    const handleAction = updateOrAddLocation.bind(null, location?._id, yearMonth);
+    const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth);
     const [ state, dispatch ] = useFormState(handleAction, initialState);
 
     let { year, month } = location ? location.yearMonth : yearMonth;

docker-compose-deploy.yml

@@ -9,7 +9,7 @@ networks:
 
 services:
   web-app:
-    image: utility-bills-tracker:1.7.0
+    image: utility-bills-tracker:1.8.0
     networks:
       - traefik-network
       - mongo-network