frontend: completed chat functionality

labellab-client/package.json

@@ -83,6 +83,7 @@
     "semantic-ui-react": "^0.87.1",
     "semver": "6.3.0",
     "shallow-equal": "^1.1.0",
+    "socket.io-client": "^2.4.0",
     "style-loader": "1.0.0",
     "terser-webpack-plugin": "2.2.1",
     "ts-pnp": "1.1.5",

labellab-client/src/actions/project/teams.js

@@ -19,9 +19,12 @@ import {
   REMOVE_TEAM_MEMBER_FAILURE,
   FETCH_TEAM_MESSAGES_REQUEST,
   FETCH_TEAM_MESSAGES_SUCCESS,
-  FETCH_TEAM_MESSAGES_FAILURE
+  FETCH_TEAM_MESSAGES_FAILURE,
+  RECEIVE_MESSAGE,
+  SEND_MESSAGE
 } from '../../constants/index'
 
+import socket from '../../utils/webSocket'
 import FetchApi from '../../utils/FetchAPI'
 
 export const fetchAllTeams = projectId => {
@@ -206,3 +209,32 @@ export const fetchTeamMessages = teamId => {
     return { type: FETCH_TEAM_MESSAGES_FAILURE, payload: error }
   }
 }
+
+export const handleMessageReceive = teamId => {
+  return dispatch => {
+    socket.on('receive_message', data => {
+      const messageTeamId = data.team_id
+      if (messageTeamId == teamId) {
+        dispatch(success(data))
+      }
+    })
+  }
+  function success(data) {
+    return { type: RECEIVE_MESSAGE, payload: data }
+  }
+}
+
+export const sendMessage = (message, teamId, userId) => {
+  return dispatch => {
+    const data = {
+      body: message,
+      team_id: teamId,
+      user_id: userId
+    }
+    socket.emit('send_message', data)
+    dispatch(success())
+  }
+  function success() {
+    return { type: SEND_MESSAGE }
+  }
+}

labellab-client/src/components/project/chatroom.js

@@ -14,29 +14,57 @@ import {
 
 import './css/chatroom.css'
 import { isEmptyObject } from '../../utils/helpers'
-import { fetchTeam, fetchTeamMessages } from '../../actions/index'
+import {
+  fetchTeam,
+  fetchTeamMessages,
+  sendMessage,
+  handleMessageReceive
+} from '../../actions/index'
 
 class Chatroom extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      text: ''
+    }
+  }
+
   componentDidMount() {
     const {
       match: {
         params: { projectId, teamId }
       },
       team,
       fetchTeam,
-      fetchTeamMessages
+      fetchTeamMessages,
+      handleMessageReceive
     } = this.props
     if (!team || isEmptyObject(team)) {
       fetchTeam(projectId, teamId)
     }
     fetchTeamMessages(teamId)
+    handleMessageReceive(teamId)
   }
 
   capitalize = string => {
     if (!string) return
     return string.charAt(0).toUpperCase() + string.slice(1)
   }
 
+  handleChange = e => {
+    this.setState({ text: e.target.value })
+  }
+
+  handleSendMessage = () => {
+    const { team, user, sendMessage } = this.props
+    const text = this.state.text
+    if (!text) {
+      return
+    }
+    this.setState({ text: '' })
+    sendMessage(text, team.id, user.id)
+  }
+
   render() {
     const { user, history, team, teamActions, messages } = this.props
 
@@ -91,10 +119,13 @@ class Chatroom extends Component {
                   positive
                   content="Send"
                   labelPosition="right"
+                  onClick={this.handleSendMessage}
                 />
               }
               labelPosition="right"
+              value={this.state.text}
               placeholder="Write your message..."
+              onChange={this.handleChange}
             />
           </React.Fragment>
         ) : null}
@@ -147,6 +178,12 @@ const mapDispatchToProps = dispatch => {
     },
     fetchTeamMessages: teamId => {
       return dispatch(fetchTeamMessages(teamId))
+    },
+    sendMessage: (message, teamId, userId) => {
+      return dispatch(sendMessage(message, teamId, userId))
+    },
+    handleMessageReceive: teamId => {
+      return dispatch(handleMessageReceive(teamId))
     }
   }
 }

labellab-client/src/constants/project/teams.js

@@ -18,4 +18,6 @@ export const FETCH_TEAMS_FAILURE = 'FETCH_TEAMS_FAILURE',
   REMOVE_TEAM_MEMBER_FAILURE = 'REMOVE_TEAM_MEMBER_FAILURE',
   FETCH_TEAM_MESSAGES_REQUEST = 'FETCH_TEAM_MESSAGES_REQUEST',
   FETCH_TEAM_MESSAGES_SUCCESS = 'FETCH_TEAM_MESSAGES_SUCCESS',
-  FETCH_TEAM_MESSAGES_FAILURE = 'FETCH_TEAM_MESSAGES_FAILURE'
+  FETCH_TEAM_MESSAGES_FAILURE = 'FETCH_TEAM_MESSAGES_FAILURE',
+  SEND_MESSAGE = 'SEND_MESSAGE',
+  RECEIVE_MESSAGE = 'RECEIVE_MESSAGE'

labellab-client/src/reducers/teams.js

@@ -16,7 +16,8 @@ import {
   REMOVE_TEAM_MEMBER_FAILURE,
   FETCH_TEAM_MESSAGES_REQUEST,
   FETCH_TEAM_MESSAGES_SUCCESS,
-  FETCH_TEAM_MESSAGES_FAILURE
+  FETCH_TEAM_MESSAGES_FAILURE,
+  RECEIVE_MESSAGE
 } from '../constants/index'
 
 const initialState = {
@@ -132,6 +133,21 @@ const team = (state = initialState, action) => {
           isFetchingMessages: false
         }
       }
+    case RECEIVE_MESSAGE:
+      return {
+        ...state,
+        messages: [
+          {
+            id: payload.id,
+            body: payload.body,
+            team_id: payload.teamId,
+            user_id: payload.userId,
+            username: payload.username,
+            timestamp: payload.timestamp
+          },
+          ...state.messages
+        ]
+      }
     default:
       return state
   }

labellab-client/src/utils/webSocket.js

@@ -0,0 +1,8 @@
+import openSocket from 'socket.io-client'
+
+const URL = `http://${process.env.REACT_APP_HOST}:${process.env.REACT_APP_SERVER_PORT}`
+
+console.log(URL)
+const socket = openSocket(URL, { transports: ['websocket'] })
+
+export default socket