humenius/ts-onlinetime-ranks
1
1
Fork 0
Code Issues 1 Pull Requests Releases 2 Wiki Activity

feature(database-connection): Refactor UserList.tsx to functional components

Browse Source
This commit is contained in:
Humenius
2021-01-12 12:38:41 +01:00
parent eae539e39f
commit 092534e437
1 changed files with 33 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/components/UserList/UserList.tsx
View File

@@ -4,65 +4,41 @@ import './UserList.scss';
import SeasonSwitch from "../SeasonSwitch/SeasonSwitch";
import UserStatsResponse from "../../models/UserStatsResponse";
// const UserList: React.FC = () => (
// <div className="UserList" data-testid="UserList">
// UserList Component
// </div>
// );
export default class UserList extends React.Component<IUserListProperties, IUserListState> {
private createTableEntries(entries: TableEntry[]) {
return 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 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>
)
});
}
// renderTableData() {
// // const { error, isLoaded, users, mock } = this.state;
// // if (users != null && isLoaded && error == null) {
// // return this.createTableEntries(users);
// // } else if (isLoaded && error != null && mock != null) {
// // return this.createTableEntries(mock);
// // } else if (mock != null) {
// // return this.createTableEntries(mock);
// // }
// return this.createTableEntries();
// }
render() {
return (
<div className="UserList" data-testid="UserList">
<SeasonSwitch onSeasonIdChange={this.props.onSeasonIdChange} userStats={this.props.userStats} />
<table>
<thead>
<tr>
<th>Placement</th>
<th>Name</th>
<th>Rank</th>
<th>Online time</th>
</tr>
</thead>
<tbody>
{this.createTableEntries(this.props.userStats.stats)}
</tbody>
const UserList: React.FC<IUserListProperties> = (props: IUserListProperties) => (
<div className="UserList" data-testid="UserList">
<SeasonSwitch onSeasonIdChange={props.onSeasonIdChange} userStats={props.userStats}/>
<table>
<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>
)
}
}
</div>
)
export interface IUserListProperties {
userStats: UserStatsResponse
@@ -70,6 +46,4 @@ export interface IUserListProperties {
onSeasonIdChange: any
}
interface IUserListState {
mocked: boolean
}
export default UserList;