Feature/chat

client/package.json

@@ -24,11 +24,12 @@
     "react": "^15.6.1",
     "react-bootstrap": "^0.31.2",
     "react-dom": "^15.6.1",
+    "react-popup": "^0.8.0",
+    "react-popupbox": "^2.0.1",
     "react-redux": "^5.0.6",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
     "react-swipe-card": "^0.1.4",
-    "react-popupbox": "^2.0.1",
     "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.7.2",
     "redux-devtools-extension": "^2.13.2",

client/src/MainApp/MatchmakerEvent.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import Cards, { Card } from 'react-swipe-card';
-import PopupChat from './PopupChat.jsx';
 
 class MatchmakerEvent extends Component {
   render () {
@@ -10,7 +9,6 @@ class MatchmakerEvent extends Component {
     console.log(data)
     return (
       <div>
-        <PopupChat /> 
         <Cards onEnd={() => console.log('end')} className='master-root'>
           { 
             data.map(item =>

client/src/MainApp/MatchmakerPage.jsx

@@ -4,18 +4,46 @@ import io from 'socket.io-client';
 import { connect } from 'react-redux';
 import Slider from './Slider.jsx';
 import jwt from 'jsonwebtoken';
+import PopupChat from './PopupChat.jsx';
 
 class MatchmakerPage extends Component {
   constructor(props) {
     super(props);
     this.state = {
       compatUsers: [],
       defaultValue: 50,
-      currentUserName: ''
+      currentUserName: '',
+      ownUserName: this.props.auth.user.username,
+      messages: [],
     };
     this.updateCompat = this.updateCompat.bind(this);
     this.updateDefaultValue = this.updateDefaultValue.bind(this);
     this.updateCurrentUserName = this.updateCurrentUserName.bind(this);
+    this.newPost = this.newPost.bind(this)
+  }
+
+  newPost(post) {
+    const socket = this.props.socket
+    const message = {
+      type: "postMessage",
+      username: this.state.ownUserName,
+      message: post,
+    }
+    // ws.send(JSON.stringify(message))
+    this.setState({ input: ''})
+    // console.log(JSON.stringify(message))
+    const chatbar = document.getElementById('chatbar');
+    chatbar.value = '';
+    this.socket.emit('send message', JSON.stringify(message))
+    console.log('message sent')
+  }
+
+  updateMessages(data) {
+    const broadcastedMessage = this.state.messages.concat(data);
+    this.setState({
+      messages: broadcastedMessage
+    });
+    console.log('this.set.messages: ', this.state.messages)
   }
 
   updateCompat(users) {
@@ -70,6 +98,13 @@ class MatchmakerPage extends Component {
           console.log('Respond to ', senderData.username, ' ?');
         }
       })
+      .on('new message', function(data){
+        const messageData = JSON.parse(data)
+        const message = {username: messageData.username,
+                          content: messageData.message,}
+        console.log(message)
+        c.updateMessages(message);
+      })
       .on('disconnect', function(){
         this.socket.emit('disconnect', c.state.currentUserName);
       })
@@ -87,12 +122,31 @@ class MatchmakerPage extends Component {
 
   render () {
     return (
-      <div>
-        <Slider onSliderUpdate={ this.updateUserSeriousness } sliderDefaultValue={this.state.defaultValue}/>
-        <MatchmakerEvent compatUsers={this.state.compatUsers} inviteUserB = {this.inviteUserB}/>
+      <div className="matchmaker-container">
+        <div className="slider-container">
+          <Slider onSliderUpdate={ this.updateUserSeriousness } sliderDefaultValue={this.state.defaultValue}/>
+        </div>
+        <div className="matchmakerEventAndChat-container">
+          <div>
+            <MatchmakerEvent compatUsers={this.state.compatUsers} inviteUserB = {this.inviteUserB}/>  
+          </div>
+          <div>     
+            <PopupChat newPost={this.newPost} ownUownUserName={this.state.ownUserName} messages={this.state.messages} /> 
+          </div>
+        </div>
       </div>
     );
   }
 }
 
-export default MatchmakerPage;
+MatchmakerPage.PropTypes = {
+  auth: React.PropTypes.object.isRequired,
+}
+
+function mapStateToProps(state) {
+  return {
+    auth: state.auth
+  };
+}
+
+export default connect(mapStateToProps)(MatchmakerPage);