Normalize games data from server and display games list

8 files changed, 39 insertions, 11 deletions

diff --git a/frontend/package.json b/frontend/package.json
index d4aed987..574e1c1c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,11 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.8.5",
-    "babel-polyfill": "^6.20.0"
+    "babel-polyfill": "^6.20.0",
+    "react-scripts": "0.8.5"
   },
   "dependencies": {
     "immutable": "^3.8.1",
+    "normalizr": "^3.1.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-redux": "^5.0.2",
diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js
index 40602efc..a8779b64 100644
--- a/frontend/src/containers/app.js
+++ b/frontend/src/containers/app.js
@@ -53,7 +53,7 @@ const mapStateToProps = (state) => ({
 })
 
 
-import { actions } from '../redux/game'
+import { actions } from '../redux/games'
 const mapDispatchToProps = {
   createGame: actions.createGame
 }
diff --git a/frontend/src/reducers.js b/frontend/src/reducers.js
index c280c8a7..9befff13 100644
--- a/frontend/src/reducers.js
+++ b/frontend/src/reducers.js
@@ -1,7 +1,7 @@
 import { combineReducers } from 'redux'
 import { routerReducer } from 'react-router-redux'
 
-import gamesReducer from './redux/game'
+import gamesReducer from './redux/games'
 import playersReducer from './redux/players'
 
 export default function createReducer() {
diff --git a/frontend/src/redux/game.js b/frontend/src/redux/games.js
index a19e155e..4d393317 100644
--- a/frontend/src/redux/game.js
+++ b/frontend/src/redux/games.js
@@ -8,7 +8,7 @@ export const types = {
 }
 
 export const actions = {
-  createOrUpdateGame: (game) => ({ type: types.CREATE_OR_UPDATE_GAMES, game }),
+  createOrUpdateGame: (games) => ({ type: types.CREATE_OR_UPDATE_GAMES, games }),
   enterGame: (username) => ({ type: types.ENTER_GAME, username }),
   joinGame: (id) => ({ type: types.JOIN_GAME, id }),
   createGame: (name) => ({ type: types.CREATE_GAME, name }),
@@ -21,6 +21,8 @@ export default (state = initialState, action) => {
   switch (action.type) {
     case types.NEW_GAME:
       return state.set(action.game.get('id'), action.game)
+    case types.CREATE_OR_UPDATE_GAMES:
+      return state.mergeDeep(action.games)
     default:
       return state
   }
diff --git a/frontend/src/redux/players.js b/frontend/src/redux/players.js
index e49d4bbf..99f27d80 100644
--- a/frontend/src/redux/players.js
+++ b/frontend/src/redux/players.js
@@ -2,6 +2,7 @@ import { fromJS } from 'immutable'
 
 export const types = {
   SET_USERNAME: 'USER/SET_USERNAME',
+  SET_USERNAMES: 'USER/SET_USERNAMES',
   CHOOSE_USERNAME: 'USER/CHOOSE_USERNAME'
 }
 
@@ -12,6 +13,7 @@ export const actions = {
     index,
     displayName
   }),
+  setPlayers: (players) => ({ type: types.SET_USERNAMES, players }),
   chooseUsername: (username) => ({ type: types.CHOOSE_USERNAME, username }),
 }
 
@@ -30,6 +32,8 @@ export default (state = initialState, action) => {
         index: action.index,
       })
       return state.setIn(['all', user.get('username')], user).set('current', user.get('username'))
+    case types.SET_USERNAMES:
+      return state.setIn(['all'], state.get('all').mergeDeep(action.players))
     default:
       return state
   }
diff --git a/frontend/src/sagas/gameBrowser.js b/frontend/src/sagas/gameBrowser.js
index 5b7227df..717cbd2a 100644
--- a/frontend/src/sagas/gameBrowser.js
+++ b/frontend/src/sagas/gameBrowser.js
@@ -3,7 +3,11 @@ import { eventChannel } from 'redux-saga'
 import { fromJS } from 'immutable'
 import { push } from 'react-router-redux'
 
-import { actions, types } from '../redux/game'
+import { normalize } from 'normalizr'
+import gameSchema from '../schemas/games'
+
+import { actions as gameActions, types } from '../redux/games'
+import { actions as playerActions } from '../redux/players'
 
 function gameBrowserChannel(socket) {
   return eventChannel(emit => {
@@ -34,13 +38,15 @@ export function *watchGames({ socket }) {
 
       switch (type) {
         case types.CREATE_OR_UPDATE_GAMES:
-          yield put(actions.createOrUpdateGame(response))
-          break;
+          const normalizedResponse = normalize(response.toJS(), gameSchema)
+          yield put(playerActions.setPlayers(fromJS(normalizedResponse.entities.players)))
+          yield put(gameActions.createOrUpdateGame(fromJS(normalizedResponse.entities.games)))
+          break
         case types.JOIN_GAME:
-          yield put(actions.joinGame(response))
-          socketChannel.close();
+          yield put(gameActions.joinGame(response))
+          socketChannel.close()
           yield put(push(`/lobby/${response.id}`))
-          break;
+          break
         default:
           console.error('Unknown type')
       }
diff --git a/frontend/src/schemas/games.js b/frontend/src/schemas/games.js
new file mode 100644
index 00000000..180c9e69
--- /dev/null
+++ b/frontend/src/schemas/games.js
@@ -0,0 +1,11 @@
+import { schema } from 'normalizr'
+
+const player = new schema.Entity('players', {}, {
+  idAttribute: 'username'
+})
+
+const game = new schema.Entity('games', {
+  players: [ player ]
+})
+
+export default [ game ]
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 6731c3d3..0148efbc 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3592,6 +3592,10 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+normalizr@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/normalizr/-/normalizr-3.1.0.tgz#5a1eaa334d91b88d2bf7f3c33559e4ed16a56370"
+
 npmlog@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.1.tgz#d14f503b4cd79710375553004ba96e6662fbc0b8"