add custom emoticons

frontend/src/Metamaps/Util.js

@@ -174,7 +174,10 @@ const Util = {
       text = text.replace(new RegExp(escapeRegExp(emoji.colons), 'g'), emoji.native)
     })
     if (opts.emoticons) {
-      Object.keys(emojiIndex.emoticons).forEach(emoticon => {
+      const emoticons = Object.assign({}, emojiIndex.emoticons, {
+        ':D': ':grin:'
+      })
+      Object.keys(emoticons).forEach(emoticon => {
         const key = emojiIndex.emoticons[emoticon]
         const emoji = emojiIndex.emojis[key]
         text = text.replace(new RegExp(escapeRegExp(emoticon), 'g'), emoji.native)

frontend/src/components/MapChat/NewMessage.js

@@ -1,5 +1,5 @@
 import React, { PropTypes, Component } from 'react'
-import { Picker } from 'emoji-mart'
+import { Emoji, Picker } from 'emoji-mart'
 import Util from '../../Metamaps/Util'
 
 class NewMessage extends Component {
@@ -26,6 +26,7 @@ class NewMessage extends Component {
     }})
 
     this.setState({ showEmojiPicker: false })
+    this.props.focusMessageInput()
   }
 
   render = () => {
@@ -41,7 +42,7 @@ class NewMessage extends Component {
           title="Emoji"
         />
         <div className="extra-message-options">
-          <span className="emoji-picker-button" onClick={this.toggleEmojiPicker}>🙃</span>
+          <span className="emoji-picker-button" onClick={this.toggleEmojiPicker}><Emoji size={24} emoji="upside_down_face" /></span>
         </div>
         <textarea value={this.textAreaValue()}
           onChange={this.props.handleChange}
@@ -55,6 +56,7 @@ class NewMessage extends Component {
 NewMessage.propTypes = {
   messageText: PropTypes.string,
   handleChange: PropTypes.func,
+  focusMessageInput: PropTypes.func,
   textAreaProps: PropTypes.shape({
     className: PropTypes.string,
     ref: PropTypes.func,

frontend/src/components/MapChat/index.js

@@ -102,6 +102,11 @@ class MapChat extends Component {
     }
   }
 
+  focusMessageInput = () => {
+    if (!this.messageInput) return
+    this.messageInput.focus()
+  }
+
   render = () => {
     const rightOffset = this.state.open ? '0' : '-300px'
     const { conversationLive, isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props
@@ -145,16 +150,17 @@ class MapChat extends Component {
         <div className="chat-messages" ref={div => { this.messagesDiv = div }}>
           {makeList(messages)}
         </div>
-        <NewMessage textAreaProps={{
-          className: 'chat-input',
-          ref: textarea => { this.messageInput = textarea },
-          placeholder: 'Send a message...',
-          onKeyUp: this.handleTextareaKeyUp,
-          onFocus: this.props.inputFocus,
-          onBlur: this.props.inputBlur
-        }}
+        <NewMessage messageText={this.state.messageText}
+          focusMessageInput={this.focusMessageInput}
           handleChange={this.handleChange('messageText')}
-          messageText={this.state.messageText}
+          textAreaProps={{
+            className: 'chat-input',
+            ref: textarea => { this.messageInput = textarea },
+            placeholder: 'Send a message...',
+            onKeyUp: this.handleTextareaKeyUp,
+            onFocus: this.props.inputFocus,
+            onBlur: this.props.inputBlur
+          }}
         />
       </div>
     )