Handle game browser

8 files changed, 84 insertions, 106 deletions

diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js
index d2245152..adfc557f 100644
--- a/frontend/src/containers/app.js
+++ b/frontend/src/containers/app.js
@@ -4,29 +4,13 @@ import {
   Banner,
   Heading,
   Space,
-  Button,
   InlineForm,
   Text
 } from 'rebass'
 import { Flex } from 'reflexbox'
-import Modal from '../../components/modals/username'
 import GameBrowser from './gameBrowser'
 
 class App extends Component {
-  state = {
-    usernameModal: false,
-  }
-
-  componentDidMount() {
-
-  }
-
-  toggleModal = (key) => {
-    return (e) => {
-      const val = !this.state[key]
-      this.setState({ [key]: val })
-    }
-  }
 
   createGame = (e) => {
     e.preventDefault()
@@ -53,31 +37,25 @@ class App extends Component {
             onChange={(e) => this._gameName = e.target.value}
             onClick={this.createGame}
           >
-
           </InlineForm>
           <Space auto />
-          <Text><b>Username:</b> Cesar92</Text>
+          <Text><b>Username:</b> {this.props.username}</Text>
           <Space x={1} />
-          <Button
-            onClick={this.toggleModal('usernameModal')}
-            children="Change"/>
         </Flex>
         <GameBrowser />
-        <Modal toggleModal={this.toggleModal} modalOpen={this.state.usernameModal} />
       </div>
     )
   }
 }
 
 const mapStateToProps = (state) => ({
-
+  username: state.user.get('displayName')
 })
 
-import { initializeWs } from "./actions";
-import { createGame } from '../GameBrowser/actions'
+
+import { actions } from '../redux/game'
 const mapDispatchToProps = {
-  initializeWs,
-  createGame
+  createGame: actions.createGame
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 7622cd52..f06bb7b4 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -11,14 +11,16 @@ const { store, history } = configureStore(initialState)
 
 import './global-styles.css'
 import HomePage from './containers/home'
+import GameBrowser from './containers/app'
 import Error404 from './components/errors/Error404'
 
 ReactDOM.render(
   <Provider store={store}>
     <Router history={history}>
       <div className="app">
-        <Route path="/" component={HomePage}/>
-        <Route path="*" component={Error404}/>
+        <Route path="/" component={HomePage} />
+        <Route path="/games" component={GameBrowser} />
+        <Route path="*" component={Error404} />
       </div>
     </Router>
   </Provider>,
diff --git a/frontend/src/redux/game.js b/frontend/src/redux/game.js
index 64373958..a19e155e 100644
--- a/frontend/src/redux/game.js
+++ b/frontend/src/redux/game.js
@@ -1,14 +1,14 @@
 import { Map } from 'immutable'
 
 export const types = {
-  NEW_GAME: 'GAME/NEW_GAME',
+  CREATE_OR_UPDATE_GAMES: 'GAME/CREATE_OR_UPDATE_GAMES',
   ENTER_GAME: 'GAME/ENTER_GAME',
   JOIN_GAME: 'GAME/JOIN_GAME',
   CREATE_GAME: 'GAME/CREATE_GAME',
 }
 
 export const actions = {
-  newGame: (game) => ({ type: types.NEW_GAME, game }),
+  createOrUpdateGame: (game) => ({ type: types.CREATE_OR_UPDATE_GAMES, game }),
   enterGame: (username) => ({ type: types.ENTER_GAME, username }),
   joinGame: (id) => ({ type: types.JOIN_GAME, id }),
   createGame: (name) => ({ type: types.CREATE_GAME, name }),
diff --git a/frontend/src/redux/user.js b/frontend/src/redux/user.js
index 5926ed59..9046cc97 100644
--- a/frontend/src/redux/user.js
+++ b/frontend/src/redux/user.js
@@ -27,7 +27,7 @@ export default (state = initialState, action) => {
     case types.SET_USERNAME:
       return state.set('username', action.username)
         .set('displayName', action.displayName)
-        .set('id', action.index)
+        .set('index', action.index)
     default:
       return state
   }
diff --git a/frontend/src/sagas.js b/frontend/src/sagas.js
index e43e91c2..7c356e1d 100644
--- a/frontend/src/sagas.js
+++ b/frontend/src/sagas.js
@@ -4,11 +4,15 @@ import { call } from 'redux-saga/effects'
 import createWsConnection from './utils/createWebSocketConnection'
 
 import usernameChoiceSaga from './sagas/usernameChoice'
+import gameBrowserSaga from './sagas/gameBrowser'
 
 let wsConnection
 const routes = {
   *'/'() {
     yield usernameChoiceSaga(wsConnection)
+  },
+  *'/games'() {
+    yield gameBrowserSaga(wsConnection)
   }
 }
 
diff --git a/frontend/src/sagas/gameBrowser.js b/frontend/src/sagas/gameBrowser.js
new file mode 100644
index 00000000..19d52df9
--- /dev/null
+++ b/frontend/src/sagas/gameBrowser.js
@@ -0,0 +1,66 @@
+import { call, put, take } from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
+import { fromJS } from 'immutable'
+import { push } from 'react-router-redux'
+
+import { actions, types } from '../redux/game'
+
+function gameBrowserChannel(socket) {
+  return eventChannel(emit => {
+
+    const makeHandler = type => event => {
+      const response = fromJS(JSON.parse(event.body))
+      emit({ type, response })
+    }
+
+    const newGame = socket.subscribe('/topic/games', makeHandler(types.CREATE_OR_UPDATE_GAMES))
+    const joinGame = socket.subscribe('/user/queue/lobby/joined', makeHandler(types.JOIN_GAME))
+
+    const unsubscribe = () => {
+      newGame.unsubscribe()
+      joinGame.unsubscribe()
+    }
+
+    return unsubscribe
+  })
+}
+
+export function* watchGames({ socket }) {
+  const socketChannel = gameBrowserChannel(socket)
+
+  try {
+    while (true) {
+      const { type, response } = yield take(socketChannel)
+
+      switch (type) {
+        case types.CREATE_OR_UPDATE_GAMES:
+          yield put(actions.createOrUpdateGame(response))
+          break;
+        case types.JOIN_GAME:
+          yield put(actions.joinGame(response))
+          socketChannel.close();
+          yield put(push(`/lobby/${response.id}`))
+          break;
+        default:
+          console.error('Unknown type')
+      }
+    }
+  } finally {
+    console.info('gameBrowserChannel closed')
+  }
+}
+
+export function* createGame({ socket }) {
+  const { name } = yield take(types.CREATE_GAME)
+
+  socket.send("/app/lobby/create", JSON.stringify({ gameName: name }), {})
+}
+
+export function* gameBrowserSaga(socketConnection) {
+  yield [
+    call(watchGames, socketConnection),
+    call(createGame, socketConnection)
+  ]
+}
+
+export default gameBrowserSaga
diff --git a/frontend/src/sagas/lobby.js b/frontend/src/sagas/lobby.js
deleted file mode 100644
index 144d523a..00000000
--- a/frontend/src/sagas/lobby.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { call, put, take } from 'redux-saga/effects'
-import { eventChannel } from 'redux-saga'
-import { fromJS } from 'immutable'
-import { push } from 'react-router-redux'
-
-import { actions, types } from '../../redux/game'
-
-function createSocketChannel(socket) {
-  return eventChannel(emit => {
-    const makeHandler = (type) => (event) => {
-      const response = fromJS(JSON.parse(event.body))
-
-      emit({
-        type,
-        response
-      })
-    }
-
-    const newGameHandler = makeHandler(types.NEW_GAME)
-    const joinGameHandler = makeHandler(types.JOIN_GAME)
-
-    const newGame = socket.subscribe('/topic/games', newGameHandler)
-    const joinGame = socket.subscribe('/user/queue/join-game', joinGameHandler)
-
-    const unsubscribe = () => {
-      newGame.unsubscribe()
-      joinGame.unsubscribe()
-    }
-
-    return unsubscribe
-  })
-}
-
-export function* watchGames(socketConnection) {
-
-  const { socket } = socketConnection
-  const socketChannel = createSocketChannel(socket)
-
-  while (true) {
-    const { type, response } = yield take(socketChannel)
-
-    switch (type) {
-      case types.NEW_GAME:
-        yield put(actions.newGame(response))
-        break;
-      case types.JOIN_GAME:
-        yield put(actions.joinGame(response))
-        break;
-      default:
-        console.error('Unknown type')
-    }
-  }
-}
-
-export function* createGame(socketConnection) {
-  const { name } = yield take(types.CREATE_GAME)
-  const { socket } = socketConnection
-
-  socket.send("/app/lobby/create-game", JSON.stringify({
-    'gameName': name,
-    'playerName': 'Cesar92'
-  }), {})
-}
-
-export function* gameBrowserSaga(socketConnection) {
-  yield put(push('/lobby'))
-
-  yield [
-    call(watchGames, socketConnection),
-    call(createGame, socketConnection)
-  ]
-}
-
-export default gameBrowserSaga
diff --git a/frontend/src/sagas/usernameChoice.js b/frontend/src/sagas/usernameChoice.js
index 60a1a091..d0d0cdea 100644
--- a/frontend/src/sagas/usernameChoice.js
+++ b/frontend/src/sagas/usernameChoice.js
@@ -1,5 +1,6 @@
 import { call, take, put } from 'redux-saga/effects'
 import { eventChannel } from 'redux-saga'
+import { push } from 'react-router-redux'
 
 import { actions, types } from '../redux/user'
 
@@ -21,6 +22,7 @@ function *usernameValidation({ socket }) {
   const user = yield take(usernameChannel)
   yield put(actions.setUsername(user.username, user.displayName, user.index))
   usernameChannel.close()
+  yield put(push('/games'))
 }
 
 function *sendUsername({ socket }) {