1 files changed, 45 insertions, 23 deletions

diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index 6ea0d5d5..a83107ce 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -6,33 +6,54 @@ import { UserType } from './Types';
 
 import Icon from './Icon';
 
+import { fetchUserUri } from '../api';
+
 import './Avatar.css';
 
-const Avatar = React.memo(props => {
-    return (
-        <div className="Avatar" style={props.style}>
-            <div className="msg-avatar">
-                {
-                    props.user.uname ?
-                        <Link to={{ pathname: props.link || `/${props.user.uname}/` }}>
-                            { props.user.avatar ?
-                             <img src={props.user.avatar} alt={`${props.user.uname}`} />
-                            : <Icon name="ei-spinner" size="m" /> }
+class Avatar extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            user: props.user
+        };
+    }
+    componentDidMount() {
+        let user = this.state.user;
+        if (!user.uid && user.uri) {
+            fetchUserUri(user.uri).then(response => {
+                this.setState({
+                    user: response.data
+                });
+            });
+        }
+    }
+    render() {
+        let user = this.state.user;
+        return (
+            <div className="Avatar" style={this.props.style}>
+                <div className="msg-avatar">
+                    {
+                        user.uname ?
+                            <Link to={{ pathname: this.props.link || `/${user.uname}/` }}>
+                                {user.avatar ?
+                                    <img src={user.avatar} alt={`${user.uname}`} />
+                                    : <Icon name="ei-spinner" size="m" />}
+                            </Link>
+                            : <Icon name="ei-spinner" size="m" />
+                    }
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                    <span>
+                        <Link to={{ pathname: `/${user.uname}/` }}>
+                            <span>{user.uname}</span>
                         </Link>
-                        : <Icon name="ei-spinner" size="m" />
-                }
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
-                <span>
-                    <Link to={{ pathname: `/${props.user.uname}/` }}>
-                        <span>{props.user.uname}</span>
-                    </Link>
-                </span>
-                {props.children}
+                    </span>
+                    {this.props.children}
+                </div>
             </div>
-        </div>
-    );
-});
+        );
+    }
+}
 
 export default Avatar;
 
@@ -48,5 +69,6 @@ export const AvatarLink = React.memo(props => {
 Avatar.propTypes = {
     user: UserType,
     link: PropTypes.string,
+    style: PropTypes.object,
     children: PropTypes.node
 };