[add] keyCode enter send message

Author: jgalianoz

package.json

@@ -11,7 +11,7 @@
   },
   "author": "@Manuel_Galindez",
   "license": "MIT",
-  "dependencies": {
+  "devDependencies": {
     "babel-cli": "^6.16.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.16.0",
@@ -20,7 +20,9 @@
     "express": "^4.14.0",
     "nib": "^1.1.2",
     "react-engine": "^4.1.0",
-    "stylus": "^0.54.5",
+    "stylus": "^0.54.5"
+  },
+  "dependencies": {
     "react": "^15.3.2",
     "react-addons-css-transition-group": "^15.3.2",
     "react-dom": "^15.3.2",

package.json.save

@@ -10,40 +10,43 @@ export default class Discussions extends React.Component {
     super(props)
     this.state = { messages: [] };
     this._dataValue = this._dataValue.bind(this);
-    this._MessageSend = this._MessageSend.bind(this);
+    this._Message = this._Message.bind(this);
     this.user = uid(10);
   }
 
   componentDidMount(){
 
-    this.socket = io('localhost:3000');
+    this.socket = io('http://localhost:3000');
 
     this.socket.on('message', (message) => {
       if (message.user !== this.user) {
-        this._MessageSend(message);
+        this._Message(message);
       }
     })
-  }
-
-
-  _dataValue(ev) {
 
-    ev.preventDefault();
-
-    let textValue = document.getElementById('textarea').value;
+    const textValue = document.getElementById('textarea');
+    textValue.addEventListener('keypress', event => {
+      if ( event.keyCode === 13){
+        this._dataValue();
+        event.preventDefault();
+      }
+    })
+  }
 
+  _dataValue() {
+    const textValue = document.getElementById('textarea');
     const avatar = this.props.avatar;
     const username = this.props.username;
-    let message = { avatar: avatar, username: username, message: textValue };
+    let message = { avatar: avatar, username: username, message: textValue.value };
 
-    if ( textValue !== '' ) {
+    if ( textValue.value !== '' ) {
       this.socket.emit('new-message', message);
       Notification(message);
-      document.getElementById('textarea').value = '';
+      textValue.value = '';
     }
   }
 
-  _MessageSend(message) {
+  _Message(message) {
     this.state.messages.push( message );
     let MessageGlobal = this.state.messages;
     this.setState({ messages: MessageGlobal });
@@ -52,24 +55,32 @@ export default class Discussions extends React.Component {
   render(){
     return <div className="conversationBody">
       <header className="header-user">
-        <h2 className="header-user-username">
-          { `${this.props.username}` }
-        </h2>
 
-        <figure className="avatar">
-          <img src={this.props.avatar} width="30" height="30" />
-        </figure>
+      <figure className="avatar">
+        <img src={this.props.avatar} width="30" height="30" />
+      </figure>
+
+      <h2 className="header-user-username">
+        { `${this.props.username}` }
+      </h2>
+
       </header>
 
       <section className="Message-list">
-        <MessageList messages={this.state.messages} />
-      </section>
-
+        <MessageList
+          messages={this.state.messages}/>
+
+        <form className="Message-form" method="POST">
+          <textarea
+            id="textarea"
+            rows="1"
+            placeholder="Write message..."
+            autoComplete="false"
+            autoFocus="true"></textarea>
+          <button type="submit">Send</button>
+        </form>
 
-      <form className="Message-form" method="POST">
-        <textarea id="textarea" placeholder="Write message..."></textarea>
-        <button type="submit" onClick={ this._dataValue }>Send</button>
-      </form>
+      </section>
 
     </div>
   }

src/client/Components/Discussions.js

@@ -8,8 +8,7 @@ export default function MessageList (props){
 
         let id = uid()
 
-
-        return <article key={id} className="Message">
+        return <div key={id} className="Message">
           <figure className="avatar Message-avatar">
             <img title={ item.username } src={ item.avatar } width="40" height="40" />
           </figure>
@@ -21,7 +20,7 @@ export default function MessageList (props){
               </p>
             </div>
           </div>
-        </article>
+        </div>
 
       })
     }

src/client/Components/MessageList.js

@@ -8,7 +8,7 @@ export default function Notification (obj) {
 
   if(Notification) {
     console.log('excelente');
-    if (Notification.permission == "granted"){
+    if (Notification.permission === "granted"){
        var newNoti = new Notification(titulo, options);
        setTimeout(newNoti.close.bind(newNoti), 6000);
     }

src/client/Components/Notification.js

@@ -1,4 +1 @@
-oranges = #F77A52
-gray = #8d8d8d
-blues = #2FA48A
-greens = #6ca717
+purpe = #4D394B

src/client/stylus/colours.styl

@@ -4,7 +4,7 @@
 .inputA
   height 35px
   font-size 16px
-  border gray
+  border #DDD
   padding 0 15px
   border-radius 5px
   box-sizing border-box
@@ -18,11 +18,9 @@
   border-radius 3px
   height 56px
   font-size 23px
-  background oranges
-  box-shadow inset 0 -2px rgba(black,0.3)
+  background purpe
+  box-shadow inset 0 -2px rgba(black,0.2)
   transition all .3s
-  &:hover
-    background blues
 
 @media (min-width: 768px)
   .inputA

src/client/stylus/formsUI.styl

@@ -29,17 +29,17 @@ figure
 .conversationBody
   display flex
   min-height 100vh
-  flex-direction column
+  flex-direction row
   justify-content space-between
 
 .header-user
-  background greens
+  background purpe
   display flex
-  flex-direction row
+  flex-direction column
   flex-wrap wrap
-  justify-content space-between
-  align-items center
   padding .4em
+  text-align center
+  width 300px
   z-index 1
 
 
@@ -70,19 +70,27 @@ figure
         transform scale(.9)
 
 .Message
+  align-items center
   display flex
   flex-direction row
   flex-wrap wrap
-  align-items center
+  padding .1em
+  margin-bottom 1em
 
 .Message-list
-  height 80vh
+  height 98vh
+  justify-content space-between
   display flex
-  flex-direction column-reverse
+  flex-direction column
   padding 20px
   overflow-y auto
   width 100%
   box-sizing border-box
+  > div
+      height 100%
+      display flex
+      flex-direction column
+      justify-content flex-end
 
 
 .Message-form

src/client/stylus/style.styl

@@ -10,7 +10,7 @@ export default function Index (props) {
   </head>
   <body>
     <section className="container">
-      <div className="conversation-wrapper" id="conversation">
+      <div className="" id="conversation">
 
       </div>
     </section>