5 files changed, 77 insertions, 12 deletions
diff --git a/frontend/src/scenes/GameBrowser/index.js b/frontend/src/scenes/GameBrowser/index.js
new file mode 100644
index 00000000..20a835d1
--- /dev/null
+++ b/frontend/src/scenes/GameBrowser/index.js
@@ -0,0 +1,65 @@
+// @flow
+import type { List } from 'immutable';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { InlineForm, Space, Text } from 'rebass';
+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';
+
+class GameBrowserPresenter extends Component {
+  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}>
+          <InlineForm
+            buttonLabel="Create Game"
+            label="Game name"
+            name="game_name"
+            onChange={(e: SyntheticInputEvent) => (this._gameName = e.target.value)}
+            onClick={this.createGame}
+          />
+          <Space auto />
+          <Text>
+            <b>Username:</b>
+            {' '}
+            {this.props.currentPlayer && this.props.currentPlayer.displayName}
+          </Text>
+          <Space x={1} />
+        </Flex>
+        <GameList games={this.props.games} joinGame={this.props.joinGame} />
+      </div>
+    );
+  }
+}
+
+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/Lobby/index.js b/frontend/src/scenes/Lobby/index.js
index 1b5a11ff..57ad5c7f 100644
--- a/frontend/src/scenes/Lobby/index.js
+++ b/frontend/src/scenes/Lobby/index.js
@@ -2,11 +2,11 @@ import { List } from 'immutable';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Button } from 'rebass';
-import PlayerList from '../../components/playerList';
+import { PlayerList } from '../../components/playerList';
 import { actions, getCurrentGame } from '../../redux/games';
 import { getPlayers } from '../../redux/players';
 
-class Lobby extends Component {
+class LobbyPresenter extends Component {
   getTitle() {
     if (this.props.currentGame) {
       return this.props.currentGame.name + ' — Lobby';
@@ -39,4 +39,4 @@ const mapDispatchToProps = {
   startGame: actions.requestStartGame,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Lobby);
+export const Lobby = connect(mapStateToProps, mapDispatchToProps)(LobbyPresenter);
diff --git a/frontend/src/scenes/SplashScreen/components/HomeLayout.js b/frontend/src/scenes/SplashScreen/components/HomeLayout.js
index 86666eb2..2a3fd856 100644
--- a/frontend/src/scenes/SplashScreen/components/HomeLayout.js
+++ b/frontend/src/scenes/SplashScreen/components/HomeLayout.js
@@ -2,11 +2,11 @@
 import type { Children } from 'react';
 import React from 'react';
 import { Banner } from 'rebass';
-import ErrorToastContainer from '../../../components/errors/errorToastContainer';
+import { ErrorToastContainer } from '../../../components/errors/errorToastContainer';
 import background from './background-zeus-temple.jpg';
 import logo from './logo-7-wonders.png';
 
-export default ({ children }: { children: Children }) => (
+export const HomeLayout = ({ children }: { children: Children }) => (
   <div>
     <Banner align="center" backgroundImage={background}>
       <img src={logo} alt="Seven Wonders" />
diff --git a/frontend/src/scenes/SplashScreen/index.js b/frontend/src/scenes/SplashScreen/index.js
index feff8b1e..dca8bc49 100644
--- a/frontend/src/scenes/SplashScreen/index.js
+++ b/frontend/src/scenes/SplashScreen/index.js
@@ -5,9 +5,9 @@ import { Container } from 'rebass';
 import { actions } from '../../redux/players';
 
 import { InputGroup, Button, Classes, Intent } from '@blueprintjs/core';
-import HomeLayout from './components/HomeLayout';
+import { HomeLayout } from './components/HomeLayout';
 
-class SplashScreen extends Component {
+class SplashScreenPresenter extends Component {
   _username = '';
 
   play = e => {
@@ -42,4 +42,4 @@ const mapDispatchToProps = {
   chooseUsername: actions.chooseUsername,
 };
 
-export default connect(null, mapDispatchToProps)(SplashScreen);
+export const SplashScreen = connect(null, mapDispatchToProps)(SplashScreenPresenter);
diff --git a/frontend/src/scenes/index.js b/frontend/src/scenes/index.js
index ffc2c856..0229e850 100644
--- a/frontend/src/scenes/index.js
+++ b/frontend/src/scenes/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import { Route, Redirect, Switch } from 'react-router-dom';
 
-import SplashScreen from './SplashScreen';
-import Games from './Games';
-import Lobby from './Lobby';
+import { SplashScreen } from './SplashScreen';
+import { GameBrowser } from './GameBrowser';
+import { Lobby } from './Lobby';
 
 export const Application = () => (
   <Switch>
     <Route path="/splash-screen" component={SplashScreen} />
-    <Route path="/games" component={Games} />
+    <Route path="/games" component={GameBrowser} />
     <Route path="/lobby" component={Lobby} />
     <Redirect from="*" to="/splash-screen" />
   </Switch>