1 files changed, 62 insertions, 44 deletions

diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index 5c4d26a23..739084053 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -1,19 +1,9 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-
-var utils = require('../utils/utils.jsx');
+var Utils = require('../utils/utils.jsx');
 var UserStore = require('../stores/user_store.jsx');
-
-function getStateFromStores(userId) {
-    var profile = UserStore.getProfile(userId);
-
-    if (profile == null) {
-        return { profile: { id: "0", username: "..."} };
-    } else {
-        return { profile: profile };
-    }
-}
+import {config} from '../utils/config.js';
 
 var id = 0;
 
@@ -22,49 +12,77 @@ function nextId() {
     return id;
 }
 
+export default class UserProfile extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.uniqueId = nextId();
+        this.onChange = this.onChange.bind(this);
+
+        this.state = this.getStateFromStores(this.props.userId);
+    }
+    getStateFromStores(userId) {
+        var profile = UserStore.getProfile(userId);
+
+        if (profile == null) {
+            return {profile: {id: '0', username: '...'}};
+        }
 
-module.exports = React.createClass({
-    uniqueId: null,
-    componentDidMount: function() {
-        UserStore.addChangeListener(this._onChange);
-        $("#profile_" + this.uniqueId).popover({placement : 'right', container: 'body', trigger: 'hover', html: true, delay: { "show": 200, "hide": 100 }});
-        $('body').tooltip( {selector: '[data-toggle=tooltip]', trigger: 'hover click'} );
-    },
-    componentWillUnmount: function() {
-        UserStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function(id) {
-        if (id == this.props.userId) {
-            var newState = getStateFromStores(this.props.userId);
-            if (!utils.areStatesEqual(newState, this.state)) {
+        return {profile: profile};
+    }
+    componentDidMount() {
+        UserStore.addChangeListener(this.onChange);
+        $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'hover', html: true, delay: {show: 200, hide: 100}});
+        $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'});
+    }
+    componentWillUnmount() {
+        UserStore.removeChangeListener(this.onChange);
+    }
+    onChange(userId) {
+        if (userId === this.props.userId) {
+            var newState = this.getStateFromStores(this.props.userId);
+            if (!Utils.areStatesEqual(newState, this.state)) {
                 this.setState(newState);
             }
         }
-    },
-    componentWillReceiveProps: function(nextProps) {
-        if (this.props.userId != nextProps.userId) {
-            this.setState(getStateFromStores(nextProps.userId));
+    }
+    componentWillReceiveProps(nextProps) {
+        if (this.props.userId !== nextProps.userId) {
+            this.setState(this.getStateFromStores(nextProps.userId));
+        }
+    }
+    render() {
+        var name = this.state.profile.username;
+        if (this.props.overwriteName) {
+            name = this.props.overwriteName;
         }
-    },
-    getInitialState: function() {
-        this.uniqueId = nextId();
-        return getStateFromStores(this.props.userId);
-    },
-    render: function() {
-        var name = this.props.overwriteName ? this.props.overwriteName : this.state.profile.username;
-
 
-        var data_content = "<img class='user-popover__image' src='/api/v1/users/" + this.state.profile.id + "/image?time=" + this.state.profile.update_at + "' height='128' width='128' />";
+        var dataContent = '<img class="user-popover__image" src="/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '" height="128" width="128" />';
         if (!config.ShowEmail) {
-            data_content += "<div class='text-nowrap'>Email not shared</div>";
+            dataContent += '<div class="text-nowrap">Email not shared</div>';
         } else {
-            data_content += "<div data-toggle='tooltip' title= '" + this.state.profile.email + "'><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase user-popover__email'>" + this.state.profile.email + "</a></div>";
+            dataContent += '<div data-toggle="tooltip" title="' + this.state.profile.email + '"><a href="mailto:' + this.state.profile.email + '" class="text-nowrap text-lowercase user-popover__email">' + this.state.profile.email + '</a></div>';
         }
 
         return (
-            <div className="user-popover" id={"profile_" + this.uniqueId} data-toggle="popover" data-content={data_content} data-original-title={this.state.profile.username} >
-                { name }
+            <div
+                className='user-popover'
+                id={'profile_' + this.uniqueId}
+                data-toggle='popover'
+                data-content={dataContent}
+                data-original-title={this.state.profile.username}
+            >
+                {name}
             </div>
         );
     }
-});
+}
+
+UserProfile.defaultProps = {
+    userId: '',
+    overwriteName: ''
+};
+UserProfile.propTypes = {
+    userId: React.PropTypes.string,
+    overwriteName: React.PropTypes.string
+};