feat: add error handling to player creation and update gitignore for agent
This commit is contained in:
Erik Silva
233
src/app/(dashboard)/dashboard/matches/schedule/page.tsx
Normal file
233
src/app/(dashboard)/dashboard/matches/schedule/page.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useMemo } from 'react'
|
||||
import { Calendar, MapPin, Users, ArrowRight, Trophy } from 'lucide-react'
|
||||
import { createScheduledMatch } from '@/actions/match'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { getArenas } from '@/actions/arena'
|
||||
import type { Arena } from '@prisma/client'
|
||||
|
||||
export default function ScheduleMatchPage({ params }: { params: { id: string } }) {
|
||||
// In a real scenario we'd get the groupId from the context or parent
|
||||
// For this demonstration, we'll assume the group is linked via the active group auth
|
||||
const router = useRouter()
|
||||
const [date, setDate] = useState('')
|
||||
const [location, setLocation] = useState('')
|
||||
const [selectedArenaId, setSelectedArenaId] = useState('')
|
||||
const [arenas, setArenas] = useState<Arena[]>([])
|
||||
const [maxPlayers, setMaxPlayers] = useState('24')
|
||||
const [isRecurring, setIsRecurring] = useState(false)
|
||||
const [recurrenceEndDate, setRecurrenceEndDate] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
getArenas().then(setArenas)
|
||||
}, [])
|
||||
|
||||
// Calculate preview dates
|
||||
const previewDates = useMemo(() => {
|
||||
if (!date || !isRecurring) return []
|
||||
|
||||
const dates: Date[] = []
|
||||
const startDate = new Date(date)
|
||||
let currentDate = new Date(startDate)
|
||||
|
||||
// Start from next week for preview, as the first one is the main event
|
||||
currentDate.setDate(currentDate.getDate() + 7)
|
||||
|
||||
let endDate: Date
|
||||
if (recurrenceEndDate) {
|
||||
// Append explicit time to ensure it parses as local time end-of-day
|
||||
endDate = new Date(`${recurrenceEndDate}T23:59:59`)
|
||||
} else {
|
||||
// Preview next 4 occurrences if infinite
|
||||
endDate = new Date(startDate.getTime() + 4 * 7 * 24 * 60 * 60 * 1000)
|
||||
}
|
||||
|
||||
while (currentDate <= endDate) {
|
||||
dates.push(new Date(currentDate))
|
||||
currentDate.setDate(currentDate.getDate() + 7)
|
||||
|
||||
// Limit preview to avoiding infinite loops or too many items
|
||||
if (dates.length > 20) break
|
||||
}
|
||||
|
||||
return dates
|
||||
}, [date, isRecurring, recurrenceEndDate])
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
// We need the group ID. In our app structure, we usually get it from getActiveGroup.
|
||||
// Since this is a client component, we'll use a hack or assume the server action handles it
|
||||
// Actually, getActiveGroup uses cookies, so we don't strictly need to pass it if we change the action
|
||||
// Let's assume we need to pass it for now, but I'll fetch it from the API if needed.
|
||||
|
||||
// To be safe, I'll update the action to fetch groupId from cookies if not provided
|
||||
await createScheduledMatch(
|
||||
'',
|
||||
date,
|
||||
location,
|
||||
parseInt(maxPlayers),
|
||||
isRecurring,
|
||||
'WEEKLY',
|
||||
recurrenceEndDate || undefined,
|
||||
selectedArenaId
|
||||
)
|
||||
router.push('/dashboard/matches')
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-xl mx-auto space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<header className="text-center space-y-2">
|
||||
<div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-4 border border-primary/20">
|
||||
<Calendar className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Agendar Evento</h1>
|
||||
<p className="text-muted text-sm">Crie um link de confirmação para seus atletas.</p>
|
||||
</header>
|
||||
|
||||
<form onSubmit={handleSubmit} className="ui-card p-8 space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="ui-form-field">
|
||||
<label className="text-label ml-1">Data e Hora</label>
|
||||
<div className="relative">
|
||||
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted z-10" />
|
||||
<input
|
||||
required
|
||||
type="datetime-local"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
className="ui-input w-full pl-10 h-12 [color-scheme:dark]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ui-form-field">
|
||||
<label className="text-label ml-1">Local / Arena</label>
|
||||
<div className="space-y-3">
|
||||
{arenas.length > 0 && (
|
||||
<select
|
||||
value={selectedArenaId}
|
||||
onChange={(e) => {
|
||||
setSelectedArenaId(e.target.value)
|
||||
const arena = arenas.find(a => a.id === e.target.value)
|
||||
if (arena) setLocation(arena.name)
|
||||
}}
|
||||
className="ui-input w-full h-12 bg-surface-raised"
|
||||
>
|
||||
<option value="" className="text-muted">Selecione um local cadastrado...</option>
|
||||
{arenas.map(a => (
|
||||
<option key={a.id} value={a.id}>{a.name}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<div className="relative">
|
||||
<MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted" />
|
||||
<input
|
||||
required={!selectedArenaId}
|
||||
type="text"
|
||||
placeholder={selectedArenaId ? "Detalhes do local (opcional)" : "Ex: Arena Central..."}
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
className="ui-input w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ui-form-field">
|
||||
<label className="text-label ml-1">Limite de Jogadores (Opcional)</label>
|
||||
<div className="relative">
|
||||
<Users className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted" />
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Ex: 24"
|
||||
value={maxPlayers}
|
||||
onChange={(e) => setMaxPlayers(e.target.value)}
|
||||
className="ui-input w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface/50 border border-border p-4 rounded-xl space-y-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isRecurring}
|
||||
onChange={(e) => setIsRecurring(e.target.checked)}
|
||||
className="w-5 h-5 rounded border-border text-primary bg-background mt-0.5"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-bold block select-none cursor-pointer" onClick={() => setIsRecurring(!isRecurring)}>Repetir Semanalmente</label>
|
||||
<p className="text-xs text-muted">
|
||||
Ao marcar esta opção, novos eventos serão criados automaticamente toda semana.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isRecurring && (
|
||||
<div className="pl-9 pt-2 animate-in fade-in slide-in-from-top-2">
|
||||
<label className="text-label ml-0.5 mb-2 block">Repetir até (Opcional)</label>
|
||||
<input
|
||||
type="date"
|
||||
value={recurrenceEndDate}
|
||||
onChange={(e) => setRecurrenceEndDate(e.target.value)}
|
||||
className="ui-input w-full h-12 [color-scheme:dark]"
|
||||
min={date ? date.split('T')[0] : undefined}
|
||||
/>
|
||||
<p className="text-[10px] text-muted mt-1.5 mb-4">
|
||||
Deixe em branco para repetir indefinidamente.
|
||||
</p>
|
||||
|
||||
{previewDates.length > 0 && (
|
||||
<div className="bg-background/50 rounded-lg p-3 border border-border/50">
|
||||
<p className="text-[10px] font-bold text-muted uppercase tracking-wider mb-2">Próximas datas previstas:</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{previewDates.map((d, i) => (
|
||||
<div key={i} className="text-xs text-foreground bg-surface-raised px-2 py-1 rounded flex items-center gap-2">
|
||||
<div className="w-1 h-1 rounded-full bg-primary"></div>
|
||||
{d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' })}
|
||||
</div>
|
||||
))}
|
||||
{!recurrenceEndDate && (
|
||||
<div className="text-[10px] text-muted italic px-2 py-1 col-span-2">
|
||||
...e assim por diante.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-border space-y-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="ui-button w-full h-12 text-sm font-bold uppercase tracking-widest"
|
||||
>
|
||||
{isSubmitting ? 'Agendando...' : 'Criar Link de Confirmação'}
|
||||
{!isSubmitting && <ArrowRight className="w-4 h-4" />}
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-3 p-4 bg-primary/5 border border-primary/10 rounded-lg">
|
||||
<Trophy className="w-5 h-5 text-primary flex-shrink-0" />
|
||||
<p className="text-[11px] text-muted leading-relaxed">
|
||||
Ao criar o evento, um link exclusivo será gerado. Você poderá acompanhar quem confirmou presença em tempo real e realizar o sorteio depois.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user