Location Edit / Add / Delete migrated to client-side rendering

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

@@ -1,6 +1,11 @@
 import { parseYearMonth } from '@/app/lib/format';
-import LocationAddPage from './LocationAddPage';
 import { Main } from '@/app/ui/Main';
+import dynamic from 'next/dynamic'
+
+const LocationAddPage = dynamic(
+    () => import('./LocationAddPage'),
+    { ssr: false }
+  )
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
     return (

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

@@ -1,14 +1,54 @@
+"use client";
+
 import { notFound } from 'next/navigation';
-import { fetchLocationById } from '@/app/lib/actions/locationActions';
-import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
+import { LocationDeleteForm, LocationDeleteFormSkeleton } from '@/app/ui/LocationDeleteForm';
+import { WithId } from 'mongodb';
+import { BillingLocation } from '@/app/lib/db-types';
+import { useEffect, useState } from 'react';
 
-export const LocationDeletePage = async ({ locationId }: { locationId:string }) => {
+const fetchLocationById = async (locationId: string) => {
+    const response = await fetch(`/api/locations/by-id?id=${locationId}`);
+    const json = await response.json();
+    return json.location as WithId<BillingLocation>;
+}
 
-    const location = await fetchLocationById(locationId);
+const LocationDeletePage = ({ locationId }: { locationId:string }) => {
+    
+    const [state, stateSet] = useState<{
+        status: 'loading' | 'error' | 'success';
+        location?: WithId<BillingLocation>;
+        error?: string;
+    }>({ status: 'loading' });
 
-    if (!location) {
-        return(notFound());
+    useEffect(() => {
+
+        const fetchLocation = async () => {
+            try {
+                const location = await fetchLocationById(locationId);
+                stateSet({ location, status: 'success' });
+            } catch(error:any) {
+                stateSet({ status: 'error', error: error.message });
+            }
+        };
+
+        fetchLocation();
+        
+    }, [locationId]);
+
+    switch(state.status) {
+        case "error":
+            return(<div>Error: {state.error}</div>);
+        case "loading":
+            return(<LocationDeleteFormSkeleton />);
+        case "success":
+            if (!state.location) {
+                return(notFound());
+            }
+            
+            return(<LocationDeleteForm location={state.location} />);
+        default:
+            return(<div>Error: Unknown status</div>);
     }
+}
 
-    return (<LocationDeleteForm location={location} />);
-}
+export default LocationDeletePage;

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

@@ -1,17 +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';
+import dynamic from 'next/dynamic'
+
+const LocationDeletePage = dynamic(
+    () => import('./LocationDeletePage'),
+    { ssr: false }
+  )
+  
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
     return (
         <Main>
-            <Suspense fallback={<div>Loading...</div>}>
-                <LocationDeletePage locationId={id} />
-            </Suspense>
+            <LocationDeletePage locationId={id} />
         </Main>
     );
 }

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

@@ -1,5 +1,11 @@
-import LocationEditPage from './LocationEditPage';
 import { Main } from '@/app/ui/Main';
+import dynamic from 'next/dynamic'
+
+const LocationEditPage = dynamic(
+    () => import('./LocationEditPage'),
+    { ssr: false }
+  )
+  
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 

app/ui/LocationDeleteForm.tsx

@@ -29,11 +29,23 @@ export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
                         Please confirm deletion of location “<strong>{location.name}</strong>”.
                     </p>
                     <div className="pt-4 text-center">
-                        <button className="btn btn-primary">Confim</button>
-                        <Link className="btn btn-neutral ml-3" href={`/location/${location._id}/edit/`}>Cancel</Link>
+                        <button className="btn btn-primary w-[5.5em]">Confim</button>
+                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/location/${location._id}/edit/`}>Cancel</Link>
                     </div>
                 </form>
             </div>
         </div>
     );
 }
+
+
+export const LocationDeleteFormSkeleton:FC = () =>
+<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+<div className="card-body">
+    <p className="py-6 px-6"></p>
+    <div className="pt-4 text-center">
+        <div className="btn skeleton w-[5.5em]"></div>
+        <div className="btn ml-3 skeleton w-[5.5em]"></div>
+    </div>
+</div>
+</div>

app/ui/LocationEditForm.tsx

@@ -47,7 +47,7 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
                         ))}
                     </div>
 
-                    <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
+                    <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block h-[8em]" 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) => (
@@ -79,12 +79,12 @@ export const LocationEditFormSkeleton:FC = () =>
 {
     return(
         <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
-            <div className="card-body skeleton">
-                <div id="locationName" className="input input-bordered w-full"></div>
-                <div id="locationNotes" className="textarea textarea-bordered my-1 w-full block"></div>
+            <div className="card-body">
+                <div id="locationName" className="input w-full skeleton"></div>
+                <div id="locationNotes" className="textarea my-1 w-full block h-[8em] skeleton"></div>
                 <div className="pt-4">
-                    <div className="btn btn-neutral w-[5.5em]"></div>
-                    <div className="btn btn-neutral w-[5.5em] ml-3"></div>
+                    <div className="btn w-[5.5em] skeleton"></div>
+                    <div className="btn w-[5.5em] ml-3 skeleton"></div>
                 </div>
             </div>
         </div>