summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_profile.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/user_profile.jsx')
-rw-r--r--web/react/components/user_profile.jsx106
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
+};