[Frontend] Implemented Team-wise Chat System

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

@@ -16,9 +16,15 @@ import {
   ADD_TEAM_MEMBER_FAILURE,
   REMOVE_TEAM_MEMBER_REQUEST,
   REMOVE_TEAM_MEMBER_SUCCESS,
-  REMOVE_TEAM_MEMBER_FAILURE
+  REMOVE_TEAM_MEMBER_FAILURE,
+  FETCH_TEAM_MESSAGES_REQUEST,
+  FETCH_TEAM_MESSAGES_SUCCESS,
+  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 => {
@@ -185,3 +191,50 @@ export const removeTeamMember = (projectId, teamId, memberEmail, callback) => {
     return { type: REMOVE_TEAM_MEMBER_FAILURE, payload: error }
   }
 }
+
+export const fetchTeamMessages = teamId => {
+  return dispatch => {
+    dispatch(request())
+    FetchApi.get(`api/v1/chatroom/${teamId}`)
+      .then(res => dispatch(success(res.data.body)))
+      .catch(err => dispatch(failure(err.response.data.msg)))
+  }
+  function request() {
+    return { type: FETCH_TEAM_MESSAGES_REQUEST }
+  }
+  function success(data) {
+    return { type: FETCH_TEAM_MESSAGES_SUCCESS, payload: data }
+  }
+  function failure(error) {
+    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

@@ -0,0 +1,194 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import {
+  Dimmer,
+  Loader,
+  Grid,
+  Header,
+  Icon,
+  Divider,
+  Input,
+  Button
+} from 'semantic-ui-react'
+
+import './css/chatroom.css'
+import { isEmptyObject } from '../../utils/helpers'
+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,
+      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
+
+    return (
+      <React.Fragment>
+        {teamActions.isFetchingMessages || teamActions.isFetching ? (
+          <Dimmer active>
+            <Loader indeterminate>Loading messages...</Loader>
+          </Dimmer>
+        ) : null}
+        {team && team.members ? (
+          <React.Fragment>
+            <Grid>
+              <Grid.Row>
+                <Grid.Column width={1}>
+                  <Icon
+                    className="icon-button"
+                    name="angle left"
+                    onClick={() => history.goBack()}
+                  />
+                </Grid.Column>
+                <Grid.Column width={15}>
+                  <Header as="h4" subheader>
+                    {this.capitalize(team.teamName)}
+                    <Header.Subheader>{`${team.members.length} members`}</Header.Subheader>
+                  </Header>
+                </Grid.Column>
+              </Grid.Row>
+              <Divider className="chatroom-divider" />
+            </Grid>
+            <div className="messages-container">
+              {messages.length === 0 ? (
+                <div className="no-messages-banner">
+                  <Icon name="warning circle" size="large" />
+                  <p>No messages</p>
+                </div>
+              ) : null}
+              {messages.map(message => (
+                <MessageItem
+                  key={message.id}
+                  message={message}
+                  userId={user.id}
+                />
+              ))}
+            </div>
+            <Divider />
+            <Input
+              fluid
+              label={
+                <Button
+                  icon="angle right"
+                  positive
+                  content="Send"
+                  labelPosition="right"
+                  onClick={this.handleSendMessage}
+                />
+              }
+              labelPosition="right"
+              value={this.state.text}
+              placeholder="Write your message..."
+              onChange={this.handleChange}
+            />
+          </React.Fragment>
+        ) : null}
+      </React.Fragment>
+    )
+  }
+}
+
+const MessageItem = ({ message, userId }) => {
+  const isOwnMessage = userId === message.user_id
+  let messageItemClass = 'message-item '
+  if (isOwnMessage) {
+    messageItemClass += 'own-message'
+  } else {
+    messageItemClass += 'other-message'
+  }
+
+  return (
+    <div className={messageItemClass}>
+      <small>{message.username}</small>
+      <p>{message.body}</p>
+      <small>{message.timestamp}</small>
+    </div>
+  )
+}
+
+Chatroom.propTypes = {
+  user: PropTypes.object,
+  team: PropTypes.object,
+  roles: PropTypes.object,
+  teamActions: PropTypes.object,
+  messages: PropTypes.array,
+  fetchTeamMessages: PropTypes.func
+}
+
+const mapStateToProps = state => {
+  return {
+    user: state.user.userDetails,
+    team: state.teams.currentTeam,
+    messages: state.teams.messages,
+    teamActions: state.teams.teamActions,
+    roles: state.projects.currentProject.roles
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchTeam: (projectId, teamId) => {
+      return dispatch(fetchTeam(projectId, teamId))
+    },
+    fetchTeamMessages: teamId => {
+      return dispatch(fetchTeamMessages(teamId))
+    },
+    sendMessage: (message, teamId, userId) => {
+      return dispatch(sendMessage(message, teamId, userId))
+    },
+    handleMessageReceive: teamId => {
+      return dispatch(handleMessageReceive(teamId))
+    }
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Chatroom)

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

@@ -0,0 +1,49 @@
+.icon-button {
+  cursor: pointer;
+}
+.chatroom-divider {
+  margin-top: 0 !important;
+}
+.messages-container {
+  height: 55vh;
+  width: 100% !important;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.message-item {
+  display: flex;
+  flex-direction: column;
+  padding: 7.5px 25px;
+  margin: 5px 10px;
+  width: fit-content;
+  max-width: 50%;
+  border-radius: 30px;
+}
+.message-item small {
+  color: #fff;
+  opacity: 0.7;
+}
+.message-item p {
+  margin-bottom: 5px;
+}
+.own-message {
+  background-color: #2185d0;
+  color: #fff;
+  align-self: flex-end;
+  text-align: end;
+  padding-left: 40px;
+}
+.other-message {
+  background-color: #2185d0;
+  color: #fff;
+  opacity: 0.6;
+  padding-right: 40px;
+}
+.no-messages-banner {
+  display: flex;
+  height: inherit;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -71,6 +71,10 @@ const ProjectActivity = Loadable({
   loader: () => import('./projectActivity'),
   loading: Loading
 })
+const Chatroom = Loadable({
+  loader: () => import('./chatroom'),
+  loading: Loading
+})
 
 class ProjectIndex extends Component {
   constructor(props) {
@@ -177,6 +181,11 @@ class ProjectIndex extends Component {
                 path={`${match.path}/logs/entity/:entityType/:entityId`}
                 component={ProjectActivity}
               />
+              <PrivateRoute
+                exact
+                path={`${match.path}/chatroom/:teamId`}
+                component={Chatroom}
+              />
             </Switch>
           </div>
         </div>

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

@@ -243,7 +243,16 @@ class TeamDetails extends Component {
                 </Grid.Column>
                 <Grid.Column width={6}>
                   <Grid.Row>
-                    <Button positive icon labelPosition="left">
+                    <Button
+                      positive
+                      icon
+                      labelPosition="left"
+                      onClick={() =>
+                        history.push(
+                          `/project/${team.projectId}/chatroom/${team.id}`
+                        )
+                      }
+                    >
                       <Icon name="chat" />
                       Chat
                     </Button>

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

@@ -15,4 +15,9 @@ export const FETCH_TEAMS_FAILURE = 'FETCH_TEAMS_FAILURE',
   ADD_TEAM_MEMBER_FAILURE = 'ADD_TEAM_MEMBER_FAILURE',
   REMOVE_TEAM_MEMBER_REQUEST = 'REMOVE_TEAM_MEMBER_REQUEST',
   REMOVE_TEAM_MEMBER_SUCCESS = 'REMOVE_TEAM_MEMBER_SUCCESS',
-  REMOVE_TEAM_MEMBER_FAILURE = 'REMOVE_TEAM_MEMBER_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',
+  SEND_MESSAGE = 'SEND_MESSAGE',
+  RECEIVE_MESSAGE = 'RECEIVE_MESSAGE'