LocationEditForm: migrated to client-side rendering

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

@@ -1,16 +1,53 @@
+"use client";
+
 import { notFound } from 'next/navigation';
-import { LocationEditForm } from '@/app/ui/LocationEditForm';
-import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { LocationEditForm, LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
+import { useEffect, useState } from 'react';
+import { WithId } from 'mongodb';
+import { BillingLocation } from '@/app/lib/db-types';
 
-export default async function LocationEditPage({ locationId }: { locationId:string }) {
 
-    const location = await fetchLocationById(locationId);
+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>;
+}
 
-    if (!location) {
-        return(notFound());
+export default function LocationEditPage({ locationId }: { locationId:string }) {
+
+    const [state, stateSet] = useState<{
+        status: 'loading' | 'error' | 'success';
+        location?: WithId<BillingLocation>;
+        error?: string;
+    }>({ status: 'loading' });
+
+    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(<LocationEditFormSkeleton />);
+        case "success":
+            if (!state.location) {
+                return(notFound());
+            }
+
+            return(<LocationEditForm location={state.location} />);
+        default:
+            return(<div>Error: Unknown status</div>);
     }
-
-    const result = <LocationEditForm location={location} />;
-    
-    return (result);
 }

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

@@ -1,15 +1,11 @@
-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 } }) {
 
     return (
         <Main>
-            <Suspense fallback={<LocationEditFormSkeleton />}>
-                <LocationEditPage  locationId={id} />
-            </Suspense>
+            <LocationEditPage locationId={id} />
         </Main>
     );
 }