knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nikola Derežić
2024-02-09 09:43:55 +01:00
parent 27b696faab
commit 9609f7da54
6 changed files with 36 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/location/[id]/add/LocationAddPage.tsx
View File

@@ -1,8 +1,6 @@
"use client";
import { LocationEditForm } from '@/app/ui/LocationEditForm'; import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { YearMonth } from '@/app/lib/db-types'; 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} />); return (<LocationEditForm yearMonth={yearMonth} />);
} }

7
app/location/[id]/add/page.tsx
View File

@@ -1,11 +1,6 @@
import { parseYearMonth } from '@/app/lib/format'; import { parseYearMonth } from '@/app/lib/format';
import LocationAddPage from './LocationAddPage';
import { Main } from '@/app/ui/Main'; 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 } }) { export default async function Page({ params:{ id } }: { params: { id:string } }) {
return ( return (

50
app/location/[id]/delete/LocationDeletePage.tsx
View File

@@ -1,54 +1,14 @@
"use client";
import { notFound } from 'next/navigation'; 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 [state, stateSet] = useState<{
status: 'loading' | 'error' | 'success';
location?: WithId<BillingLocation>;
error?: string;
}>({ status: 'loading' });
useEffect(() => {
const fetchLocation = async () => {
try {
const location = await fetchLocationById(locationId); const location = await fetchLocationById(locationId);
stateSet({ location, status: 'success' });
} catch(error:any) {
stateSet({ status: 'error', error: error.message });
}
};
fetchLocation(); if (!location) {
}, [locationId]);
switch(state.status) {
case "error":
return(<div>Error: {state.error}</div>);
case "loading":
return(<LocationDeleteFormSkeleton />);
case "success":
if (!state.location) {
return(notFound()); return(notFound());
} }
return(<LocationDeleteForm location={state.location} />); return (<LocationDeleteForm location={location} />);
default:
return(<div>Error: Unknown status</div>);
} }
}
export default LocationDeletePage;

23
app/location/[id]/delete/page.tsx
View File

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

51
app/location/[id]/edit/LocationEditPage.tsx
View File

@@ -1,53 +1,16 @@
"use client";
import { notFound } from 'next/navigation'; 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 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); const location = await fetchLocationById(locationId);
stateSet({ location, status: 'success' });
} catch(error:any) {
stateSet({ status: 'error', error: error.message });
}
};
fetchLocation(); if (!location) {
}, [locationId]);
switch(state.status) {
case "error":
return(<div>Error: {state.error}</div>);
case "loading":
return(<LocationEditFormSkeleton />);
case "success":
if (!state.location) {
return(notFound()); return(notFound());
} }
return(<LocationEditForm location={state.location} />); const result = <LocationEditForm location={location} />;
default:
return(<div>Error: Unknown status</div>); return (result);
}
} }

12
app/location/[id]/edit/page.tsx
View File

@@ -1,17 +1,15 @@
import { Suspense } from 'react';
import LocationEditPage from './LocationEditPage';
import { Main } from '@/app/ui/Main'; 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 } }) { export default async function Page({ params:{ id } }: { params: { id:string } }) {
return ( return (
<Main> <Main>
<Suspense fallback={<LocationEditFormSkeleton />}>
<LocationEditPage locationId={id} /> <LocationEditPage locationId={id} />
</Suspense>
</Main> </Main>
); );
} }