LocationEditForm: migrated to client-side rendering

app/api/locations/by-id/route.ts

@@ -0,0 +1,13 @@
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import type { NextApiRequest } from 'next'
+import { NextResponse } from 'next/server';
+ 
+export const GET = async (
+  req: NextApiRequest,
+) => {
+  const url = new URL(req.url as string);
+  const locationId = url.searchParams.get('id');
+  const location = await fetchLocationById(locationId as string);
+
+  return NextResponse.json({ location });
+}

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 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>;
+}
+
+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 });
+            }
+        };
 
-    if (!location) {
+        fetchLocation();
+        
+    }, [locationId]);
+
+    switch(state.status) {
+        case "error":
+            return(<div>Error: {state.error}</div>);
+        case "loading":
+            return(<LocationEditFormSkeleton />);
+        case "success":
+            if (!state.location) {
                 return(notFound());
             }
 
-    const result = <LocationEditForm location={location} />;
-    
-    return (result);
+            return(<LocationEditForm location={state.location} />);
+        default:
+            return(<div>Error: Unknown status</div>);
+    }
 }

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

app/ui/LocationEditForm.tsx

@@ -65,10 +65,9 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
                                 </p>
                         }
                     </div>
-
                     <div className="pt-4">
-                        <button className="btn btn-primary">Save</button>
-                        <Link className="btn btn-neutral ml-3" href={`/?year=${year}&month=${month}`}>Cancel</Link>
+                        <button className="btn btn-primary w-[5.5em]">Save</button>
+                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/?year=${year}&month=${month}`}>Cancel</Link>
                     </div>
                 </form>
             </div>
@@ -79,10 +78,14 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
 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="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="pt-4">
+                    <div className="btn btn-neutral w-[5.5em]"></div>
+                    <div className="btn btn-neutral w-[5.5em] ml-3"></div>
+                </div>
             </div>
         </div>
     )