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

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>
     );
 }