From cf97b3d4b57da42dd9be77f1144b2e21776dfc25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Tue, 6 Feb 2024 14:16:31 +0100
Subject: [PATCH] <suspense> added to LocationEditPage

---
 app/location/[id]/edit/LocationEditPage.tsx |  16 ++++
 app/location/[id]/edit/page.tsx             |  20 ++--
 app/ui/LocationEditForm.tsx                 | 101 +++++++++++---------
 3 files changed, 84 insertions(+), 53 deletions(-)
 create mode 100644 app/location/[id]/edit/LocationEditPage.tsx

diff --git a/app/location/[id]/edit/LocationEditPage.tsx b/app/location/[id]/edit/LocationEditPage.tsx
new file mode 100644
index 0000000..50d0b31
--- /dev/null
+++ b/app/location/[id]/edit/LocationEditPage.tsx
@@ -0,0 +1,16 @@
+import { notFound } from 'next/navigation';
+import { LocationEditForm } from '@/app/ui/LocationEditForm';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+
+export default async function LocationEditPage({ locationId }: { locationId:string }) {
+
+    const location = await fetchLocationById(locationId);
+
+    if (!location) {
+        return(notFound());
+    }
+
+    const result = <LocationEditForm location={location} yearMonth={location.yearMonth} />;
+    
+    return (result);
+}
\ No newline at end of file
diff --git a/app/location/[id]/edit/page.tsx b/app/location/[id]/edit/page.tsx
index b28cd30..251f944 100644
--- a/app/location/[id]/edit/page.tsx
+++ b/app/location/[id]/edit/page.tsx
@@ -1,13 +1,15 @@
-import { notFound } from 'next/navigation';
-import { LocationEditForm } from '@/app/ui/LocationEditForm';
-import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { Suspense } from 'react';
+import LocationEditPage from './LocationEditPage';
+import { Main } from '@/app/ui/Main';
+import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
-    const location = await fetchLocationById(id);
-
-    if (!location) {
-        return(notFound());
-    }
-    return (<LocationEditForm location={location} yearMonth={location.yearMonth} />);
+    return (
+        <Main>
+            <Suspense fallback={<LocationEditFormSkeleton />}>
+                <LocationEditPage  locationId={id} />
+            </Suspense>
+        </Main>
+    );
 }
\ No newline at end of file
diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx
index 97b5c49..387dca0 100644
--- a/app/ui/LocationEditForm.tsx
+++ b/app/ui/LocationEditForm.tsx
@@ -5,7 +5,6 @@ import { FC } from "react";
 import { BillingLocation, YearMonth } from "../lib/db-types";
 import { updateOrAddLocation } from "../lib/actions/locationActions";
 import { useFormState } from "react-dom";
-import { Main } from "./Main";
 import Link from "next/link";
 import { gotoHome } from "../lib/actions/navigationActions";
 
@@ -32,52 +31,66 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
     };
 
     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}>
+        <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}>
+                    {
+                        location && 
+                            <Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
+                                <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
+                            </Link>
+                    }
+                    <input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
+                    <div id="status-error" aria-live="polite" aria-atomic="true">
+                        {state.errors?.locationName &&
+                        state.errors.locationName.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                            {error}
+                            </p>
+                        ))}
+                    </div>
+
+                    <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
+                    <div id="status-error" aria-live="polite" aria-atomic="true">
+                        {state.errors?.locationNotes &&
+                        state.errors.locationNotes.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                            {error}
+                            </p>
+                        ))}
+                    </div>
+
+                    <div id="status-error" aria-live="polite" aria-atomic="true">
                         {
-                            location && 
-                                <Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
-                                    <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
-                                </Link>
+                            state.message &&
+                                <p className="mt-2 text-sm text-red-500">
+                                    {state.message}
+                                </p>
                         }
-                        <input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
-                        <div id="status-error" aria-live="polite" aria-atomic="true">
-                            {state.errors?.locationName &&
-                            state.errors.locationName.map((error: string) => (
-                                <p className="mt-2 text-sm text-red-500" key={error}>
-                                {error}
-                                </p>
-                            ))}
-                        </div>
+                    </div>
 
-                        <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
-                        <div id="status-error" aria-live="polite" aria-atomic="true">
-                            {state.errors?.locationNotes &&
-                            state.errors.locationNotes.map((error: string) => (
-                                <p className="mt-2 text-sm text-red-500" key={error}>
-                                {error}
-                                </p>
-                            ))}
-                        </div>
-
-                        <div id="status-error" aria-live="polite" aria-atomic="true">
-                            {
-                                state.message &&
-                                    <p className="mt-2 text-sm text-red-500">
-                                        {state.message}
-                                    </p>
-                            }
-                        </div>
-
-                        <div className="pt-4">
-                          <button className="btn btn-primary">Save</button>
-                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
-                        </div>
-                    </form>
-                </div>
+                    <div className="pt-4">
+                        <button className="btn btn-primary">Save</button>
+                        <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                    </div>
+                </form>
             </div>
-        </Main>
+        </div>
+    )
+}
+
+export const LocationEditFormSkeleton:FC = () =>
+{
+    return(
+        <div className="skeleton card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
+                <input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" />
+                <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis"></textarea>
+                <div className="pt-4">
+                    <button className="btn btn-primary">Save</button>
+                    <button type="button" className="btn btn-neutral ml-3">Cancel</button>
+                </div>
+            </div>
+        </div>
     )
 }