Erol Haagenrud
d8d1cf39ae
Ekte parallell til frittstående runders RoundMessages (ADR-044), ikke en utvidelse av Banter Board (ADR-025) -- ny org-scopet (RLS) tournament_round_message-tabell, én tråd per turneringsrunde. Reaksjoner og trådede kommentarer med via eksisterende PostEngagement-komponent uendret; @-tagging og sanntid bevisst utenfor v1 (se ADR-102). Migrasjon 090 IKKE kjørt mot ekte teecup_db ennå -- venter på brukerbekreftelse før utrulling. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
561 lines
21 KiB
TypeScript
561 lines
21 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react"
|
|
import { Camera, Clock, ImagePlus, RefreshCw, Send, Trash2, WifiOff, X } from "lucide-react"
|
|
import { PostEngagement, type ReactionSummary } from "./post-engagement"
|
|
import { cn } from "@/lib/utils"
|
|
import { enqueueWrite, flushQueue, queueCount } from "@/lib/offline-queue"
|
|
|
|
/**
|
|
* Rundespesifikk kommentartråd for org-turneringer (ADR-102) -- ekte
|
|
* parallell til `RoundMessages` (frittstående runder), IKKE en utvidelse
|
|
* av den eksisterende hele-turnering-brede Banter Board (ADR-025).
|
|
*
|
|
* Bevisst UTENFOR omfang i v1 (se ADR-102): ingen @-tagging (samme
|
|
* presedens som team-chat.tsx/public-tournament.tsx -- PostEngagement
|
|
* sin `roundId`-prop utelates bevisst, komposereren er en vanlig
|
|
* tekstboks), ingen sanntid/WebSocket-piggyback (denne autentiserte
|
|
* visningen har ingen WS-tilkobling i det hele tatt ennå -- eget,
|
|
* uprioritert gap). Refetches ved mount + en manuell "Oppdater"-knapp.
|
|
*/
|
|
|
|
export type ApiTournamentRoundMessage = {
|
|
id: string
|
|
tournament_round_id: string
|
|
author_user_id: string
|
|
author_display_name: string
|
|
body: string | null
|
|
image_url: string | null
|
|
created_at: string // ISO 8601
|
|
reactions: ReactionSummary[]
|
|
comment_count: number
|
|
}
|
|
|
|
// Et lokalt, ikke-synkronisert innlegg (offline-kø), speiler round-messages.tsx.
|
|
type PendingMessage = ApiTournamentRoundMessage & { _clientMessageId: string }
|
|
|
|
export type TournamentRoundMessagesProps = {
|
|
base: string // `/orgs/{organizationId}/tournaments/{tournamentId}`
|
|
roundId: string
|
|
currentUserId: string
|
|
isOrgAdmin: boolean
|
|
}
|
|
|
|
const ACCEPTED_IMAGE_TYPES = "image/*"
|
|
const MAX_IMAGE_HEIGHT = 300
|
|
const MAX_UPLOAD_BYTES = 20 * 1024 * 1024
|
|
|
|
async function readErrorMessage(res: Response, fallback: string): Promise<string> {
|
|
try {
|
|
const data = await res.json()
|
|
const message = data?.detail?.message
|
|
if (typeof message === "string" && message.length > 0) return message
|
|
} catch {
|
|
// Ikke JSON -- bruk fallback.
|
|
}
|
|
return fallback
|
|
}
|
|
|
|
function formatRelativeTime(iso: string): { label: string; title: string } {
|
|
const then = new Date(iso)
|
|
const title = then.toLocaleString("nb-NO", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})
|
|
|
|
const diffMs = Date.now() - then.getTime()
|
|
const diffSec = Math.round(diffMs / 1000)
|
|
const diffMin = Math.round(diffSec / 60)
|
|
const diffHour = Math.round(diffMin / 60)
|
|
const diffDay = Math.round(diffHour / 24)
|
|
|
|
let label: string
|
|
if (diffSec < 45) label = "nå nettopp"
|
|
else if (diffMin < 60) label = `for ${diffMin} min siden`
|
|
else if (diffHour < 24) label = `for ${diffHour} t siden`
|
|
else if (diffDay === 1) label = "i går"
|
|
else if (diffDay < 7) label = `for ${diffDay} dager siden`
|
|
else
|
|
label = then.toLocaleDateString("nb-NO", {
|
|
day: "numeric",
|
|
month: "short",
|
|
})
|
|
|
|
return { label, title }
|
|
}
|
|
|
|
export function TournamentRoundMessages({ base, roundId, currentUserId, isOrgAdmin }: TournamentRoundMessagesProps) {
|
|
const messagesUrl = `${base}/rounds/${roundId}/messages`
|
|
const [messages, setMessages] = useState<ApiTournamentRoundMessage[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [loadError, setLoadError] = useState<string | null>(null)
|
|
|
|
const [body, setBody] = useState("")
|
|
const [imageFile, setImageFile] = useState<File | null>(null)
|
|
const [imagePreview, setImagePreview] = useState<string | null>(null)
|
|
const [posting, setPosting] = useState(false)
|
|
const [postError, setPostError] = useState<string | null>(null)
|
|
const [deletingId, setDeletingId] = useState<string | null>(null)
|
|
|
|
// Egen kø-navnerom -- unngår kollisjon med en evt. fremtidig hull-score-kø
|
|
// på samme runde (gap-punkt 1, ikke koblet på ennå), selv om begge ville
|
|
// delt samme IndexedDB-database.
|
|
const messagesMatchId = `${base}:${roundId}:tournament-messages`
|
|
const [isOnline, setIsOnline] = useState(true)
|
|
const [pendingCount, setPendingCount] = useState(0)
|
|
const [syncingMessages, setSyncingMessages] = useState(false)
|
|
const [pendingMessages, setPendingMessages] = useState<PendingMessage[]>([])
|
|
|
|
const fileInputRef = useRef<HTMLInputElement | null>(null)
|
|
const cameraInputRef = useRef<HTMLInputElement | null>(null)
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true)
|
|
setLoadError(null)
|
|
try {
|
|
const res = await fetch(messagesUrl, { credentials: "include" })
|
|
if (!res.ok) throw new Error(`Status ${res.status}`)
|
|
const data: ApiTournamentRoundMessage[] = await res.json()
|
|
setMessages(data)
|
|
} catch {
|
|
setLoadError("Kunne ikke laste kommentarene. Prøv å laste siden på nytt.")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [messagesUrl])
|
|
|
|
useEffect(() => {
|
|
void load()
|
|
}, [load])
|
|
|
|
const flushPendingMessages = useCallback(async () => {
|
|
if (syncingMessages) return
|
|
setSyncingMessages(true)
|
|
try {
|
|
const outcomes = await flushQueue(messagesMatchId)
|
|
if (outcomes.length === 0) return
|
|
for (const o of outcomes) {
|
|
const sentBody = o.entry.body as Record<string, unknown>
|
|
const clientMessageId = sentBody.client_message_id as string | undefined
|
|
setPendingMessages((prev) => {
|
|
const match = prev.find((m) => m._clientMessageId === clientMessageId)
|
|
if (match?.image_url) URL.revokeObjectURL(match.image_url)
|
|
return prev.filter((m) => m._clientMessageId !== clientMessageId)
|
|
})
|
|
}
|
|
const failed = outcomes.filter((o) => !o.ok)
|
|
if (failed.length > 0) {
|
|
setPostError(
|
|
`${failed.length} ${failed.length === 1 ? "kommentar" : "kommentarer"} kunne ikke synkroniseres: ${failed[0].message}`,
|
|
)
|
|
}
|
|
setPendingCount(await queueCount(messagesMatchId))
|
|
await load()
|
|
} finally {
|
|
setSyncingMessages(false)
|
|
}
|
|
}, [messagesMatchId, syncingMessages, load])
|
|
|
|
useEffect(() => {
|
|
setIsOnline(navigator.onLine)
|
|
function handleOnline() {
|
|
setIsOnline(true)
|
|
void flushPendingMessages()
|
|
}
|
|
function handleOffline() {
|
|
setIsOnline(false)
|
|
}
|
|
window.addEventListener("online", handleOnline)
|
|
window.addEventListener("offline", handleOffline)
|
|
return () => {
|
|
window.removeEventListener("online", handleOnline)
|
|
window.removeEventListener("offline", handleOffline)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [messagesMatchId])
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
queueCount(messagesMatchId)
|
|
.then((count) => {
|
|
if (cancelled) return
|
|
setPendingCount(count)
|
|
if (count > 0 && navigator.onLine) void flushPendingMessages()
|
|
})
|
|
.catch(() => {})
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [messagesMatchId])
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (imagePreview) URL.revokeObjectURL(imagePreview)
|
|
}
|
|
}, [imagePreview])
|
|
|
|
const clearSelectedImage = useCallback(() => {
|
|
setImageFile(null)
|
|
setImagePreview((prev) => {
|
|
if (prev) URL.revokeObjectURL(prev)
|
|
return null
|
|
})
|
|
if (fileInputRef.current) fileInputRef.current.value = ""
|
|
if (cameraInputRef.current) cameraInputRef.current.value = ""
|
|
}, [])
|
|
|
|
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const file = e.target.files?.[0]
|
|
if (!file) return
|
|
if (file.size > MAX_UPLOAD_BYTES) {
|
|
setPostError("Bildet er for stort (maks 20 MB). Velg et mindre bilde.")
|
|
e.target.value = ""
|
|
return
|
|
}
|
|
setPostError(null)
|
|
setImageFile(file)
|
|
setImagePreview((prev) => {
|
|
if (prev) URL.revokeObjectURL(prev)
|
|
return URL.createObjectURL(file)
|
|
})
|
|
}
|
|
|
|
const trimmedBody = body.trim()
|
|
const canPost = (trimmedBody.length > 0 || imageFile != null) && !posting
|
|
|
|
async function queueMessageOffline(fields: Record<string, string | Blob>, clientMessageId: string) {
|
|
await enqueueWrite({
|
|
url: messagesUrl,
|
|
method: "POST",
|
|
body: fields,
|
|
matchId: messagesMatchId,
|
|
isMultipart: true,
|
|
})
|
|
const pendingImageUrl = imageFile ? URL.createObjectURL(imageFile) : null
|
|
setPendingMessages((prev) => [
|
|
{
|
|
id: `pending-${clientMessageId}`,
|
|
tournament_round_id: roundId,
|
|
author_user_id: currentUserId,
|
|
author_display_name: "Du",
|
|
body: trimmedBody || null,
|
|
image_url: pendingImageUrl,
|
|
created_at: new Date().toISOString(),
|
|
reactions: [],
|
|
comment_count: 0,
|
|
_clientMessageId: clientMessageId,
|
|
},
|
|
...prev,
|
|
])
|
|
setPendingCount((c) => c + 1)
|
|
setBody("")
|
|
clearSelectedImage()
|
|
}
|
|
|
|
async function handlePost(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
if (!canPost) return
|
|
|
|
setPosting(true)
|
|
setPostError(null)
|
|
const clientMessageId = crypto.randomUUID()
|
|
const fields: Record<string, string | Blob> = { client_message_id: clientMessageId }
|
|
if (trimmedBody.length > 0) fields.body = trimmedBody
|
|
if (imageFile) fields.image = imageFile
|
|
|
|
if (!navigator.onLine) {
|
|
await queueMessageOffline(fields, clientMessageId)
|
|
setPosting(false)
|
|
return
|
|
}
|
|
|
|
try {
|
|
const formData = new FormData()
|
|
for (const [k, v] of Object.entries(fields)) formData.append(k, v)
|
|
|
|
const res = await fetch(messagesUrl, {
|
|
method: "POST",
|
|
credentials: "include",
|
|
body: formData,
|
|
})
|
|
if (!res.ok) {
|
|
setPostError(await readErrorMessage(res, "Kunne ikke poste kommentaren. Prøv igjen."))
|
|
return
|
|
}
|
|
|
|
const created: ApiTournamentRoundMessage = await res.json()
|
|
setMessages((prev) => [created, ...prev])
|
|
setBody("")
|
|
clearSelectedImage()
|
|
} catch {
|
|
await queueMessageOffline(fields, clientMessageId)
|
|
} finally {
|
|
setPosting(false)
|
|
}
|
|
}
|
|
|
|
async function handleDelete(id: string) {
|
|
setDeletingId(id)
|
|
setPostError(null)
|
|
try {
|
|
const res = await fetch(`${messagesUrl}/${id}`, {
|
|
method: "DELETE",
|
|
credentials: "include",
|
|
})
|
|
if (res.status !== 204) throw new Error(`Status ${res.status}`)
|
|
setMessages((prev) => prev.filter((m) => m.id !== id))
|
|
} catch {
|
|
setPostError("Kunne ikke slette kommentaren. Prøv igjen.")
|
|
} finally {
|
|
setDeletingId(null)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="flex flex-col gap-4" aria-label="Kommentarer og bilder fra turneringsrunden">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<h3 className="text-sm font-bold text-foreground">Kommentarer</h3>
|
|
<button
|
|
type="button"
|
|
onClick={() => void load()}
|
|
disabled={loading}
|
|
className="inline-flex h-9 items-center gap-1.5 rounded-lg px-2.5 text-xs font-semibold text-muted-foreground outline-none transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
|
|
>
|
|
<RefreshCw aria-hidden="true" className={cn("size-3.5", loading && "animate-spin")} />
|
|
Oppdater
|
|
</button>
|
|
</div>
|
|
|
|
{/* Composer */}
|
|
<form
|
|
onSubmit={handlePost}
|
|
className="flex flex-col gap-3 rounded-2xl border border-border bg-card p-4 sm:p-5"
|
|
>
|
|
<label htmlFor="tournament-round-message-body" className="sr-only">
|
|
Skriv en kommentar
|
|
</label>
|
|
<textarea
|
|
id="tournament-round-message-body"
|
|
value={body}
|
|
onChange={(e) => {
|
|
setBody(e.target.value)
|
|
if (postError) setPostError(null)
|
|
}}
|
|
placeholder="Skriv en kommentar..."
|
|
rows={3}
|
|
className="w-full resize-y rounded-xl border border-border bg-background px-3 py-2.5 text-base text-foreground outline-none transition-all duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
|
|
/>
|
|
|
|
{imagePreview && (
|
|
<div className="flex items-center gap-3 rounded-xl border border-border bg-muted p-2.5">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={imagePreview || "/placeholder.svg"}
|
|
alt="Forhåndsvisning av valgt bilde"
|
|
className="size-14 shrink-0 rounded-lg object-cover"
|
|
/>
|
|
<span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
|
|
{imageFile?.name}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={clearSelectedImage}
|
|
className="inline-flex h-11 min-w-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground outline-none transition-all duration-200 ease-in-out hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
|
|
>
|
|
<X aria-hidden="true" className="size-4" />
|
|
Fjern
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<input
|
|
ref={cameraInputRef}
|
|
type="file"
|
|
accept={ACCEPTED_IMAGE_TYPES}
|
|
capture="environment"
|
|
onChange={handleFileChange}
|
|
className="sr-only"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => cameraInputRef.current?.click()}
|
|
className="inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 text-base font-medium text-foreground outline-none transition-all duration-200 ease-in-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
|
|
>
|
|
<Camera aria-hidden="true" className="size-5" />
|
|
Ta bilde
|
|
</button>
|
|
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept={ACCEPTED_IMAGE_TYPES}
|
|
onChange={handleFileChange}
|
|
className="sr-only"
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 text-base font-medium text-foreground outline-none transition-all duration-200 ease-in-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
|
|
>
|
|
<ImagePlus aria-hidden="true" className="size-5" />
|
|
Velg fra galleri
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={!canPost}
|
|
className="inline-flex h-11 min-w-11 items-center justify-center gap-2 rounded-lg bg-primary px-5 text-base font-medium text-primary-foreground outline-none transition-all duration-200 ease-in-out hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
|
|
>
|
|
{posting ? (
|
|
<span
|
|
aria-hidden="true"
|
|
className="size-4 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground"
|
|
/>
|
|
) : (
|
|
<Send aria-hidden="true" className="size-5" />
|
|
)}
|
|
{posting ? "Poster..." : "Post"}
|
|
</button>
|
|
</div>
|
|
|
|
{postError && (
|
|
<p role="alert" className="text-sm font-medium text-destructive">
|
|
{postError}
|
|
</p>
|
|
)}
|
|
</form>
|
|
|
|
{!isOnline && (
|
|
<div className="flex items-center gap-2 rounded-2xl border border-amber-300 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
|
|
<WifiOff aria-hidden="true" className="size-4 shrink-0" />
|
|
<span>Du er offline. Kommentaren lagres lokalt og postes automatisk når du er tilbake på nett.</span>
|
|
</div>
|
|
)}
|
|
{pendingCount > 0 && (
|
|
<div className="flex items-center justify-between gap-2 rounded-2xl border border-border bg-card px-4 py-3 text-sm font-medium text-foreground">
|
|
<span>
|
|
{pendingCount} {pendingCount === 1 ? "kommentar venter" : "kommentarer venter"} på synkronisering.
|
|
</span>
|
|
{isOnline && (
|
|
<button
|
|
type="button"
|
|
onClick={() => void flushPendingMessages()}
|
|
disabled={syncingMessages}
|
|
className="inline-flex shrink-0 items-center gap-1 font-semibold text-primary disabled:opacity-50"
|
|
>
|
|
<RefreshCw aria-hidden="true" className={cn("size-3.5", syncingMessages && "animate-spin")} />
|
|
Synkroniser nå
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center py-12" aria-live="polite" aria-busy="true">
|
|
<span
|
|
aria-hidden="true"
|
|
className="size-8 animate-spin rounded-full border-4 border-primary/20 border-t-primary"
|
|
/>
|
|
<span className="sr-only">Laster kommentarer...</span>
|
|
</div>
|
|
) : loadError ? (
|
|
<p role="alert" className="rounded-2xl border border-border bg-card p-5 text-base text-destructive">
|
|
{loadError}
|
|
</p>
|
|
) : pendingMessages.length === 0 && messages.length === 0 ? (
|
|
<p className="rounded-2xl border border-border bg-card p-5 text-base text-muted-foreground">
|
|
Ingen kommentarer ennå — vær den første til å dele et bilde eller en kommentar fra runden.
|
|
</p>
|
|
) : (
|
|
<ul className="divide-y divide-border overflow-hidden rounded-2xl border border-border bg-card">
|
|
{[...pendingMessages, ...messages].map((m) => {
|
|
const isPending = "_clientMessageId" in m
|
|
const canDelete = !isPending && (m.author_user_id === currentUserId || isOrgAdmin)
|
|
const isDeleting = deletingId === m.id
|
|
const { label, title } = formatRelativeTime(m.created_at)
|
|
return (
|
|
<li key={m.id} className="flex flex-col gap-3 p-4 sm:p-5">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex min-w-0 flex-col">
|
|
<span className="truncate text-base font-semibold text-foreground">
|
|
{m.author_display_name}
|
|
</span>
|
|
{isPending ? (
|
|
<span className="inline-flex items-center gap-1 text-sm font-medium text-muted-foreground">
|
|
<Clock aria-hidden="true" className="size-3.5 shrink-0" />
|
|
Venter på synk
|
|
</span>
|
|
) : (
|
|
<time
|
|
dateTime={m.created_at}
|
|
title={title}
|
|
className="text-sm font-medium text-muted-foreground"
|
|
>
|
|
{label}
|
|
</time>
|
|
)}
|
|
</div>
|
|
|
|
{canDelete && (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleDelete(m.id)}
|
|
disabled={isDeleting}
|
|
className="inline-flex h-11 min-w-11 shrink-0 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive outline-none transition-all duration-200 ease-in-out hover:bg-destructive/10 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
|
|
>
|
|
{isDeleting ? (
|
|
<span
|
|
aria-hidden="true"
|
|
className="size-4 animate-spin rounded-full border-2 border-destructive/30 border-t-destructive"
|
|
/>
|
|
) : (
|
|
<Trash2 aria-hidden="true" className="size-4" />
|
|
)}
|
|
Slett
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{m.image_url && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={m.image_url || "/placeholder.svg"}
|
|
alt={`Bilde delt av ${m.author_display_name}`}
|
|
style={{ maxHeight: MAX_IMAGE_HEIGHT }}
|
|
className="w-full rounded-xl object-cover"
|
|
/>
|
|
)}
|
|
|
|
{m.body && (
|
|
<p className="text-base leading-relaxed text-foreground whitespace-pre-wrap">{m.body}</p>
|
|
)}
|
|
|
|
{!isPending && (
|
|
<PostEngagement
|
|
apiBase={`${messagesUrl}/${m.id}`}
|
|
currentUserId={currentUserId || null}
|
|
initialReactions={m.reactions}
|
|
initialCommentCount={m.comment_count}
|
|
canModerate={isOrgAdmin}
|
|
/>
|
|
)}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default TournamentRoundMessages
|