8 files changed, 110 insertions, 12 deletions

diff --git a/src/main/js/src/containers/App/index.js b/src/main/js/src/containers/App/index.js
index 73b70ec3..5d9bba3c 100644
--- a/src/main/js/src/containers/App/index.js
+++ b/src/main/js/src/containers/App/index.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import { Link } from 'react-router'
 import {
   Banner,
   Heading,
@@ -55,13 +54,13 @@ class App extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-
-})
-
-import { initializeWs } from "./actions";
-const mapDispatchToProps = {
-  initializeWs
-}
+// const mapStateToProps = (state) => ({
+//
+// })
+//
+// import { initializeWs } from "./actions";
+// const mapDispatchToProps = {
+//   initializeWs
+// }
 
 export default App
diff --git a/src/main/js/src/containers/GameBrowser/actions.js b/src/main/js/src/containers/GameBrowser/actions.js
new file mode 100644
index 00000000..b5bba965
--- /dev/null
+++ b/src/main/js/src/containers/GameBrowser/actions.js
@@ -0,0 +1,11 @@
+import { NEW_GAME, JOIN_GAME } from './constants'
+
+export const newGame = (game) => ({
+  type: NEW_GAME,
+  game
+})
+
+export const joinGame = (id) => ({
+  type: JOIN_GAME,
+  id
+})
diff --git a/src/main/js/src/containers/GameBrowser/constants.js b/src/main/js/src/containers/GameBrowser/constants.js
new file mode 100644
index 00000000..c178dc3f
--- /dev/null
+++ b/src/main/js/src/containers/GameBrowser/constants.js
@@ -0,0 +1,2 @@
+export const NEW_GAME = 'gameBrowser/NEW_GAME'
+export const JOIN_GAME = 'gameBrowser/JOIN_GAME'
diff --git a/src/main/js/src/containers/GameBrowser/reducer.js b/src/main/js/src/containers/GameBrowser/reducer.js
new file mode 100644
index 00000000..533f6455
--- /dev/null
+++ b/src/main/js/src/containers/GameBrowser/reducer.js
@@ -0,0 +1,20 @@
+import { NEW_GAME } from './constants'
+
+const initialState = {
+  games: {}
+}
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+    case NEW_GAME:
+      return {
+        ...state,
+        games: {
+          ...state.games,
+          [action.game.id]: action.game
+        }
+      }
+    default:
+      return state
+  }
+}
diff --git a/src/main/js/src/containers/GameBrowser/saga.js b/src/main/js/src/containers/GameBrowser/saga.js
new file mode 100644
index 00000000..da45c3a3
--- /dev/null
+++ b/src/main/js/src/containers/GameBrowser/saga.js
@@ -0,0 +1,61 @@
+import { call, put, take } from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
+import createWebSocketConnection from '../../utils/createWebSocketConnection'
+
+import { NEW_GAME, JOIN_GAME } from './constants'
+import { newGame, joinGame } from './actions'
+
+function createSocketChannel(socket) {
+  return eventChannel(emit => {
+    const makeHandler = (type) => (event) => {
+      const response = JSON.parse(event.body)
+      emit({
+        type,
+        response
+      })
+    }
+
+    const newGameHandler = makeHandler(NEW_GAME)
+    const joinGameHandler = makeHandler(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* watchOnNewGames() {
+  let socketChannel
+  try {
+    const { socket } = yield call(createWebSocketConnection)
+    socketChannel = createSocketChannel(socket)
+  } catch (error) {
+    console.error('Cannot connect to socket', error)
+  }
+
+  if (!socketChannel) {
+    return
+  }
+
+  while (true) {
+    const { type, response } = yield take(socketChannel)
+    switch (type) {
+      case NEW_GAME:
+        yield put(newGame(response))
+        break;
+      case JOIN_GAME:
+        yield put(joinGame(response))
+        break;
+      default:
+        console.error('Unknown error')
+    }
+  }
+}
+
+export default watchOnNewGames
diff --git a/src/main/js/src/reducers.js b/src/main/js/src/reducers.js
index 79014615..4bfaf7c1 100644
--- a/src/main/js/src/reducers.js
+++ b/src/main/js/src/reducers.js
@@ -1,8 +1,11 @@
 import { combineReducers } from 'redux'
 
 import counterReducer from './containers/Counter/reducer'
+import gamesReducer from './containers/GameBrowser/reducer'
+
 export default function createReducer() {
   return combineReducers({
-    counter: counterReducer
+    counter: counterReducer,
+    games: gamesReducer,
   })
-}
\ No newline at end of file
+}
diff --git a/src/main/js/src/sagas.js b/src/main/js/src/sagas.js
index 46aa278e..4b8b057b 100644
--- a/src/main/js/src/sagas.js
+++ b/src/main/js/src/sagas.js
@@ -2,8 +2,10 @@ import { fork } from 'redux-saga/effects'
 
 import counterSaga from './containers/Counter/saga'
 import errorSaga from './containers/App/saga'
+import newGamesSaga from './containers/GameBrowser/saga'
 
 export default function* rootSaga() {
   yield fork(counterSaga)
   yield fork(errorSaga)
+  yield fork(newGamesSaga)
 }
diff --git a/src/main/js/src/utils/createWebSocketConnection.js b/src/main/js/src/utils/createWebSocketConnection.js
index 2f0e5245..00eb7ba0 100644
--- a/src/main/js/src/utils/createWebSocketConnection.js
+++ b/src/main/js/src/utils/createWebSocketConnection.js
@@ -10,4 +10,4 @@ export default () => {
       return resolve({ frame, socket })
     }, reject)
   })
-}
\ No newline at end of file
+}