remco
e85e4d74ea
Local Build and Deploy / deploy (push) Successful in 1m11s
revert style: clean up code with prettier and eslint
100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { Plus } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { addEventWinner } from '@/actions/events'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { useServerAction } from '@/hooks/use-server-action'
|
|
|
|
interface Winner {
|
|
id: number
|
|
userId: number
|
|
position: number
|
|
username: string
|
|
createdAt: Date
|
|
}
|
|
|
|
interface Props {
|
|
eventId: number
|
|
winners: Winner[]
|
|
}
|
|
|
|
export function EventWinnersManager({ eventId, winners }: Props) {
|
|
const { run, isPending } = useServerAction()
|
|
const [showForm, setShowForm] = useState(false)
|
|
const [userId, setUserId] = useState('')
|
|
const [position, setPosition] = useState(winners.length + 1)
|
|
|
|
function handleAdd(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
run(() => addEventWinner({ eventId, userId: Number(userId), position }), {
|
|
successMessage: 'Winner added!',
|
|
onSuccess: () => {
|
|
setShowForm(false)
|
|
setUserId('')
|
|
setPosition(position + 1)
|
|
},
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>Winners</CardTitle>
|
|
<Button size="sm" onClick={() => setShowForm(!showForm)}>
|
|
<Plus className="h-4 w-4 mr-1" /> Add Winner
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{showForm && (
|
|
<form onSubmit={handleAdd} className="border rounded-lg p-4 flex gap-3 items-end">
|
|
<div className="space-y-1">
|
|
<Label>User ID</Label>
|
|
<Input
|
|
type="number"
|
|
value={userId}
|
|
onChange={(e) => setUserId(e.target.value)}
|
|
required
|
|
placeholder="12345"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>Position</Label>
|
|
<Input
|
|
type="number"
|
|
value={position}
|
|
onChange={(e) => setPosition(Number(e.target.value))}
|
|
min={1}
|
|
/>
|
|
</div>
|
|
<Button type="submit" size="sm" disabled={isPending}>
|
|
Add
|
|
</Button>
|
|
</form>
|
|
)}
|
|
|
|
{winners.length === 0 && !showForm && (
|
|
<p className="text-sm text-muted-foreground text-center py-4">No winners yet.</p>
|
|
)}
|
|
|
|
<div className="divide-y">
|
|
{winners.map((w) => (
|
|
<div key={w.id} className="flex items-center gap-3 py-2.5">
|
|
<span className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold">
|
|
{w.position}
|
|
</span>
|
|
<span className="font-medium text-sm">{w.username}</span>
|
|
<span className="text-xs text-muted-foreground ml-auto">
|
|
{new Date(w.createdAt).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|