Migrate game-browser components to TypeScript

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) => (