68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import TeamLogo from './TeamLogo';
|
|
|
|
const Results = () => {
|
|
const [matches, setMatches] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
fetch('/api/matches')
|
|
.then(res => res.ok ? res.json() : Promise.reject(res))
|
|
.then(data => {
|
|
setMatches(data.filter(m => m.result));
|
|
setLoading(false);
|
|
})
|
|
.catch(() => {
|
|
setError('Failed to load results');
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
if (loading) return <div style={{ padding: 32 }}>Loading results...</div>;
|
|
if (error) return <div style={{ padding: 32, color: 'red' }}>{error}</div>;
|
|
|
|
return (
|
|
<div style={{ padding: 32 }}>
|
|
<h2>Results</h2>
|
|
<table style={{ width: '100%', marginTop: 16, borderCollapse: 'collapse' }}>
|
|
<thead>
|
|
<tr>
|
|
<th>Stage</th>
|
|
<th>Team 1</th>
|
|
<th>Team 2</th>
|
|
<th>Score</th>
|
|
<th>Winner</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{matches.map(match => {
|
|
const winnerId = match.result?.winnerId;
|
|
return (
|
|
<tr key={match.id}>
|
|
<td>{match.stage?.type || ''}</td>
|
|
<td style={{ textAlign: 'center', padding: '8px' }}>
|
|
<TeamLogo team={match.team1} size="small" />
|
|
</td>
|
|
<td style={{ textAlign: 'center', padding: '8px' }}>
|
|
<TeamLogo team={match.team2} size="small" />
|
|
</td>
|
|
<td>{match.result ? `${match.result.team1Score} - ${match.result.team2Score}` : ''}</td>
|
|
<td>
|
|
{match.result ? (
|
|
<span style={{ color: 'green', fontWeight: 'bold' }}>
|
|
{winnerId === match.team1?.id ? match.team1?.name : match.team2?.name}
|
|
</span>
|
|
) : ''}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Results;
|