emoji are replaced in the text area

frontend/src/components/MapChat/NewMessage.js

@@ -1,5 +1,6 @@
 import React, { PropTypes, Component } from 'react'
-import { Picker } from 'emoji-mart'
+import { Picker, emojiIndex } from 'emoji-mart'
+import { escapeRegExp } from 'lodash'
 
 class NewMessage extends Component {
   constructor(props) {
@@ -15,24 +16,53 @@ class NewMessage extends Component {
     this.setState({ showEmojiPicker: !this.state.showEmojiPicker })
   }
 
+  textAreaValue = () => {
+    let { messageText } = this.props
+    Object.keys(emojiIndex.emoticons).forEach(key => {
+      const value = emojiIndex.emoticons[key]
+      messageText = messageText.replace(new RegExp(escapeRegExp(key), 'g'), `:${value}:`)
+    })
+    Object.keys(emojiIndex.emojis).forEach(key => {
+      const emoji = emojiIndex.emojis[key]
+      messageText = messageText.replace(new RegExp(escapeRegExp(emoji.colons), 'g'), emoji.native)
+    })
+    return messageText
+  }
+
+  handleClick = (emoji, event) => {
+    const { messageText } = this.props
+    this.props.handleChange({ target: {
+      value: messageText + emoji.colons
+    }})
+  }
+
   render = () => {
     return (
       <div className="new-message-area">
         <span onClick={this.toggleEmojiPicker}>Emoji</span>
-        <Picker set='emojione' style={{ display: this.state.showEmojiPicker ? 'block' : 'none' }} />
-        <textarea {...this.props.textAreaProps} />
+        <Picker set='emojione'
+          onClick={this.handleClick}
+          style={{
+            display: this.state.showEmojiPicker ? 'block' : 'none',
+            width: '100%'
+          }}
+        />
+        <textarea value={this.textAreaValue()}
+          onChange={this.props.handleChange}
+          {...this.props.textAreaProps}
+        />
       </div>
     )
   }
 }
 
 NewMessage.propTypes = {
+  messageText: PropTypes.string,
+  handleChange: PropTypes.func,
   textAreaProps: PropTypes.shape({
     className: PropTypes.string,
     ref: PropTypes.func,
     placeholder: PropTypes.string,
-    value: PropTypes.string,
-    onChange: PropTypes.func,
     onKeyUp: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func

frontend/src/components/MapChat/index.js

@@ -148,12 +148,12 @@ class MapChat extends Component {
             className: 'chat-input',
             ref: textarea => this.messageInput = textarea,
             placeholder: 'Send a message...',
-            value: this.state.messageText,
-            onChange: this.handleChange('messageText'),
             onKeyUp: this.handleTextareaKeyUp,
             onFocus: this.props.inputFocus,
             onBlur: this.props.inputBlur
           }}
+          handleChange={this.handleChange('messageText')}
+          messageText={this.state.messageText}
         />
       </div>
     )