54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
"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';
|
|
|
|
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>;
|
|
}
|
|
|
|
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);
|
|
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; |