Migrate lobby components to TypeScript

3 files changed, 50 insertions, 28 deletions

diff --git a/frontend/src/components/lobby/Lobby.jsx b/frontend/src/components/lobby/Lobby.tsx
index cc979190..3594af65 100644
--- a/frontend/src/components/lobby/Lobby.jsx
+++ b/frontend/src/components/lobby/Lobby.tsx
@@ -1,26 +1,33 @@
-//@flow
 import { Button, Classes, Intent } from '@blueprintjs/core';
 import { List } from 'immutable';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import type { ApiLobby, ApiPlayer } from '../../api/model';
-import type { GlobalState } from '../../reducers';
+import { ApiLobby, ApiPlayer } from '../../api/model';
+import { GlobalState } from '../../reducers';
 import { actions } from '../../redux/actions/lobby';
 import { getCurrentGame } from '../../redux/games';
 import { getCurrentPlayer } from '../../redux/user';
 import { RadialPlayerList } from './RadialPlayerList';
 
-export type LobbyProps = {
-  currentGame: ApiLobby,
-  currentPlayer: ApiPlayer,
+export type LobbyStateProps = {
+  currentGame: ApiLobby | null,
+  currentPlayer: ApiPlayer | null,
   players: List<ApiPlayer>,
+}
+
+export type LobbyDispatchProps = {
   startGame: () => void,
 }
 
+export type LobbyProps = LobbyStateProps & LobbyDispatchProps
+
 class LobbyPresenter extends Component<LobbyProps> {
 
   render() {
     const {currentGame, currentPlayer, players, startGame} = this.props;
+    if (!currentGame || !currentPlayer) {
+      return <div>Error: no current game.</div>
+    }
     return (
       <div>
         <h2>{currentGame.name + ' — Lobby'}</h2>
@@ -32,15 +39,15 @@ class LobbyPresenter extends Component<LobbyProps> {
   }
 }
 
-const mapStateToProps = (state: GlobalState) => {
+function mapStateToProps(state: GlobalState): LobbyStateProps {
   const game = getCurrentGame(state);
   console.info(game);
   return {
     currentGame: game,
     currentPlayer: getCurrentPlayer(state),
-    players: game ? new List(game.players) : new List(),
+    players: game ? List(game.players) : List(),
   };
-};
+}
 
 const mapDispatchToProps = {
   startGame: actions.requestStartGame,
diff --git a/frontend/src/components/lobby/PlayerList.jsx b/frontend/src/components/lobby/PlayerList.tsx
index 80212a3e..bfc3a56c 100644
--- a/frontend/src/components/lobby/PlayerList.jsx
+++ b/frontend/src/components/lobby/PlayerList.tsx
@@ -1,17 +1,16 @@
-//@flow
 import { Classes, Icon } from '@blueprintjs/core'
 import { List } from 'immutable';
 import * as React from 'react';
 import { Flex } from 'reflexbox';
 import { ApiPlayer } from '../../api/model';
 
-type PlayerListProps = {
-  players: List<ApiPlayer>,
-  owner: string,
-  currentPlayer: ApiPlayer,
+type PlayerListItemProps = {
+  player: ApiPlayer,
+  isOwner: boolean,
+  isUser: boolean,
 };
 
-const PlayerListItem = ({player, isOwner, isUser}) => (
+const PlayerListItem = ({player, isOwner, isUser}: PlayerListItemProps) => (
   <tr>
     <td>
       <Flex align='center'>
@@ -24,10 +23,16 @@ const PlayerListItem = ({player, isOwner, isUser}) => (
   </tr>
 );
 
+type PlayerListProps = {
+  players: List<ApiPlayer>,
+  owner: string,
+  currentPlayer: ApiPlayer,
+};
+
 export const PlayerList = ({players, owner, currentPlayer}: PlayerListProps) => (
   <table className={Classes.HTML_TABLE}>
     <tbody>
-      {players.map(player => <PlayerListItem key={player.username}
+      {players.map((player: ApiPlayer) => <PlayerListItem key={player.username}
                                              player={player}
                                              isOwner={player.username === owner}
                                              isUser={player.username === currentPlayer.username}/>)}
diff --git a/frontend/src/components/lobby/RadialPlayerList.jsx b/frontend/src/components/lobby/RadialPlayerList.tsx
index 0f122910..88db55fc 100644
--- a/frontend/src/components/lobby/RadialPlayerList.jsx
+++ b/frontend/src/components/lobby/RadialPlayerList.tsx
@@ -1,19 +1,19 @@
-//@flow
-import { Icon } from '@blueprintjs/core'
+import { Icon, IconName, Intent } from '@blueprintjs/core';
 import { List } from 'immutable';
 import * as React from 'react';
+import { ReactNode } from 'react';
 import { Flex } from 'reflexbox';
 import { ApiPlayer } from '../../api/model';
 import { RadialList } from './radial-list/RadialList';
 import roundTable from './round-table.png';
 
-type RadialPlayerListProps = {
-  players: List<ApiPlayer>
+type PlayerItemProps = {
+  player: ApiPlayer
 };
 
-const PlayerItem = ({player}) => (
+const PlayerItem = ({player}: PlayerItemProps) => (
   <Flex column align='center'>
-    <UserIcon isOwner={player.gameOwner} isUser={player.user} title={player.gameOwner ? 'Game owner' : false}/>
+    <UserIcon isOwner={player.gameOwner} isUser={player.user} title={player.gameOwner ? 'Game owner' : null}/>
     <h5 style={{margin: 0}}>{player.displayName}</h5>
   </Flex>
 );
@@ -25,12 +25,22 @@ const PlayerPlaceholder = () => (
   </Flex>
 );
 
-const UserIcon = ({isUser, isOwner, title}) => {
-  const icon = isOwner ? 'badge' : 'user';
-  const intent = isUser ? 'warning' : 'none';
+type UserIconProps = {
+  isUser: boolean,
+  isOwner: boolean,
+  title: string | null,
+};
+
+const UserIcon = ({isUser, isOwner, title}: UserIconProps) => {
+  const icon: IconName = isOwner ? 'badge' : 'user';
+  const intent: Intent = isUser ? Intent.WARNING : Intent.NONE;
   return <Icon icon={icon} iconSize={50} intent={intent} title={title}/>;
 };
 
+type RadialPlayerListProps = {
+  players: List<ApiPlayer>
+};
+
 export const RadialPlayerList = ({players}: RadialPlayerListProps) => {
   const orderedPlayers = placeUserFirst(players.toArray());
   const playerItems = orderedPlayers.map(player => <PlayerItem key={player.username} player={player}/>);
@@ -43,14 +53,14 @@ export const RadialPlayerList = ({players}: RadialPlayerListProps) => {
                      itemHeight={100}/>;
 };
 
-function placeUserFirst(players: Array<ApiPlayer>): Array<ApiPlayer> {
+function placeUserFirst(players: ApiPlayer[]): ApiPlayer[] {
   while (!players[0].user) {
-    players.push(players.shift());
+    players.push(players.shift()!);
   }
   return players;
 }
 
-function completeWithPlaceholders(playerItems: Array<React.Node>): Array<React.Node> {
+function completeWithPlaceholders(playerItems: Array<ReactNode>): Array<ReactNode> {
   while (playerItems.length < 3) {
     playerItems.push(<PlayerPlaceholder/>);
   }