fix merge of #22

src/components/ChatV2.js

@@ -1,54 +1,28 @@
 import './css/chatv2.css';
 
 import React, { Component } from 'react';
-
+import emoji from 'node-emoji';
 import nameGenerator from '../nameGenerator';
+import ChatBar from './ChatBar';
+
+const isEmojis = str => {
+  const res = str.match(/[A-Za-z,.0-9!-]/g);
+  return !res;
+};
 
 export default class Chat extends Component {
   constructor() {
     super();
     this.state = {
       username: nameGenerator(),
-      message: '',
     };
+    this.chatBar = React.createRef();
   }
 
-  get game() {
-    if (!this.props.historyWrapper) return;
-    return this.props.historyWrapper.getSnapshot();
-  }
-
-  get messages() {
-    if (!this.game) return [];
-    if (!this.game.chat) return [];
-    return this.game.chat.messages || [];
-  }
-
-  sendChatMessage() {
-    const { username, message } = this.state;
+  handleSendMessage = (message) => {
+    const { username } = this.state;
     const { id } = this.props;
-    this.props.gameModel.chat(username, id, message);
-  }
-
-  handleKeyPress = (ev) => {
-    const {
-      onPressEnter,
-    } = this.props;
-    const {
-      message,
-      username,
-    } = this.state;
-
-    if (ev.key === 'Enter') {
-      ev.stopPropagation();
-      ev.preventDefault();
-      if (username.length > 0 && message.length > 0) {
-        this.sendChatMessage();
-        this.setState({message: ''});
-      } else {
-        onPressEnter(this);
-      }
-    }
+    this.props.onChat(username, id, message);
   }
 
   handleUsernameInputKeyPress = (ev) => {
@@ -59,22 +33,26 @@ export default class Chat extends Component {
     }
   }
 
-  handleChange = (ev) => {
-    this.setState({message: ev.target.value});
-  }
-
   handleChangeUsername = (ev) => {
     const username = ev.target.value;
     this.setState({ username });
   }
 
+  handleUnfocus = () => {
+    this.props.onUnfocus();
+  }
+
   focus() {
-    this.refs.input && this.refs.input.focus();
+    const chatBar = this.chatBar.current;
+    if (chatBar) {
+      chatBar.focus();
+    }
   }
 
   renderChatHeader() {
-    if (!this.game) return null;
-    const { title, author, type } = this.game.info || {};
+    if (this.props.header) return this.props.header;
+    const { info = {} } = this.props;
+    const { title, author, type } = info;
 
     return (
       <div className='chatv2--header'>
@@ -118,32 +96,16 @@ export default class Chat extends Component {
       return null;
     }
     return (
-      <div className='chatv2--bar'>
-        <input
-          ref='input'
-          className='chatv2--bar--input'
-          placeholder='[Enter] to chat'
-          value={this.state.message}
-          onChange={this.handleChange}
-          onKeyPress={this.handleKeyPress}
-        />
-      </div>
+      <ChatBar ref={this.chatBar}
+        placeHolder='[Enter] to chat'
+        onSendMessage={this.handleSendMessage}
+        onUnfocus={this.handleUnfocus}/>
     );
   }
 
-  color(string) {
-    if (string.length > 1){
-      return (
-        <span style={{color:'blue'}}>{string}</span>
-      );      
-    } else {
-      return (
-        <span>{string}</span>
-      );      
-    }
-  }
+  renderMessageText(text) {
+    text = emoji.emojify(text);
 
-  something(text){
     let stuff = []
     let z = 0
     while(z < text.length) {
@@ -155,20 +117,32 @@ export default class Chat extends Component {
         z += 4
       }
     }
-    return <span className='chatv2--message--text'> {stuff.map(this.color)} </span>;
+
+    const color = s => (
+      <span style={{ color: s[0] === '@' ? 'blue' : 'initial'}}>{s}</span>
+    );
+
+    return (
+      <span className={'chatv2--message--text'}>{stuff.map(color)}</span>
+    );
   }
 
-  renderSomething(message, i){
+  renderMessage(message) {
+    const { sender, text } = message;
+    const big = text.length <= 10 && isEmojis(text);
     return (
-      <div key={i} className='chatv2--message'>
+      <div className={'chatv2--message' + (big ? ' big' : '')}>
         <span className='chatv2--message--sender'>{message.sender}</span>
         {':'}
-        {this.something(message.text)}
+        {this.renderMessageText(message.text)}
       </div>
     );
   }
 
   render() {
+    const {
+      messages = [],
+    } = this.props.data;
     return (
       <div className='chatv2'>
         {this.renderChatHeader()}
@@ -183,12 +157,8 @@ export default class Chat extends Component {
           }
           className='chatv2--messages'>
           {
-            this.messages.map((message, i) => (
-              <div key={i} className='chatv2--message'>
-                <span className='chatv2--message--sender'>{message.sender}</span>
-                {':'}
-                {this.something(message.text)}
-              </div>
+            messages.map((message, i) => (
+              <div key={i}>{this.renderMessage(message)}</div>
             ))
           }
         </div>