From e9d0192dfbe4636b6a4392257e7405f4ba27d900 Mon Sep 17 00:00:00 2001 From: Mehrdad Rafiee Date: Wed, 31 Jul 2024 13:20:58 -0700 Subject: [PATCH] convert components/Teams directory to use TypeScript --- src/components/Teams/index.jsx | 120 ------------------------- src/components/Teams/index.tsx | 156 +++++++++++++++++++++++++++++++++ 2 files changed, 156 insertions(+), 120 deletions(-) delete mode 100644 src/components/Teams/index.jsx create mode 100644 src/components/Teams/index.tsx diff --git a/src/components/Teams/index.jsx b/src/components/Teams/index.jsx deleted file mode 100644 index 2a4c6e5efc..0000000000 --- a/src/components/Teams/index.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Helmet from 'react-helmet'; -import { connect } from 'react-redux'; -import styled from 'styled-components'; -import FlatButton from 'material-ui/FlatButton'; -import { getOrdinal, getTeamLogoUrl, fromNow, subTextStyle } from '../../utility'; -import { getTeams } from '../../actions'; -import Heading from '../Heading'; -import Team from '../Team'; -import Table, { TableLink } from '../Table'; -import { Logo } from '../Team/TeamStyled'; -import config from '../../config'; - -const TeamImageContainer = styled.div` - display: flex; - align-items: center; - - img { - margin-top: 7px; - margin-right: 7px; - margin-bottom: 7px; - margin-left: 0px; - width: 50px; - height: 50px; - object-fit: contain; - } -`; - -const columns = strings => [{ - displayName: strings.th_rank, - displayFn: (row, col, field, index) => getOrdinal(index + 1), -}, -{ - displayName: strings.th_name, - field: 'name', - displayFn: (row, col, field) => ( - - -
- {field} - - {fromNow(row.last_match_time)} - -
-
), -}, { - displayName: strings.th_rating, - field: 'rating', - sortFn: true, - relativeBars: true, - displayFn: (row, col, field) => Math.floor(field), -}, { - displayName: strings.th_wins, - field: 'wins', - sortFn: true, - relativeBars: true, -}, { - displayName: strings.th_losses, - field: 'losses', - sortFn: true, - relativeBars: true, -}]; - -class RequestLayer extends React.Component { - static propTypes = { - dispatchTeams: PropTypes.func, - data: PropTypes.arrayOf(PropTypes.object), - loading: PropTypes.bool, - match: PropTypes.shape({ - params: PropTypes.shape({ - teamId: PropTypes.string, - }), - }), - strings: PropTypes.shape({}), - } - - componentDidMount() { - this.props.dispatchTeams(); - } - render() { - const { strings } = this.props; - const route = this.props.match.params.teamId; - - if (Number.isInteger(Number(route))) { - return ; - } - const { loading } = this.props; - return ( -
- -
- {config.VITE_ENABLE_RIVALRY && } - href="https://rivalry.com/opendota" - target="_blank" - rel="noopener noreferrer" - />} -
- - - ); - } -} - -const mapStateToProps = state => ({ - data: state.app.teams.data.filter(team => team.last_match_time > ((new Date() / 1000) - (60 * 60 * 24 * 30 * 6))), - loading: state.app.teams.loading, - strings: state.app.strings, -}); - -const mapDispatchToProps = dispatch => ({ - dispatchTeams: () => dispatch(getTeams()), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(RequestLayer); diff --git a/src/components/Teams/index.tsx b/src/components/Teams/index.tsx new file mode 100644 index 0000000000..094f56253a --- /dev/null +++ b/src/components/Teams/index.tsx @@ -0,0 +1,156 @@ +import React from 'react'; +import Helmet from 'react-helmet'; +import { connect, ConnectedProps } from 'react-redux'; +import styled from 'styled-components'; +import { Button } from '@material-ui/core'; +import { getOrdinal, getTeamLogoUrl, fromNow, subTextStyle } from '../../utility'; +import { getTeams } from '../../actions'; +import Heading from '../Heading'; +import Team from '../Team'; +import Table, { TableLink } from '../Table'; +import { Logo } from '../Team/TeamStyled'; +import config from '../../config'; + +const TeamImageContainer = styled.div` + display: flex; + align-items: center; + + img { + margin-top: 7px; + margin-right: 7px; + margin-bottom: 7px; + margin-left: 0px; + width: 50px; + height: 50px; + object-fit: contain; + } +`; + +interface TeamRow { + team_id: string; + name: string; + logo_url: string; + last_match_time: number; + rating: number; + wins: number; + losses: number; +} + +interface Strings { + th_rank: string; + th_name: string; + th_rating: string; + th_wins: string; + th_losses: string; + header_teams: string; + app_rivalry: string; + heading_team_elo_rankings: string; + subheading_team_elo_rankings: string; +} + +interface RequestLayerProps { + dispatchTeams: () => void; + data: TeamRow[]; + loading: boolean; + match: { + params: { + teamId?: string; + }; + }; + strings: Strings; +} + +const columns = (strings: Strings) => [ + { + displayName: strings.th_rank, + displayFn: (row: TeamRow, col: number, field: any, index: number) => getOrdinal(index + 1), + }, + { + displayName: strings.th_name, + field: 'name', + displayFn: (row: TeamRow, col: number, field: any) => ( + + +
+ {field} + + {fromNow(row.last_match_time)} + +
+
+ ), + }, + { + displayName: strings.th_rating, + field: 'rating', + sortFn: true, + relativeBars: true, + displayFn: (row: TeamRow, col: number, field: any) => Math.floor(field), + }, + { + displayName: strings.th_wins, + field: 'wins', + sortFn: true, + relativeBars: true, + }, + { + displayName: strings.th_losses, + field: 'losses', + sortFn: true, + relativeBars: true, + }, +]; + +class RequestLayer extends React.Component { + componentDidMount() { + this.props.dispatchTeams(); + } + + render() { + const { strings, match, data, loading } = this.props; + const route = match.params.teamId; + + if (route && Number.isInteger(Number(route))) { + return ; + } + + return ( +
+ +
+ {config.VITE_ENABLE_RIVALRY && ( + + )} +
+ +
+ + ); + } +} + +const mapStateToProps = (state: any) => ({ + data: state.app.teams.data.filter((team: TeamRow) => team.last_match_time > ((new Date().getTime() / 1000) - (60 * 60 * 24 * 30 * 6))), + loading: state.app.teams.loading, + strings: state.app.strings, +}); + +const mapDispatchToProps = (dispatch: any) => ({ + dispatchTeams: () => dispatch(getTeams()), +}); + +const connector = connect(mapStateToProps, mapDispatchToProps); + +export default connector(RequestLayer); \ No newline at end of file