1 files changed, 44 insertions, 17 deletions

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 114dc183f..72a2a6251 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -1,30 +1,57 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
-var UserStore = require("../stores/user_store.jsx");
+var UserStore = require('../stores/user_store.jsx');
 
-module.exports = React.createClass({
-    handleClick: function() {
+export default class Mention extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this);
+
+        this.state = null;
+    }
+    handleClick() {
         this.props.handleClick(this.props.username);
-    },
-    getInitialState: function() {
-        return null;
-    },
-    render: function() {
-        var self = this;
+    }
+    render() {
         var icon;
         var timestamp = UserStore.getCurrentUser().update_at;
-        if (this.props.id === "allmention" || this.props.id === "channelmention") {
-            icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
+        if (this.props.id === 'allmention' || this.props.id === 'channelmention') {
+            icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>;
         } else if (this.props.id != null) {
-            icon = <span><img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image?time=" + timestamp}/></span>;
+            icon = (<span><img
+                            className='mention-img'
+                            src={'/api/v1/users/' + this.props.id + '/image?time=' + timestamp}
+                        />
+                    </span>);
         } else {
-            icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
+            icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>;
         }
         return (
-            <div className={"mentions-name " + this.props.isFocused} id={this.props.id + "_mentions"} onClick={this.handleClick} onMouseEnter={this.props.handleMouseEnter}>
-                <div className="pull-left">{icon}</div>
-                <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
+            <div
+                className={'mentions-name ' + this.props.isFocused}
+                id={this.props.id + '_mentions'}
+                onClick={this.handleClick}
+                onMouseEnter={this.props.handleMouseEnter}
+            >
+                <div className='pull-left'>{icon}</div>
+                <div className='pull-left mention-align'><span>@{this.props.username}</span><span className='mention-fullname'>{this.props.secondary_text}</span></div>
             </div>
         );
     }
-});
+}
+
+Mention.defaultProps = {
+    username: '',
+    id: '',
+    isFocused: '',
+    secondary_text: ''
+};
+Mention.propTypes = {
+    handleClick: React.PropTypes.func.isRequired,
+    handleMouseEnter: React.PropTypes.func.isRequired,
+    username: React.PropTypes.string,
+    id: React.PropTypes.string,
+    isFocused: React.PropTypes.string,
+    secondary_text: React.PropTypes.string
+};