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

This commit is contained in:
2021-01-12 12:42:27 +01:00
parent 092534e437
commit a528118178

View File

@@ -1,35 +1,33 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import {Link} from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import './SeasonSwitch.scss'; import './SeasonSwitch.scss';
import SeasonDetail from '../SeasonDetail/SeasonDetail'; import SeasonDetail from '../SeasonDetail/SeasonDetail';
import {IUserListProperties} from "../UserList/UserList"; import {IUserListProperties} from "../UserList/UserList";
class SeasonSwitch extends React.Component<IUserListProperties> { const SeasonSwitch: React.FC<IUserListProperties> = (props: IUserListProperties) => {
const seasonId = Number(props.userStats.seasonId)
const maxSeasonId = Number(props.userStats.maxSeasonId)
render() { return (
let seasonId = Number(this.props.userStats.seasonId)
let maxSeasonId = Number(this.props.userStats.maxSeasonId)
return(
<div className="SeasonSwitch" data-testid="SeasonSwitch"> <div className="SeasonSwitch" data-testid="SeasonSwitch">
{ {
seasonId > 1 seasonId > 1
&& <Link to={"/season/" + (seasonId - 1)} onClick={() => this.props.onSeasonIdChange('' + (seasonId - 1))}> && <Link to={"/season/" + (seasonId - 1)} onClick={() => props.onSeasonIdChange('' + (seasonId - 1))}>
<FontAwesomeIcon icon="arrow-circle-left" /> <FontAwesomeIcon icon="arrow-circle-left"/>
</Link> </Link>
} }
<SeasonDetail {...this.props} /> <SeasonDetail {...props} />
{ {
seasonId !== maxSeasonId seasonId !== maxSeasonId
&& <Link to={"/season/" + (seasonId + 1)} onClick={() => this.props.onSeasonIdChange('' + (seasonId + 1))}> && <Link to={"/season/" + (seasonId + 1)} onClick={() => props.onSeasonIdChange('' + (seasonId + 1))}>
<FontAwesomeIcon icon="arrow-circle-right" /> <FontAwesomeIcon icon="arrow-circle-right"/>
</Link> </Link>
} }
</div> </div>
) )
}
} }
export default SeasonSwitch; export default SeasonSwitch;