nextjs-rewrite (#5)
Reviewed-on: #5 Co-authored-by: David Gwilliam <dhgwilliam@gmail.com> Co-committed-by: David Gwilliam <dhgwilliam@gmail.com>
This commit was merged in pull request #5.
This commit is contained in:
@@ -0,0 +1,300 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import type { Player, Match } from "@prisma/client"
|
||||
|
||||
interface MatchEditorProps {
|
||||
tournamentId: number
|
||||
players: Player[]
|
||||
matches: Match[]
|
||||
}
|
||||
|
||||
interface MatchData {
|
||||
team1P1Id: number | null
|
||||
team1P2Id: number | null
|
||||
team2P1Id: number | null
|
||||
team2P2Id: number | null
|
||||
team1Score: number
|
||||
team2Score: number
|
||||
round: number
|
||||
table: string
|
||||
}
|
||||
|
||||
export default function MatchEditor({ tournamentId, players, matches }: MatchEditorProps) {
|
||||
const [formData, setFormData] = useState<MatchData>({
|
||||
team1P1Id: null,
|
||||
team1P2Id: null,
|
||||
team2P1Id: null,
|
||||
team2P2Id: null,
|
||||
team1Score: 0,
|
||||
team2Score: 0,
|
||||
round: 1,
|
||||
table: "Clubs",
|
||||
})
|
||||
const [error, setError] = useState("")
|
||||
const [success, setSuccess] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const tables = ["Clubs", "Hearts", "Diamonds", "Spades", "Stars"]
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
|
||||
const { name, value } = e.target
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: name.includes("Id") ? (value ? parseInt(value) : null) :
|
||||
name === "round" ? parseInt(value) :
|
||||
name === "team1Score" || name === "team2Score" ? parseInt(value) :
|
||||
value,
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError("")
|
||||
setSuccess("")
|
||||
|
||||
// Validate that all players are selected
|
||||
if (!formData.team1P1Id || !formData.team1P2Id || !formData.team2P1Id || !formData.team2P2Id) {
|
||||
setError("Please select all 4 players")
|
||||
return
|
||||
}
|
||||
|
||||
// Validate that players are unique
|
||||
const playerIds = [formData.team1P1Id, formData.team1P2Id, formData.team2P1Id, formData.team2P2Id]
|
||||
if (new Set(playerIds).size !== 4) {
|
||||
setError("All players must be unique")
|
||||
return
|
||||
}
|
||||
|
||||
// Validate scores (at least one team must have points)
|
||||
if (formData.team1Score === 0 && formData.team2Score === 0) {
|
||||
setError("At least one team must have points")
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/matches", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
eventId: tournamentId,
|
||||
team1P1Id: formData.team1P1Id,
|
||||
team1P2Id: formData.team1P2Id,
|
||||
team2P1Id: formData.team2P1Id,
|
||||
team2P2Id: formData.team2P2Id,
|
||||
team1Score: formData.team1Score,
|
||||
team2Score: formData.team2Score,
|
||||
round: formData.round,
|
||||
table: formData.table,
|
||||
}),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
setError(data.error || "Failed to record match")
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
setSuccess("Match recorded successfully!")
|
||||
setIsLoading(false)
|
||||
|
||||
// Reset form
|
||||
setFormData({
|
||||
team1P1Id: null,
|
||||
team1P2Id: null,
|
||||
team2P1Id: null,
|
||||
team2P2Id: null,
|
||||
team1Score: 0,
|
||||
team2Score: 0,
|
||||
round: formData.round,
|
||||
table: formData.table,
|
||||
})
|
||||
|
||||
// Reload the page to show updated matches
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1000)
|
||||
} catch (err) {
|
||||
setError("An error occurred. Please try again.")
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{error && (
|
||||
<div className="rounded-md bg-red-50 p-4">
|
||||
<div className="text-sm text-red-700">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="rounded-md bg-green-50 p-4">
|
||||
<div className="text-sm text-green-700">{success}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Round and Table Selection */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="round" className="block text-sm font-medium text-gray-700">
|
||||
Round
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="round"
|
||||
name="round"
|
||||
min="1"
|
||||
value={formData.round}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="table" className="block text-sm font-medium text-gray-700">
|
||||
Table
|
||||
</label>
|
||||
<select
|
||||
id="table"
|
||||
name="table"
|
||||
value={formData.table}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm"
|
||||
>
|
||||
{tables.map((table) => (
|
||||
<option key={table} value={table}>{table}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team 1 */}
|
||||
<div className="border border-gray-200 rounded-lg p-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Team 1 (Odds)</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="team1P1Id" className="block text-sm font-medium text-gray-700">
|
||||
Player 1
|
||||
</label>
|
||||
<select
|
||||
id="team1P1Id"
|
||||
name="team1P1Id"
|
||||
value={formData.team1P1Id || ""}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm"
|
||||
>
|
||||
<option value="">Select player...</option>
|
||||
{players.map((player) => (
|
||||
<option key={player.id} value={player.id}>{player.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="team1P2Id" className="block text-sm font-medium text-gray-700">
|
||||
Player 2
|
||||
</label>
|
||||
<select
|
||||
id="team1P2Id"
|
||||
name="team1P2Id"
|
||||
value={formData.team1P2Id || ""}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm"
|
||||
>
|
||||
<option value="">Select player...</option>
|
||||
{players.map((player) => (
|
||||
<option key={player.id} value={player.id}>{player.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label htmlFor="team1Score" className="block text-sm font-medium text-gray-700">
|
||||
Score
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="team1Score"
|
||||
name="team1Score"
|
||||
min="0"
|
||||
max="10"
|
||||
value={formData.team1Score}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team 2 */}
|
||||
<div className="border border-gray-200 rounded-lg p-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Team 2 (Evens)</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="team2P1Id" className="block text-sm font-medium text-gray-700">
|
||||
Player 1
|
||||
</label>
|
||||
<select
|
||||
id="team2P1Id"
|
||||
name="team2P1Id"
|
||||
value={formData.team2P1Id || ""}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm"
|
||||
>
|
||||
<option value="">Select player...</option>
|
||||
{players.map((player) => (
|
||||
<option key={player.id} value={player.id}>{player.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="team2P2Id" className="block text-sm font-medium text-gray-700">
|
||||
Player 2
|
||||
</label>
|
||||
<select
|
||||
id="team2P2Id"
|
||||
name="team2P2Id"
|
||||
value={formData.team2P2Id || ""}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm"
|
||||
>
|
||||
<option value="">Select player...</option>
|
||||
{players.map((player) => (
|
||||
<option key={player.id} value={player.id}>{player.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label htmlFor="team2Score" className="block text-sm font-medium text-gray-700">
|
||||
Score
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="team2Score"
|
||||
name="team2Score"
|
||||
min="0"
|
||||
max="10"
|
||||
value={formData.team2Score}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? "Recording..." : "Record Match"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user