Merge pull request #590 from nickago/MM-1932

MM-1932 Added emoji wrapper with cross platform available gliffs

web/react/components/post_body.jsx

@@ -5,14 +5,26 @@ const FileAttachmentList = require('./file_attachment_list.jsx');
 const UserStore = require('../stores/user_store.jsx');
 const Utils = require('../utils/utils.jsx');
 const Constants = require('../utils/constants.jsx');
+const twemoji = require('twemoji');
 
 export default class PostBody extends React.Component {
     constructor(props) {
         super(props);
 
+        this.parseEmojis = this.parseEmojis.bind(this);
+
         const linkData = Utils.extractLinks(this.props.post.message);
         this.state = {links: linkData.links, message: linkData.text};
     }
+    parseEmojis() {
+        twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+    }
+    componentDidMount() {
+        this.parseEmojis();
+    }
+    componentDidUpdate() {
+        this.parseEmojis();
+    }
     componentWillReceiveProps(nextProps) {
         const linkData = Utils.extractLinks(nextProps.post.message);
         this.setState({links: linkData.links, message: linkData.text});

web/react/components/rhs_comment.jsx

@@ -12,12 +12,14 @@ var FileAttachmentList = require('./file_attachment_list.jsx');
 var Client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var ActionTypes = Constants.ActionTypes;
+var twemoji = require('twemoji');
 
 export default class RhsComment extends React.Component {
     constructor(props) {
         super(props);
 
         this.retryComment = this.retryComment.bind(this);
+        this.parseEmojis = this.parseEmojis.bind(this);
 
         this.state = {};
     }
@@ -51,6 +53,12 @@ export default class RhsComment extends React.Component {
         PostStore.updatePendingPost(post);
         this.forceUpdate();
     }
+    parseEmojis() {
+        twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+    }
+    componentDidMount() {
+        this.parseEmojis();
+    }
     shouldComponentUpdate(nextProps) {
         if (!Utils.areStatesEqual(nextProps.post, this.props.post)) {
             return true;
@@ -58,6 +66,9 @@ export default class RhsComment extends React.Component {
 
         return false;
     }
+    componentDidUpdate() {
+        this.parseEmojis();
+    }
     render() {
         var post = this.props.post;
 

web/react/components/rhs_root_post.jsx

@@ -6,12 +6,23 @@ var UserProfile = require('./user_profile.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var utils = require('../utils/utils.jsx');
 var FileAttachmentList = require('./file_attachment_list.jsx');
+var twemoji = require('twemoji');
+var Constants = require('../utils/constants.jsx');
 
 export default class RhsRootPost extends React.Component {
     constructor(props) {
         super(props);
+
+        this.parseEmojis = this.parseEmojis.bind(this);
+
         this.state = {};
     }
+    parseEmojis() {
+        twemoji.parse(React.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+    }
+    componentDidMount() {
+        this.parseEmojis();
+    }
     shouldComponentUpdate(nextProps) {
         if (!utils.areStatesEqual(nextProps.post, this.props.post)) {
             return true;
@@ -19,6 +30,9 @@ export default class RhsRootPost extends React.Component {
 
         return false;
     }
+    componentDidUpdate() {
+        this.parseEmojis();
+    }
     render() {
         var post = this.props.post;
         var message = utils.textToJsx(post.message);

web/react/components/rhs_thread.jsx

@@ -18,7 +18,6 @@ export default class RhsThread extends React.Component {
 
         this.onChange = this.onChange.bind(this);
         this.onChangeAll = this.onChangeAll.bind(this);
-        this.onTimeChange = this.onTimeChange.bind(this);
 
         this.state = this.getStateFromStores();
     }
@@ -44,7 +43,6 @@ export default class RhsThread extends React.Component {
     componentDidMount() {
         PostStore.addSelectedPostChangeListener(this.onChange);
         PostStore.addChangeListener(this.onChangeAll);
-        UserStore.addStatusesChangeListener(this.onTimeChange);
         this.resize();
         $(window).resize(function resize() {
             this.resize();
@@ -58,7 +56,6 @@ export default class RhsThread extends React.Component {
     componentWillUnmount() {
         PostStore.removeSelectedPostChangeListener(this.onChange);
         PostStore.removeChangeListener(this.onChangeAll);
-        UserStore.removeStatusesChangeListener(this.onTimeChange);
     }
     onChange() {
         var newState = this.getStateFromStores();
@@ -96,14 +93,6 @@ export default class RhsThread extends React.Component {
             this.setState(newState);
         }
     }
-    onTimeChange() {
-        for (var id in this.state.postList.posts) {
-            if (!this.refs[id]) {
-                continue;
-            }
-            this.refs[id].forceUpdate();
-        }
-    }
     resize() {
         var height = $(window).height() - $('#error_bar').outerHeight() - 100;
         $('.post-right__scroll').css('height', height + 'px');