Organize message actions better

client/src/actions/app.js

@@ -1,3 +1,7 @@
+import {
+  process as processMessage,
+} from 'utils/message'
+
 export const openModal = payload => ({ type: 'OPEN_MODAL', payload })
 export const closeModal = () => ({ type: 'CLOSE_MODAL' })
 
@@ -18,3 +22,18 @@ export const toggleSoundEnabled = payload => async (dispatch) => {
 export const toggleSocketConnected = payload => async (dispatch) => {
   dispatch({ type: 'TOGGLE_SOCKET_CONNECTED', payload })
 }
+
+export const receiveEncryptedMessage = payload => async (dispatch, getState) => {
+  const state = getState()
+  const message = await processMessage(payload, state)
+  // Pass current state to all RECEIVE_ENCRYPTED_MESSAGE reducers for convenience, since each may have different needs
+  dispatch({ type: `RECEIVE_ENCRYPTED_MESSAGE_${message.type}`, payload: { payload: message.payload, state } })
+}
+
+export const createUser = payload => async (dispatch) => {
+  dispatch({ type: 'CREATE_USER', payload })
+}
+
+export const clearActivities = () => async (dispatch) => {
+  dispatch({ type: 'CLEAR_ACTIVITIES' })
+}

client/src/actions/encrypted_messages.js

@@ -0,0 +1,11 @@
+import { getSocket } from 'utils/socket'
+import {
+  prepare as prepareMessage,
+} from 'utils/message'
+
+export const sendEncryptedMessage = payload => async (dispatch, getState) => {
+  const state = getState()
+  const msg = await prepareMessage(payload, state)
+  dispatch({ type: `SEND_ENCRYPTED_MESSAGE_${msg.original.type}`, payload: msg.original.payload })
+  getSocket().emit('ENCRYPTED_MESSAGE', msg.toSend)
+}

client/src/actions/index.js

@@ -1,3 +1,4 @@
-export * from './room'
 export * from './app'
+export * from './unencrypted_messages'
+export * from './encrypted_messages'
 

client/src/actions/room.js

@@ -1,99 +0,0 @@
-import isEqual from 'lodash/isEqual'
-import {
-  process as processMessage,
-  prepare as prepareMessage,
-} from 'utils/message'
-import { getSocket } from 'utils/socket'
-
-export const receiveEncryptedMessage = payload => async (dispatch, getState) => {
-  const state = getState()
-  const message = await processMessage(payload, state)
-  // Pass current state to all RECEIVE_ENCRYPTED_MESSAGE reducers for convenience, since each may have different needs
-  dispatch({ type: `RECEIVE_ENCRYPTED_MESSAGE_${message.type}`, payload: { payload: message.payload, state } })
-}
-
-export const createUser = payload => async (dispatch) => {
-  dispatch({ type: 'CREATE_USER', payload })
-}
-
-export const sendUserEnter = payload => async () => {
-  getSocket().emit('USER_ENTER', {
-    publicKey: payload.publicKey,
-  })
-}
-
-export const receiveUserExit = payload => async (dispatch, getState) => {
-  const state = getState()
-  const exitingUser = state.room.members.find(m => !payload.map(p => JSON.stringify(p.publicKey)).includes(JSON.stringify(m.publicKey)))
-
-  if (!exitingUser) {
-    return;
-  }
-
-  const exitingUserId = exitingUser.id
-  const exitingUsername = exitingUser.username
-
-  dispatch({
-    type: 'USER_EXIT',
-    payload: {
-      members: payload,
-      id: exitingUserId,
-      username: exitingUsername,
-    },
-  })
-}
-
-export const receiveUserEnter = payload => async (dispatch) => {
-  dispatch({ type: 'USER_ENTER', payload })
-}
-
-export const onFileTransfer = payload => async (dispatch) => {
-  dispatch({ type: 'PREFLIGHT_FILE_TRANSFER', payload })
-}
-
-export const sendEncryptedMessage = payload => async (dispatch, getState) => {
-  const state = getState()
-  const msg = await prepareMessage(payload, state)
-  dispatch({ type: `SEND_ENCRYPTED_MESSAGE_${msg.original.type}`, payload: msg.original.payload })
-  getSocket().emit('ENCRYPTED_MESSAGE', msg.toSend)
-}
-
-export const toggleLockRoom = () => async (dispatch, getState) => {
-  const state = getState()
-  getSocket().emit('TOGGLE_LOCK_ROOM', null, (res) => {
-    dispatch({
-      type: 'TOGGLE_LOCK_ROOM',
-      payload: {
-        locked: res.isLocked,
-        username: state.user.username,
-        sender: state.user.id,
-      },
-    })
-  })
-}
-
-export const receiveToggleLockRoom = payload => async (dispatch, getState) => {
-  const state = getState()
-
-  const lockedByUser = state.room.members.find(m => isEqual(m.publicKey, payload.publicKey))
-  const lockedByUsername = lockedByUser.username
-  const lockedByUserId = lockedByUser.id
-
-  dispatch({
-    type: 'RECEIVE_TOGGLE_LOCK_ROOM',
-    payload: {
-      username: lockedByUsername,
-      locked: payload.locked,
-      id: lockedByUserId,
-    },
-  })
-}
-
-export const clearActivities = () => async (dispatch) => {
-  dispatch({ type: 'CLEAR_ACTIVITIES' })
-}
-
-export const sendUserDisconnect = () => async () => {
-  getSocket().emit('USER_DISCONNECT')
-}
-

client/src/actions/unencrypted_messages.js

@@ -0,0 +1,80 @@
+import { getSocket } from 'utils/socket'
+import isEqual from 'lodash/isEqual'
+
+const receiveUserEnter = (payload, dispatch) => {
+  dispatch({ type: 'USER_ENTER', payload })
+}
+
+const receiveToggleLockRoom = (payload, dispatch, getState) => {
+  const state = getState()
+
+  const lockedByUser = state.room.members.find(m => isEqual(m.publicKey, payload.publicKey))
+  const lockedByUsername = lockedByUser.username
+  const lockedByUserId = lockedByUser.id
+
+  dispatch({
+    type: 'RECEIVE_TOGGLE_LOCK_ROOM',
+    payload: {
+      username: lockedByUsername,
+      locked: payload.locked,
+      id: lockedByUserId,
+    },
+  })
+}
+
+const receiveUserExit = (payload, dispatch, getState) => {
+  const state = getState()
+  const exitingUser = state.room.members.find(m => !payload.map(p => JSON.stringify(p.publicKey)).includes(JSON.stringify(m.publicKey)))
+
+  if (!exitingUser) {
+    return;
+  }
+
+  const exitingUserId = exitingUser.id
+  const exitingUsername = exitingUser.username
+
+  dispatch({
+    type: 'USER_EXIT',
+    payload: {
+      members: payload,
+      id: exitingUserId,
+      username: exitingUsername,
+    },
+  })
+}
+
+export const receiveUnencryptedMessage = (type, payload) => async (dispatch, getState) => {
+  switch(type) {
+    case 'USER_ENTER':
+      return receiveUserEnter(payload, dispatch);
+    case 'USER_EXIT':
+      return receiveUserExit(payload, dispatch, getState);
+    case 'TOGGLE_LOCK_ROOM':
+      return receiveToggleLockRoom(payload, dispatch, getState);
+    default:
+      return;
+  }
+}
+
+const sendToggleLockRoom = (dispatch, getState) => {
+  const state = getState()
+  getSocket().emit('TOGGLE_LOCK_ROOM', null, (res) => {
+    dispatch({
+      type: 'TOGGLE_LOCK_ROOM',
+      payload: {
+        locked: res.isLocked,
+        username: state.user.username,
+        sender: state.user.id,
+      },
+    })
+  })
+}
+
+export const sendUnencryptedMessage = (type, payload) => async (dispatch, getState) => {
+  switch(type) {
+    case 'TOGGLE_LOCK_ROOM':
+      return sendToggleLockRoom(dispatch, getState);
+    default:
+      return;
+  }
+}

client/src/components/Home/index.js

@@ -24,20 +24,16 @@ import { getObjectUrl } from 'utils/file'
 import { connect } from 'react-redux'
 import {
   receiveEncryptedMessage,
-  sendEncryptedMessage,
   createUser,
-  receiveUserExit,
-  receiveUserEnter,
-  toggleLockRoom,
-  receiveToggleLockRoom,
   openModal,
   closeModal,
   setScrolledToBottom,
-  sendUserEnter,
   toggleWindowFocus,
   toggleSoundEnabled,
   toggleSocketConnected,
-  sendUserDisconnect
+  receiveUnencryptedMessage,
+  sendUnencryptedMessage,
+  sendEncryptedMessage
 } from 'actions'
 
 import styles from './styles.module.scss'
@@ -65,29 +61,19 @@ class Home extends Component {
 
     const socket = connectSocket(roomId)
 
-    const disconnectEvents = [
+    this.socket = socket;
-      'disconnect',
-    ]
 
-    disconnectEvents.forEach((evt) => {
+    socket.on('disconnect', () => {
-      socket.on(evt, () => {
+      this.props.toggleSocketConnected(false)
-        this.props.toggleSocketConnected(false)
-      })
     })
 
-    const connectEvents = [
+    socket.on('connect', () => {
-      'connect',
+      this.initApp(user)
-    ]
+      this.props.toggleSocketConnected(true)
-
-    connectEvents.forEach((evt) => {
-      socket.on(evt, () => {
-        this.initApp(user)
-        this.props.toggleSocketConnected(true)
-      })
     })
 
     socket.on('USER_ENTER', (payload) => {
-      this.props.receiveUserEnter(payload)
+      this.props.receiveUnencryptedMessage('USER_ENTER', payload)
       this.props.sendEncryptedMessage({
         type: 'ADD_USER',
         payload: {
@@ -100,7 +86,7 @@ class Home extends Component {
     })
 
     socket.on('USER_EXIT', (payload) => {
-      this.props.receiveUserExit(payload)
+      this.props.receiveUnencryptedMessage('USER_EXIT', payload)
     })
 
     socket.on('ENCRYPTED_MESSAGE', (payload) => {
@@ -108,7 +94,7 @@ class Home extends Component {
     })
 
     socket.on('TOGGLE_LOCK_ROOM', (payload) => {
-      this.props.receiveToggleLockRoom(payload)
+      this.props.receiveUnencryptedMessage('TOGGLE_LOCK_ROOM', payload)
     })
 
     socket.on('ROOM_LOCKED', (payload) => {
@@ -116,7 +102,7 @@ class Home extends Component {
     });
 
     window.addEventListener('beforeunload', (evt) => {
-      this.props.sendUserDisconnect();
+      socket.emit('USER_DISCONNECT')
     });
   }
 
@@ -289,7 +275,7 @@ class Home extends Component {
   }
 
   initApp(user) {
-    this.props.sendUserEnter({
+    this.socket.emit('USER_ENTER', {
       publicKey: user.publicKey,
     })
   }
@@ -363,7 +349,7 @@ class Home extends Component {
             members={this.props.members}
             roomId={this.props.roomId}
             roomLocked={this.props.roomLocked}
-            toggleLockRoom={this.props.toggleLockRoom}
+            toggleLockRoom={() => this.props.sendUnencryptedMessage('TOGGLE_LOCK_ROOM')}
             openModal={this.props.openModal}
             iAmOwner={this.props.iAmOwner}
             userId={this.props.userId}
@@ -426,10 +412,7 @@ Home.defaultProps = {
 
 Home.propTypes = {
   receiveEncryptedMessage: PropTypes.func.isRequired,
-  sendEncryptedMessage: PropTypes.func.isRequired,
   createUser: PropTypes.func.isRequired,
-  receiveUserExit: PropTypes.func.isRequired,
-  receiveUserEnter: PropTypes.func.isRequired,
   activities: PropTypes.array.isRequired,
   username: PropTypes.string.isRequired,
   publicKey: PropTypes.object.isRequired,
@@ -437,16 +420,12 @@ Home.propTypes = {
   match: PropTypes.object.isRequired,
   roomId: PropTypes.string.isRequired,
   roomLocked: PropTypes.bool.isRequired,
-  toggleLockRoom: PropTypes.func.isRequired,
-  receiveToggleLockRoom: PropTypes.func.isRequired,
   modalComponent: PropTypes.string,
   openModal: PropTypes.func.isRequired,
   closeModal: PropTypes.func.isRequired,
   setScrolledToBottom: PropTypes.func.isRequired,
   scrolledToBottom: PropTypes.bool.isRequired,
   iAmOwner: PropTypes.bool.isRequired,
-  sendUserEnter: PropTypes.func.isRequired,
-  sendUserDisconnect: PropTypes.func.isRequired,
   userId: PropTypes.string.isRequired,
   joining: PropTypes.bool.isRequired,
   toggleWindowFocus: PropTypes.func.isRequired,
@@ -455,6 +434,8 @@ Home.propTypes = {
   toggleSoundEnabled: PropTypes.func.isRequired,
   toggleSocketConnected: PropTypes.func.isRequired,
   socketConnected: PropTypes.bool.isRequired,
+  sendUnencryptedMessage: PropTypes.func.isRequired,
+  sendEncryptedMessage: PropTypes.func.isRequired
 }
 
 const mapStateToProps = (state) => {
@@ -481,20 +462,16 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = {
   receiveEncryptedMessage,
-  sendEncryptedMessage,
-  receiveUserExit,
-  receiveUserEnter,
   createUser,
-  toggleLockRoom,
-  receiveToggleLockRoom,
   openModal,
   closeModal,
   setScrolledToBottom,
-  sendUserEnter,
   toggleWindowFocus,
   toggleSoundEnabled,
   toggleSocketConnected,
-  sendUserDisconnect
+  receiveUnencryptedMessage,
+  sendUnencryptedMessage,
+  sendEncryptedMessage
 }
 
 export default connect(