From 9609f7da5486edc280667e4be3c69fb1085001f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= Date: Fri, 9 Feb 2024 09:43:55 +0100 Subject: [PATCH] Location Edit/Add/Delete form migrated back to server-side component --- app/location/[id]/add/LocationAddPage.tsx | 4 +- app/location/[id]/add/page.tsx | 7 +-- .../[id]/delete/LocationDeletePage.tsx | 56 +++--------------- app/location/[id]/delete/page.tsx | 23 ++++---- app/location/[id]/edit/LocationEditPage.tsx | 57 ++++--------------- app/location/[id]/edit/page.tsx | 14 ++--- 6 files changed, 36 insertions(+), 125 deletions(-) diff --git a/app/location/[id]/add/LocationAddPage.tsx b/app/location/[id]/add/LocationAddPage.tsx index 865f06f..9556980 100644 --- a/app/location/[id]/add/LocationAddPage.tsx +++ b/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 (); } \ No newline at end of file diff --git a/app/location/[id]/add/page.tsx b/app/location/[id]/add/page.tsx index 87d0ddf..3f032fc 100644 --- a/app/location/[id]/add/page.tsx +++ b/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 ( diff --git a/app/location/[id]/delete/LocationDeletePage.tsx b/app/location/[id]/delete/LocationDeletePage.tsx index ec8663c..7377733 100644 --- a/app/location/[id]/delete/LocationDeletePage.tsx +++ b/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 { WithId } from 'mongodb'; -import { BillingLocation } from '@/app/lib/db-types'; -import { useEffect, useState } from 'react'; +import { fetchLocationById } from '@/app/lib/actions/locationActions'; +import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm'; -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; -} +export const LocationDeletePage = async ({ locationId }: { locationId:string }) => { -const LocationDeletePage = ({ locationId }: { locationId:string }) => { - - const [state, stateSet] = useState<{ - status: 'loading' | 'error' | 'success'; - location?: WithId; - error?: string; - }>({ status: 'loading' }); + const location = await fetchLocationById(locationId); - 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(
Error: {state.error}
); - case "loading": - return(); - case "success": - if (!state.location) { - return(notFound()); - } - - return(); - default: - return(
Error: Unknown status
); + if (!location) { + return(notFound()); } -} -export default LocationDeletePage; \ No newline at end of file + return (); +} \ No newline at end of file diff --git a/app/location/[id]/delete/page.tsx b/app/location/[id]/delete/page.tsx index ca0db96..f4d8d44 100644 --- a/app/location/[id]/delete/page.tsx +++ b/app/location/[id]/delete/page.tsx @@ -1,17 +1,14 @@ -import { Main } from '@/app/ui/Main'; -import dynamic from 'next/dynamic' - -const LocationDeletePage = dynamic( - () => import('./LocationDeletePage'), - { ssr: false } - ) - +import { notFound } from 'next/navigation'; +import { fetchLocationById } from '@/app/lib/actions/locationActions'; +import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm'; export default async function Page({ params:{ id } }: { params: { id:string } }) { - return ( -
- -
- ); + const location = await fetchLocationById(id); + + if (!location) { + return(notFound()); + } + + return (); } \ No newline at end of file diff --git a/app/location/[id]/edit/LocationEditPage.tsx b/app/location/[id]/edit/LocationEditPage.tsx index df97fad..505f634 100644 --- a/app/location/[id]/edit/LocationEditPage.tsx +++ b/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 { useEffect, useState } from 'react'; -import { WithId } from 'mongodb'; -import { BillingLocation } from '@/app/lib/db-types'; +import { LocationEditForm } from '@/app/ui/LocationEditForm'; +import { fetchLocationById } from '@/app/lib/actions/locationActions'; +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; -} + const location = await fetchLocationById(locationId); -export default function LocationEditPage({ locationId }: { locationId:string }) { - - const [state, stateSet] = useState<{ - status: 'loading' | 'error' | 'success'; - location?: WithId; - 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(
Error: {state.error}
); - case "loading": - return(); - case "success": - if (!state.location) { - return(notFound()); - } - - return(); - default: - return(
Error: Unknown status
); + if (!location) { + return(notFound()); } + + const result = ; + + return (result); } \ No newline at end of file diff --git a/app/location/[id]/edit/page.tsx b/app/location/[id]/edit/page.tsx index 0fb2160..251f944 100644 --- a/app/location/[id]/edit/page.tsx +++ b/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' - -const LocationEditPage = dynamic( - () => import('./LocationEditPage'), - { ssr: false } - ) - +import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm'; export default async function Page({ params:{ id } }: { params: { id:string } }) { return (
- + }> + +
); } \ No newline at end of file