From 73389ad516af4cb49873cc19c2dc65efc77d6eb8 Mon Sep 17 00:00:00 2001
From: Joffrey BION <joffrey.bion@gmail.com>
Date: Sat, 9 Jun 2018 13:36:45 +0200
Subject: Split GameBrowser into multiple connected components

---
 frontend/src/components/PlayerInfo.jsx             | 27 ++++++++
 .../src/components/game-browser/GameBrowser.jsx    | 54 ++++++++++++++++
 frontend/src/components/game-browser/GameList.jsx  | 37 +++++++++++
 frontend/src/components/gameList.js                | 19 ------
 frontend/src/redux/players.js                      | 12 +++-
 frontend/src/scenes/GameBrowser/index.js           | 73 ----------------------
 frontend/src/scenes/index.js                       |  2 +-
 7 files changed, 128 insertions(+), 96 deletions(-)
 create mode 100644 frontend/src/components/PlayerInfo.jsx
 create mode 100644 frontend/src/components/game-browser/GameBrowser.jsx
 create mode 100644 frontend/src/components/game-browser/GameList.jsx
 delete mode 100644 frontend/src/components/gameList.js
 delete mode 100644 frontend/src/scenes/GameBrowser/index.js

diff --git a/frontend/src/components/PlayerInfo.jsx b/frontend/src/components/PlayerInfo.jsx
new file mode 100644
index 00000000..42d3142a
--- /dev/null
+++ b/frontend/src/components/PlayerInfo.jsx
@@ -0,0 +1,27 @@
+// @flow
+import { Text } from '@blueprintjs/core';
+import React from 'react';
+import { connect } from 'react-redux';
+import type { Player } from '../models/players';
+import { getCurrentPlayer } from '../redux/players';
+
+export type PlayerInfoProps = {
+  player: ?Player,
+}
+
+const PlayerInfoPresenter = ({player}: PlayerInfoProps) => (
+    <Text>
+      <b>Username:</b>
+      {' '}
+      {player && player.displayName}
+    </Text>
+);
+
+const mapStateToProps = state => ({
+  player: getCurrentPlayer(state),
+});
+
+const mapDispatchToProps = {
+};
+
+export const PlayerInfo = connect(mapStateToProps, mapDispatchToProps)(PlayerInfoPresenter);
diff --git a/frontend/src/components/game-browser/GameBrowser.jsx b/frontend/src/components/game-browser/GameBrowser.jsx
new file mode 100644
index 00000000..db0bbb9a
--- /dev/null
+++ b/frontend/src/components/game-browser/GameBrowser.jsx
@@ -0,0 +1,54 @@
+// @flow
+import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Flex } from 'reflexbox';
+import { GameList } from './GameList';
+import { PlayerInfo } from '../PlayerInfo';
+import { actions } from '../../redux/games';
+
+export type GameBrowserProps = {
+  createGame: (gameName: string) => void,
+}
+
+class GameBrowserPresenter extends Component<GameBrowserProps> {
+
+  _gameName: string | void = undefined;
+
+  createGame = (e: SyntheticEvent<*>): void => {
+    e.preventDefault();
+    if (this._gameName !== undefined) {
+      this.props.createGame(this._gameName);
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        <Flex align="center" justify='space-between' p={1}>
+          <InputGroup
+                  placeholder="Game name"
+                  name="game_name"
+                  onChange={(e: SyntheticInputEvent<*>) => (this._gameName = e.target.value)}
+                  rightElement={<CreateGameButton onClick={this.createGame}/>}
+          />
+          <PlayerInfo />
+        </Flex>
+        <GameList />
+      </div>
+    );
+  }
+}
+
+const CreateGameButton = ({onClick}) => (
+  <Button className={Classes.MINIMAL} onClick={onClick} intent={Intent.PRIMARY}>Create Game</Button>
+);
+
+const mapStateToProps = () => ({
+});
+
+const mapDispatchToProps = {
+  createGame: actions.requestCreateGame,
+};
+
+export const GameBrowser = connect(mapStateToProps, mapDispatchToProps)(GameBrowserPresenter);
diff --git a/frontend/src/components/game-browser/GameList.jsx b/frontend/src/components/game-browser/GameList.jsx
new file mode 100644
index 00000000..e3601d51
--- /dev/null
+++ b/frontend/src/components/game-browser/GameList.jsx
@@ -0,0 +1,37 @@
+// @flow
+import { Button, Text } from '@blueprintjs/core';
+import type { List } from 'immutable';
+import React from 'react';
+import { connect } from 'react-redux';
+import { Flex } from 'reflexbox';
+import type { Game } from '../../models/games';
+import { actions, getAllGames } from '../../redux/games';
+
+type GameListProps = {
+  games: List<Game>,
+  joinGame: (gameId: string) => void,
+};
+
+const GameListPresenter = ({ games, joinGame }: GameListProps) => (
+  <div>
+    {games.map((game: Game, index: number) => {
+      return (
+        <Flex key={game.get('displayName', index)}>
+          <Text>{game.name}</Text>
+          <Button onClick={() => joinGame(game.id)}>Join</Button>
+        </Flex>
+      );
+    })}
+  </div>
+);
+
+const mapStateToProps = state => ({
+  games: getAllGames(state.get('games')),
+});
+
+const mapDispatchToProps = {
+  joinGame: actions.requestJoinGame,
+};
+
+export const GameList = connect(mapStateToProps, mapDispatchToProps)(GameListPresenter);
+
diff --git a/frontend/src/components/gameList.js b/frontend/src/components/gameList.js
deleted file mode 100644
index b8567130..00000000
--- a/frontend/src/components/gameList.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// @flow
-import { Button, Text } from '@blueprintjs/core';
-import type { List } from 'immutable';
-import React from 'react';
-import { Flex } from 'reflexbox';
-import type { Game } from '../models/games';
-
-export const GameList = ({ games, joinGame }: { games: List<Game>, joinGame: (gameId: string) => void }) => (
-  <div>
-    {games.map((game: Game, index: number) => {
-      return (
-        <Flex key={game.get('displayName', index)}>
-          <Text>{game.name}</Text>
-          <Button onClick={() => joinGame(game.id)}>Join</Button>
-        </Flex>
-      );
-    })}
-  </div>
-);
diff --git a/frontend/src/redux/players.js b/frontend/src/redux/players.js
index 1d6da562..b9f37c8c 100644
--- a/frontend/src/redux/players.js
+++ b/frontend/src/redux/players.js
@@ -39,6 +39,12 @@ export const playersReducer = (state = new PlayerState(), action: PlayerAction)
   }
 };
 
-export const getCurrentPlayer = players => players.all.get(players.current, new Player({displayName: '[ERROR]'}));
-export const getPlayer = (players, username) => players.all.get(username);
-export const getPlayers = (players, usernames) => usernames.map(u => getPlayer(players, u));
+const ANONYMOUS = new Player({displayName: '[NOT LOGGED]'});
+
+export function getCurrentPlayer(state): Player {
+  const players = state.get('players');
+  return getPlayer(players, players.current, ANONYMOUS);
+}
+
+export const getPlayer = (players, username, defaultPlayer): ?Player => players.all.get(username, defaultPlayer);
+export const getPlayers = (players, usernames): List<Player> => usernames.map(u => getPlayer(players, u, undefined));
diff --git a/frontend/src/scenes/GameBrowser/index.js b/frontend/src/scenes/GameBrowser/index.js
deleted file mode 100644
index 5a94e290..00000000
--- a/frontend/src/scenes/GameBrowser/index.js
+++ /dev/null
@@ -1,73 +0,0 @@
-// @flow
-import { Button, Classes, InputGroup, Intent, Text } from '@blueprintjs/core';
-import type { List } from 'immutable';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { Flex } from 'reflexbox';
-import { GameList } from '../../components/gameList';
-import type { Game } from '../../models/games';
-import type { Player } from '../../models/players';
-import { actions, getAllGames } from '../../redux/games';
-import { getCurrentPlayer } from '../../redux/players';
-
-export type GameBrowserProps = {
-  currentPlayer: Player,
-  games: List<Game>,
-  createGame: (gameName: string) => void,
-  joinGame: (gameId: string) => void
-}
-
-class GameBrowserPresenter extends Component<GameBrowserProps> {
-  props: {
-    currentPlayer: Player,
-    games: List<Game>,
-    createGame: (gameName: string) => void,
-    joinGame: (gameId: string) => void
-  };
-
-  _gameName: string | void = undefined;
-
-  createGame = (e: SyntheticEvent<*>): void => {
-    e.preventDefault();
-    if (this._gameName !== undefined) {
-      this.props.createGame(this._gameName);
-    }
-  };
-
-  render() {
-    return (
-      <div>
-        <Flex align="center" p={1}>
-          <InputGroup
-                  placeholder="Game name"
-                  name="game_name"
-                  onChange={(e: SyntheticInputEvent<*>) => (this._gameName = e.target.value)}
-                  rightElement={<CreateGameButton onClick={this.createGame}/>}
-          />
-          <Text>
-            <b>Username:</b>
-            {' '}
-            {this.props.currentPlayer && this.props.currentPlayer.displayName}
-          </Text>
-        </Flex>
-        <GameList games={this.props.games} joinGame={this.props.joinGame} />
-      </div>
-    );
-  }
-}
-
-const CreateGameButton = ({onClick}) => (
-  <Button className={Classes.MINIMAL} onClick={onClick} intent={Intent.PRIMARY}>Create Game</Button>
-);
-
-const mapStateToProps = state => ({
-  currentPlayer: getCurrentPlayer(state.get('players')),
-  games: getAllGames(state.get('games')),
-});
-
-const mapDispatchToProps = {
-  createGame: actions.requestCreateGame,
-  joinGame: actions.requestJoinGame,
-};
-
-export const GameBrowser = connect(mapStateToProps, mapDispatchToProps)(GameBrowserPresenter);
diff --git a/frontend/src/scenes/index.js b/frontend/src/scenes/index.js
index 5d75f275..eb15e626 100644
--- a/frontend/src/scenes/index.js
+++ b/frontend/src/scenes/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { GameBrowser } from './GameBrowser';
+import { GameBrowser } from '../components/game-browser/GameBrowser';
 import { Lobby } from './Lobby';
 import { SplashScreen } from './SplashScreen';
 
-- 
cgit