50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import TableEntry from '../../models/TableEntry';
|
|
import './UserList.scss';
|
|
import SeasonSwitch from "../SeasonSwitch/SeasonSwitch";
|
|
import UserStatsResponse from "../../models/UserStatsResponse";
|
|
|
|
const createTableEntries = (entries: TableEntry[]) =>
|
|
entries.map((entry, index) => {
|
|
const placement = index + 1;
|
|
const placementClassName = placement === 1 ? "first-place"
|
|
: (placement === 2 ? "second-place"
|
|
: (placement === 3 ? "third-place"
|
|
: undefined))
|
|
return (
|
|
<tr key={index} className={placementClassName}>
|
|
<td>{placement}</td>
|
|
<td>{entry.name}</td>
|
|
<td>{entry.rank}</td>
|
|
<td>{entry.onlineTime}</td>
|
|
</tr>
|
|
)
|
|
});
|
|
|
|
const UserList: React.FC<IUserListProperties> = (props: IUserListProperties) => (
|
|
<div className="UserList" data-testid="UserList">
|
|
<SeasonSwitch {...props} />
|
|
<table className={!props.enabled ? "blurred" : ""}>
|
|
<thead>
|
|
<tr>
|
|
<th>Placement</th>
|
|
<th>Name</th>
|
|
<th>Rank</th>
|
|
<th>Online time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{createTableEntries(props.userStats.stats)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
|
|
export interface IUserListProperties {
|
|
userStats: UserStatsResponse
|
|
mocked?: boolean
|
|
onSeasonIdChange: React.Dispatch<React.SetStateAction<string | undefined>>
|
|
enabled: boolean
|
|
}
|
|
|
|
export default UserList; |