Location Edit/Add/Delete form migrated back to server-side component

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

@@ -1,8 +1,6 @@
-"use client";
-
 import { LocationEditForm } from '@/app/ui/LocationEditForm';
 import { YearMonth } from '@/app/lib/db-types';
 
-export default function LocationAddPage({ yearMonth }: { yearMonth:YearMonth }) {
+export default async function LocationAddPage({ yearMonth }: { yearMonth:YearMonth }) {
     return (<LocationEditForm yearMonth={yearMonth} />);
 }

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

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

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

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

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

@@ -1,53 +1,16 @@
-"use client";
-
 import { notFound } from 'next/navigation';
-import { LocationEditForm, LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
+import { LocationEditForm } from '@/app/ui/LocationEditForm';
-import { useEffect, useState } from 'react';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
-import { WithId } from 'mongodb';
-import { BillingLocation } from '@/app/lib/db-types';
 
+export default async function LocationEditPage({ locationId }: { locationId:string }) {
 
-const fetchLocationById = async (locationId: string) => {
+    const location = await fetchLocationById(locationId);
-    const response = await fetch(`/api/locations/by-id?id=${locationId}`);
-    const json = await response.json();
-    return json.location as WithId<BillingLocation>;
-}
 
-export default function LocationEditPage({ locationId }: { locationId:string }) {
+    if (!location) {
-
+        return(notFound());
-    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,17 +1,15 @@
+import { Suspense } from 'react';
+import LocationEditPage from './LocationEditPage';
 import { Main } from '@/app/ui/Main';
-import dynamic from 'next/dynamic'
+import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
-
-const LocationEditPage = dynamic(
-    () => import('./LocationEditPage'),
-    { ssr: false }
-  )
-  
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
     return (
         <Main>
-            <LocationEditPage locationId={id} />
+            <Suspense fallback={<LocationEditFormSkeleton />}>
+                <LocationEditPage  locationId={id} />
+            </Suspense>
         </Main>
     );
 }