Better implementation of username choice

5 files changed, 59 insertions, 17 deletions

diff --git a/frontend/src/containers/home.js b/frontend/src/containers/home.js
index ce1b69fd..cc35f2bc 100644
--- a/frontend/src/containers/home.js
+++ b/frontend/src/containers/home.js
@@ -7,7 +7,7 @@ class HomePage extends Component {
   play = (e) => {
     e.preventDefault()
     if (this._username !== undefined) {
-      this.props.enterGame(this._username)
+      this.props.chooseUsername(this._username)
     }
   }
 
@@ -32,9 +32,9 @@ const mapStateToProps = (state) => ({
 
 })
 
-import { actions } from '../redux/game'
+import { actions } from '../redux/user'
 const mapDispatchToProps = {
-  enterGame: actions.enterGame
+  chooseUsername: actions.chooseUsername
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(HomePage)
diff --git a/frontend/src/redux/user.js b/frontend/src/redux/user.js
index 0279b49c..5926ed59 100644
--- a/frontend/src/redux/user.js
+++ b/frontend/src/redux/user.js
@@ -2,14 +2,19 @@ import { fromJS } from 'immutable'
 
 export const types = {
   SET_USERNAME: 'USER/SET_USERNAME',
+  CHOOSE_USERNAME: 'USER/CHOOSE_USERNAME'
+}
+
+export const actions = {
+  setUsername: (username, displayName, index) => ({
+    type: types.SET_USERNAME,
+    username,
+    index,
+    displayName
+  }),
+  chooseUsername: (username) => ({ type: types.CHOOSE_USERNAME, username }),
 }
 
-export const setUsername = (userName, displayName, index) => ({
-  type: types.SET_USERNAME,
-  userName,
-  index,
-  displayName
-})
 
 const initialState = fromJS({
   username: '',
@@ -20,7 +25,7 @@ const initialState = fromJS({
 export default (state = initialState, action) => {
   switch (action.type) {
     case types.SET_USERNAME:
-      return state.set('username', action.userName)
+      return state.set('username', action.username)
         .set('displayName', action.displayName)
         .set('id', action.index)
     default:
diff --git a/frontend/src/sagas.js b/frontend/src/sagas.js
index ab590a0d..e43e91c2 100644
--- a/frontend/src/sagas.js
+++ b/frontend/src/sagas.js
@@ -3,12 +3,12 @@ import { call } from 'redux-saga/effects'
 
 import createWsConnection from './utils/createWebSocketConnection'
 
-import homeSaga from './sagas/home'
+import usernameChoiceSaga from './sagas/usernameChoice'
 
 let wsConnection
 const routes = {
   *'/'() {
-    yield homeSaga(wsConnection)
+    yield usernameChoiceSaga(wsConnection)
   }
 }
 
diff --git a/frontend/src/sagas/home.js b/frontend/src/sagas/home.js
deleted file mode 100644
index 24f385c9..00000000
--- a/frontend/src/sagas/home.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function *homeSaga(wsConnection) {
-  yield console.log('home saga')
-}
-
-export default homeSaga
diff --git a/frontend/src/sagas/usernameChoice.js b/frontend/src/sagas/usernameChoice.js
new file mode 100644
index 00000000..60a1a091
--- /dev/null
+++ b/frontend/src/sagas/usernameChoice.js
@@ -0,0 +1,42 @@
+import { call, take, put } from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
+
+import { actions, types } from '../redux/user'
+
+function usernameValidationChannel(socket) {
+  return eventChannel(emitter => {
+    const receiveUsernameHandler = socket.subscribe('/user/queue/nameChoice', event => {
+      emitter(JSON.parse(event.body))
+    })
+
+    const unsubscribe = () => receiveUsernameHandler.unsubscribe()
+
+    return unsubscribe
+  })
+}
+
+function *usernameValidation({ socket }) {
+  const usernameChannel = usernameValidationChannel(socket)
+
+  const user = yield take(usernameChannel)
+  yield put(actions.setUsername(user.username, user.displayName, user.index))
+  usernameChannel.close()
+}
+
+function *sendUsername({ socket }) {
+  const { username } = yield take(types.CHOOSE_USERNAME)
+
+  yield socket.send('/app/chooseName', JSON.stringify({
+    playerName: username
+  }))
+}
+
+function *usernameChoiceSaga(wsConnection) {
+  // TODO: Run sendUsername in loop when we have the ability to cancel saga on route change
+  yield [
+    call(sendUsername, wsConnection),
+    call(usernameValidation, wsConnection),
+  ]
+}
+
+export default usernameChoiceSaga