MOPC-App/src/app/(public)/apply/[slug]/page.tsx

66 lines
2.1 KiB
TypeScript

'use client'
import { useParams, useRouter } from 'next/navigation'
import { trpc } from '@/lib/trpc/client'
import { ApplyWizardDynamic } from '@/components/forms/apply-wizard-dynamic'
import { Loader2, AlertCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { DEFAULT_WIZARD_CONFIG } from '@/types/wizard-config'
import { toast } from 'sonner'
export default function RoundApplyPage() {
const params = useParams()
const router = useRouter()
const slug = params.slug as string
const { data: config, isLoading, error } = trpc.application.getConfig.useQuery(
{ slug, mode: 'round' },
{ retry: false }
)
const submitMutation = trpc.application.submit.useMutation({
onError: (error) => toast.error(error.message),
})
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/30">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
</div>
)
}
if (error || !config || config.mode !== 'round') {
return (
<div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-background to-muted/30">
<div className="text-center">
<AlertCircle className="mx-auto h-16 w-16 text-destructive mb-4" />
<h1 className="text-2xl font-bold mb-2">Application Not Available</h1>
<p className="text-muted-foreground mb-6">{error?.message ?? 'Not found'}</p>
<Button variant="outline" onClick={() => router.push('/')}>Return Home</Button>
</div>
</div>
)
}
return (
<ApplyWizardDynamic
mode="round"
config={config.wizardConfig ?? DEFAULT_WIZARD_CONFIG}
programName={config.program.name}
programYear={config.program.year}
roundId={config.round.id}
isOpen={config.round.isOpen}
submissionDeadline={config.round.submissionEndDate}
onSubmit={async (data) => {
await submitMutation.mutateAsync({
mode: 'round',
roundId: config.round.id,
data: data as any,
})
}}
isSubmitting={submitMutation.isPending}
/>
)
}