first commit

web/react/components/user_profile.jsx

@@ -0,0 +1,71 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+
+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 };
+    }
+}
+
+var id = 0;
+
+function nextId() {
+    id = id + 1;
+    return id;
+}
+
+
+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 }});
+    },
+    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)) {
+                this.setState(newState);
+            }
+        }
+    },
+    componentWillReceiveProps: function(nextProps) {
+        if (this.props.userId != nextProps.userId) {
+            this.setState(getStateFromStores(nextProps.userId));
+        }
+    },
+    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 = ""
+        data_content += "<img style='margin: 10px' src='/api/v1/users/" + this.state.profile.id + "/image' height='128' width='128' />"
+        if (!config.ShowEmail) {
+            data_content += "<div><span style='white-space:nowrap;'>Email not shared</span></div>";
+        } else {
+            data_content += "<div><a href='mailto:'" + this.state.profile.email + "'' style='white-space:nowrap;text-transform:lowercase;'>" + this.state.profile.email + "</a></div>";
+        }
+
+        return (
+            <div style={{"cursor" : "pointer", "display" : "inline-block"}} className="user-popover" id={"profile_" + this.uniqueId} data-toggle="popover" data-content={data_content} data-original-title={this.state.profile.username} >
+                { name }
+            </div>
+        );
+    }
+});