Feature/chat

client/package.json

@@ -27,7 +27,7 @@
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
     "react-swipe-card": "^0.1.4",
-    "react-popupbox":"^2.0.1",
+    "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/PopupChat.jsx

@@ -1,66 +1,113 @@
 import React, { Component } from 'react';
 //Used react-popupbox because of ease of integration. However, if given more time, would have switched it to the official reactjs 'react-modal' package that has the same functionality https://reactcommunity.org/react-modal/
 import { PopupboxManager, PopupboxContainer } from 'react-popupbox';
+import { connect } from 'react-redux';
 
 class PopupChat extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentUser: this.props.auth.user.username,
+      input: '',
+    }
+    this.newPost = this.newPost.bind(this);
+    this.onChange = this.onChange.bind(this);
+  }
+
+  newPost() {
+    const message = {
+      type: "postMessage",
+      username: this.state.currentUser,
+      message: this.state.input,
+    }
+    // ws.send(JSON.stringify(message))
+    this.setState({ input: ''})
+    console.log(JSON.stringify(message))
+    const chatbar = document.getElementById('chatbar');
+    chatbar.value = '';
+  }
+
+  onChange(e) {
+    this.setState({ [e.target.name]: e.target.value });
+  }
+
   openPopupbox = () => {
     const content = (
       <div>
         <span>MessageList</span>
-          <input 
-            className = "chat-message" 
-            placeholder = "Type a message and hit ENTER"
-          />
-        <button className="demo-button" onClick={ this.updatePopupbox }>Send</button>
+        <input
+          name="input"
+          id="chatbar"
+          className="chat-message"
+          placeholder="Type a message and hit ENTER"
+          onChange={this.onChange}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              this.newPost();
+            }
+          }}
+        />
+        <button className="demo-button" onClick={this.newPost}>Send</button>
       </div>
     )
 
-    PopupboxManager.open({ 
+    PopupboxManager.open({
       content,
       config: {
         titleBar: {
           enable: true,
-          text: 'From: Username A'
+          text: `From: ${this.state.currentUser}`
         }
       }
     })
   }
 
-  updatePopupbox = () => {
-    const content = (
-      <div>
-        <span>MessageList</span>
-        <footer>
-          <input 
-            className = "chat-message" 
-            placeholder = "Type a message and hit ENTER"
-          />
-          <button className="demo-button" onClick={ this.openPopupbox }>Send</button>
-        </footer>
-      </div>
-    )
+  // updatePopupbox = () => {
+  //   const content = (
+  //     <div>
+  //       <span>MessageList</span>
+  //       <footer>
+  //         <input 
+  //           className = "chat-message" 
+  //           placeholder = "Type a message and hit ENTER"
+  //         />
+  //         <button className="demo-button" onClick={ this.openPopupbox }>Send</button>
+  //       </footer>
+  //     </div>
+  //   )
 
-    PopupboxManager.update({
-      content,
-      config: {
-        titleBar: {
-          text:'From: Username B',
-          closeButton: true
-        }
-      }
-    })
-  }
+  //   PopupboxManager.update({
+  //     content,
+  //     config: {
+  //       titleBar: {
+  //         text:'From: Username B',
+  //         closeButton: true
+  //       }
+  //     }
+  //   })
+  // }
 
   render() {
     return (
-    //Pop up currently triggered by a button click
-    //Eventually, the popup should be activated by an accepted invitation from a potential teammate
-    <div>
-      <button className="popupbox-trigger" onClick={ this.openPopupbox }>Click me</button>
-      <PopupboxContainer />
-    </div>
+      //Pop up currently triggered by a button click
+      //Eventually, the popup should be activated by an accepted invitation from a potential teammate
+      <div>
+        <button className="popupbox-trigger" onClick={this.openPopupbox}>Click me</button>
+        <PopupboxContainer />
+      </div>
     )
   }
 }
 
-export default PopupChat;
+PopupChat.PropTypes = {
+  auth: React.PropTypes.object.isRequired,
+}
+
+function mapStateToProps(state) {
+  return {
+    auth: state.auth
+  };
+}
+
+export default connect(mapStateToProps)(PopupChat);

client/styles/main.scss

@@ -119,11 +119,174 @@ nav {
   margin-left: 50%;
   }
 
-  .alert-bottom {
+.alert-bottom {
   bottom: 0;
   background: blue;
   border-top-left-radius: 50px;
   border-radius: 50px;
   transform: translate(-50%, 0);
   margin-left: 50%;
-  }
+}
+
+.popupbox {
+  width:100%;
+  height:100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -o-flex;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1000;
+};
+
+.popupbox[hidden] {
+  display: none;
+}
+
+.popupbox-overlay {
+  position:fixed;
+  top: 0;
+  left: 0;
+  width:100%;
+  height:100%;
+  z-index:1002;
+  background: none repeat scroll 0% 0% #000;
+}
+
+.popupbox-content {
+  overflow: hidden;
+}
+
+.popupbox-wrapper {
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -o-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  z-index: 1003;
+  position: relative;
+}
+
+.popupbox-titleBar {
+  overflow: hidden;
+  display: block;
+  position: relative;
+}
+
+.popupbox-btn--close {
+  z-index: 1004;
+}
+
+.popupbox[data-title='bottom'] .popupbox-content { order: 1 }
+.popupbox[data-title='bottom'] .popupbox-titleBar { order: 2 }
+
+/* ----- default theme ----- */
+
+.popupbox-wrapper {
+  border-radius: 3px;
+  overflow: hidden;
+  max-width: 80%;
+  min-width: 300px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, .9);
+  background-color: white;
+}
+
+.popupbox-content {
+  height: 300px;
+  padding: 20px 24px 30px;
+}
+
+.popupbox-titleBar {
+  font-weight: bold;
+  font-size: 18px;
+  text-shadow: 0 -1px 1px rgba(0, 0, 0, .2);
+  padding: 11px 37px 11px 24px;
+  border-bottom: 1px #ccc solid;
+}
+
+.popupbox-btn--close {
+  transition: all .5s;
+  position: absolute;
+  right: 11px;
+  top: 11px;
+  color: #c1c1c1;
+  background: none;
+  border: none;
+  outline: none;
+}
+
+.popupbox-btn--close:hover {
+  color: #000;
+}
+
+.popupbox.is-active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.popupbox[data-title='bottom'] .popupbox-content { box-shadow: 0 1px 1px rgba(0, 0, 0, .3) }
+.popupbox[data-title='bottom'] .popupbox-titleBar { box-shadow: none; border-top: 1px #ccc solid }
+
+//popupbox button style
+
+.popupbox-trigger:hover {
+  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  margin-top: -12px;
+}
+
+.popupbox-trigger {
+  position: relative;
+  transition: all .2s;
+  color: #fff;
+  text-shadow: 0 -1px 1px #000;
+  background-color: #263238;
+  box-shadow: 0 1px 1px rgba(0,0,0,.4);
+  font-family: Raleway,Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,sans-serif;
+  font-size: 24px;
+  padding: 12px 16px 16px;
+  height: 60px;
+  width: 200px;
+  top: 50%;
+  left: 50%;
+  margin: -10px 0 0 -116px;
+  text-align: center;
+  border-radius: 5px;
+  cursor: pointer;
+  display: block;
+}
+
+//button within popupbox
+.demo-button {
+  bottom: 55px;  
+  display: block;
+  margin-top: 8px;
+  position: fixed;
+
+}
+
+//chat window styles
+.chat-message {
+  bottom: 86px;
+  display: block;
+  margin-top: 8px;  
+  position: fixed;
+  width:250px;
+}
+
+.bordered-image {
+  border: 3px solid black;
+  width: 25%;
+  height: 25%;
+}