Refactor listener out of user profile and fix thread logic

web/react/components/user_profile.jsx

@@ -2,7 +2,6 @@
 // See License.txt for license information.
 
 import * as Utils from '../utils/utils.jsx';
-import UserStore from '../stores/user_store.jsx';
 
 import {FormattedMessage} from 'mm-intl';
 
@@ -19,45 +18,15 @@ function nextId() {
 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: '...'}};
-        }
-
-        return {profile};
     }
     componentDidMount() {
-        UserStore.addChangeListener(this.onChange);
         if (!this.props.disablePopover) {
             $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'});
         }
     }
-    componentWillUnmount() {
-        UserStore.removeChangeListener(this.onChange);
-    }
-    onChange(userId) {
-        if (!userId || userId === this.props.userId) {
-            var newState = this.getStateFromStores(this.props.userId);
-            if (!Utils.areObjectsEqual(newState, this.state)) {
-                this.setState(newState);
-            }
-        }
-    }
-    componentWillReceiveProps(nextProps) {
-        if (this.props.userId !== nextProps.userId) {
-            this.setState(this.getStateFromStores(nextProps.userId));
-        }
-    }
     render() {
-        var name = Utils.displayUsername(this.state.profile.id);
+        var name = Utils.displayUsername(this.props.user.id);
         if (this.props.overwriteName) {
             name = this.props.overwriteName;
         } else if (!name) {
@@ -68,7 +37,7 @@ export default class UserProfile extends React.Component {
             return <div>{name}</div>;
         }
 
-        var profileImg = '/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '&' + Utils.getSessionIndex();
+        var profileImg = '/api/v1/users/' + this.props.user.id + '/image?time=' + this.props.user.update_at + '&' + Utils.getSessionIndex();
         if (this.props.overwriteImage) {
             profileImg = this.props.overwriteImage;
         }
@@ -100,14 +69,14 @@ export default class UserProfile extends React.Component {
             dataContent.push(
                 <div
                     data-toggle='tooltip'
-                    title={this.state.profile.email}
+                    title={this.props.user.email}
                     key='user-popover-email'
                 >
                     <a
-                        href={'mailto:' + this.state.profile.email}
+                        href={'mailto:' + this.props.user.email}
                         className='text-nowrap text-lowercase user-popover__email'
                     >
-                        {this.state.profile.email}
+                        {this.props.user.email}
                     </a>
                 </div>
             );
@@ -139,13 +108,13 @@ export default class UserProfile extends React.Component {
 }
 
 UserProfile.defaultProps = {
-    userId: '',
+    user: {},
     overwriteName: '',
     overwriteImage: '',
     disablePopover: false
 };
 UserProfile.propTypes = {
-    userId: React.PropTypes.string,
+    user: React.PropTypes.object.isRequired,
     overwriteName: React.PropTypes.string,
     overwriteImage: React.PropTypes.string,
     disablePopover: React.PropTypes.bool