diff options
author | Joffrey BION <joffrey.bion@gmail.com> | 2019-05-05 20:31:41 +0200 |
---|---|---|
committer | jbion <joffrey.bion@amadeus.com> | 2019-05-06 18:33:15 +0200 |
commit | 664f7a98b44a561d619cc14235335e2a6f2bceb3 (patch) | |
tree | fd1c26ccd24b4dee26a2d412f8bdd4ba61b6fe42 /frontend/src/components/game-browser | |
parent | Convert game components to TypeScript (diff) | |
download | seven-wonders-664f7a98b44a561d619cc14235335e2a6f2bceb3.tar.gz seven-wonders-664f7a98b44a561d619cc14235335e2a6f2bceb3.tar.bz2 seven-wonders-664f7a98b44a561d619cc14235335e2a6f2bceb3.zip |
Migrate game-browser components to TypeScript
Diffstat (limited to 'frontend/src/components/game-browser')
-rw-r--r-- | frontend/src/components/game-browser/GameBrowser.tsx (renamed from frontend/src/components/game-browser/GameBrowser.jsx) | 17 | ||||
-rw-r--r-- | frontend/src/components/game-browser/GameList.tsx (renamed from frontend/src/components/game-browser/GameList.jsx) | 40 | ||||
-rw-r--r-- | frontend/src/components/game-browser/GameStatus.tsx (renamed from frontend/src/components/game-browser/GameStatus.jsx) | 8 | ||||
-rw-r--r-- | frontend/src/components/game-browser/PlayerCount.tsx (renamed from frontend/src/components/game-browser/PlayerCount.jsx) | 1 | ||||
-rw-r--r-- | frontend/src/components/game-browser/PlayerInfo.tsx (renamed from frontend/src/components/game-browser/PlayerInfo.jsx) | 7 |
5 files changed, 45 insertions, 28 deletions
diff --git a/frontend/src/components/game-browser/GameBrowser.jsx b/frontend/src/components/game-browser/GameBrowser.tsx index cfa0e45e..a6367d5e 100644 --- a/frontend/src/components/game-browser/GameBrowser.jsx +++ b/frontend/src/components/game-browser/GameBrowser.tsx @@ -1,6 +1,5 @@ -// @flow import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core'; -import React, { Component } from 'react'; +import React, { ChangeEvent, Component, SyntheticEvent } from 'react'; import { connect } from 'react-redux'; import { Flex } from 'reflexbox'; import { actions } from '../../redux/actions/lobby'; @@ -15,7 +14,7 @@ class GameBrowserPresenter extends Component<GameBrowserProps> { _gameName: string | void = undefined; - createGame = (e: SyntheticEvent<*>): void => { + createGame = (e: SyntheticEvent<any>): void => { e.preventDefault(); if (this._gameName !== undefined) { this.props.createGame(this._gameName); @@ -30,8 +29,8 @@ class GameBrowserPresenter extends Component<GameBrowserProps> { <InputGroup placeholder="Game name" name="game_name" - onChange={(e: SyntheticInputEvent<*>) => (this._gameName = e.target.value)} - rightElement={<CreateGameButton onClick={this.createGame}/>} + onChange={(e: ChangeEvent<HTMLInputElement>) => (this._gameName = e.target.value)} + rightElement={<CreateGameButton createGame={this.createGame}/>} /> </form> <PlayerInfo /> @@ -42,8 +41,12 @@ class GameBrowserPresenter extends Component<GameBrowserProps> { } } -const CreateGameButton = ({onClick}) => ( - <Button className={Classes.MINIMAL} intent={Intent.PRIMARY} icon='add' onClick={onClick} /> +type CreateGameButtonProps = { + createGame: (e: SyntheticEvent<any>) => void +} + +const CreateGameButton = ({createGame}: CreateGameButtonProps) => ( + <Button className={Classes.MINIMAL} intent={Intent.PRIMARY} icon='add' onClick={createGame} /> ); const mapDispatchToProps = { diff --git a/frontend/src/components/game-browser/GameList.jsx b/frontend/src/components/game-browser/GameList.tsx index b797a358..1b136940 100644 --- a/frontend/src/components/game-browser/GameList.jsx +++ b/frontend/src/components/game-browser/GameList.tsx @@ -1,21 +1,25 @@ -// @flow import { Button, Classes } from '@blueprintjs/core' -import type { List } from 'immutable'; +import { List } from 'immutable'; import React from 'react'; import { connect } from 'react-redux'; -import type { ApiLobby } from '../../api/model'; -import type { GlobalState } from '../../reducers'; +import { ApiLobby } from '../../api/model'; +import { GlobalState } from '../../reducers'; import { actions } from '../../redux/actions/lobby'; import { getAllGames } from '../../redux/games'; import './GameList.css'; import { GameStatus } from './GameStatus'; import { PlayerCount } from './PlayerCount'; -type GameListProps = { +type GameListStateProps = { games: List<ApiLobby>, - joinGame: (gameId: string) => void, }; +type GameListDispatchProps = { + joinGame: (gameId: number) => void, +}; + +type GameListProps = GameListStateProps & GameListDispatchProps + const GameListPresenter = ({ games, joinGame }: GameListProps) => ( <table className={Classes.HTML_TABLE}> <thead> @@ -36,7 +40,12 @@ const GameListHeaderRow = () => ( </tr> ); -const GameListItemRow = ({game, joinGame}) => ( +type GameListItemRowProps = { + game: ApiLobby, + joinGame: (gameId: number) => void, +}; + +const GameListItemRow = ({game, joinGame}: GameListItemRowProps) => ( <tr className="gameListRow"> <td>{game.name}</td> <td> @@ -51,17 +60,24 @@ const GameListItemRow = ({game, joinGame}) => ( </tr> ); -const JoinButton = ({game, joinGame}) => { +type JoinButtonProps = { + game: ApiLobby, + joinGame: (gameId: number) => void, +}; + +const JoinButton = ({game, joinGame}: JoinButtonProps) => { const disabled = game.state !== 'LOBBY'; const onClick = () => joinGame(game.id); return <Button minimal disabled={disabled} icon='arrow-right' title='Join Game' onClick={onClick}/>; }; -const mapStateToProps = (state: GlobalState) => ({ - games: getAllGames(state), -}); +function mapStateToProps(state: GlobalState): GameListStateProps { + return { + games: getAllGames(state), + }; +} -const mapDispatchToProps = { +const mapDispatchToProps: GameListDispatchProps = { joinGame: actions.requestJoinGame, }; diff --git a/frontend/src/components/game-browser/GameStatus.jsx b/frontend/src/components/game-browser/GameStatus.tsx index fc14bbf6..5f237258 100644 --- a/frontend/src/components/game-browser/GameStatus.jsx +++ b/frontend/src/components/game-browser/GameStatus.tsx @@ -1,7 +1,7 @@ -//@flow import { Tag } from '@blueprintjs/core'; +import { Intent } from '@blueprintjs/core'; import * as React from 'react'; -import type { ApiGameState } from '../../api/model'; +import { ApiGameState } from '../../api/model'; type GameStatusProps = { state: ApiGameState, @@ -12,6 +12,6 @@ export const GameStatus = ({state}: GameStatusProps) => ( ); const statusIntents = { - 'LOBBY': 'success', - 'PLAYING': 'warning', + 'LOBBY': Intent.SUCCESS, + 'PLAYING': Intent.WARNING, }; diff --git a/frontend/src/components/game-browser/PlayerCount.jsx b/frontend/src/components/game-browser/PlayerCount.tsx index 9a5306d6..64028f68 100644 --- a/frontend/src/components/game-browser/PlayerCount.jsx +++ b/frontend/src/components/game-browser/PlayerCount.tsx @@ -1,4 +1,3 @@ -//@flow import { Icon } from '@blueprintjs/core'; import * as React from 'react'; import './PlayerCount.css'; diff --git a/frontend/src/components/game-browser/PlayerInfo.jsx b/frontend/src/components/game-browser/PlayerInfo.tsx index baee67c1..4afed671 100644 --- a/frontend/src/components/game-browser/PlayerInfo.jsx +++ b/frontend/src/components/game-browser/PlayerInfo.tsx @@ -1,13 +1,12 @@ -// @flow import { Text } from '@blueprintjs/core'; import React from 'react'; import { connect } from 'react-redux'; -import type { GlobalState } from '../../reducers'; -import type { User } from '../../redux/user'; +import { GlobalState } from '../../reducers'; +import { User } from '../../redux/user'; import { getCurrentUser } from '../../redux/user'; type PlayerInfoProps = { - user: ?User, + user: User | null, } const PlayerInfoPresenter = ({user}: PlayerInfoProps) => ( |