Add redux selectors

3 files changed, 13 insertions, 6 deletions

diff --git a/frontend/src/containers/gameBrowser.js b/frontend/src/containers/gameBrowser.js
index 11cadcf6..8c48f071 100644
--- a/frontend/src/containers/gameBrowser.js
+++ b/frontend/src/containers/gameBrowser.js
@@ -30,7 +30,7 @@ class App extends Component {
           >
           </InlineForm>
           <Space auto />
-          <Text><b>Username:</b> {this.props.username}</Text>
+          <Text><b>Username:</b> {this.props.currentPlayer.get('displayName')}</Text>
           <Space x={1} />
         </Flex>
         <GamesList games={this.props.games} />
@@ -39,13 +39,14 @@ class App extends Component {
   }
 }
 
+import { getCurrentPlayer } from '../redux/players'
+import { getAllGames, actions } from '../redux/games'
 const mapStateToProps = (state) => ({
-  username: state.get('players').get('all').get(state.get('players').get('current')).get('displayName'),
-  games: state.get('games')
+  currentPlayer: getCurrentPlayer(state),
+  games: getAllGames(state)
 })
 
 
-import { actions } from '../redux/games'
 const mapDispatchToProps = {
   createGame: actions.createGame
 }
diff --git a/frontend/src/redux/games.js b/frontend/src/redux/games.js
index b5fd910e..4115323c 100644
--- a/frontend/src/redux/games.js
+++ b/frontend/src/redux/games.js
@@ -25,3 +25,5 @@ export default (state = initialState, action) => {
       return state
   }
 }
+
+export const getAllGames = state => state.get('games')
diff --git a/frontend/src/redux/players.js b/frontend/src/redux/players.js
index 99f27d80..967d93b6 100644
--- a/frontend/src/redux/players.js
+++ b/frontend/src/redux/players.js
@@ -1,4 +1,4 @@
-import { fromJS } from 'immutable'
+import { fromJS, Map } from 'immutable'
 
 export const types = {
   SET_USERNAME: 'USER/SET_USERNAME',
@@ -20,7 +20,7 @@ export const actions = {
 
 const initialState = fromJS({
   all: {},
-  current: null
+  current: ''
 })
 
 export default (state = initialState, action) => {
@@ -38,3 +38,7 @@ export default (state = initialState, action) => {
       return state
   }
 }
+
+export const getCurrentPlayerUserName = state => state.get('players').get('current')
+export const getAllPlayers = state => state.get('players').get('all')
+export const getCurrentPlayer = (state) => getAllPlayers(state).get(getCurrentPlayerUserName(state), Map())