3 files changed, 46 insertions, 33 deletions
diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index 002badde4..e20236495 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -8,12 +8,14 @@ import Icon from './Icon';
 
 const Avatar = React.memo(props => {
     return (
-        <div style={Object.assign({ display: 'flex', padding: '12px' }, props.style)}>
+        <div style={Object.assign({ display: 'flex', padding: '12px', width: '300px' }, props.style)}>
             <div className="msg-avatar">
                 {
                     props.user.uname ?
                         <Link to={{ pathname: props.link || `/${props.user.uname}/` }}>
-                            <img src={props.user.avatar} alt={`${props.user.uname}`} />
+                            { props.user.avatar ?
+                             <img src={props.user.avatar} alt={`${props.user.uname}`} />
+                            : <Icon name="ei-spinner" size="m" /> }
                         </Link>
                         : <Icon name="ei-spinner" size="m" />
                 }
diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js
index c4247f92c..5e60f95fd 100644
--- a/vnext/src/components/UserInfo.js
+++ b/vnext/src/components/UserInfo.js
@@ -22,8 +22,9 @@ export default class UserInfo extends React.Component {
     componentDidMount() {
         info(this.state.user.uname).then(response => {
             this.setState({
-                user: response.data[0]
+                user: response.data
             });
+            this.props.onUpdate && this.props.onUpdate(response.data);
         });
     }
     render() {
@@ -70,23 +71,17 @@ export default class UserInfo extends React.Component {
                                     <li>Messages: {user.statsMessages}</li>
                                     <li>Comments: {user.statsReplies}</li>
                                 </ul>
-                                {
-                                    user.read &&
-                                    <div className="iread">
-                                        {
-                                            user.read.map(u => <Avatar user={u} key={u.uid} />)
-                                        }
-                                    </div>
-                                }
                             </div>
                         </>
                     }
                 </div>
+                { this.props.children }
             </>
         );
     }
 }
 
 UserInfo.propTypes = {
-    user: PropTypes.string.isRequired
+    user: PropTypes.string.isRequired,
+    onUpdate: PropTypes.func
 };
diff --git a/vnext/src/components/Users.js b/vnext/src/components/Users.js
index c0da3748a..2bab6de1e 100644
--- a/vnext/src/components/Users.js
+++ b/vnext/src/components/Users.js
@@ -1,41 +1,57 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+
 
 import { UserType } from './Types';
+import UserInfo from './UserInfo';
+import Avatar from './Avatar';
 
-export function Friends({ visitor, ...rest }) {
-    return <Users data={visitor.read || []} />;
+export function Friends({ user, ...rest }) {
+    return <Users user={user} prop='read' />;
 }
 
-export function Readers({ visitor, ...rest }) {
-    return <Users data={ visitor.readers || [] } />;
+export function Readers({ user, ...rest }) {
+    return <Users user={user} prop='readers' />;
 }
 
-function Users({data, ...rest}) {
-    return (
-        <div className="users">
-            {
-                data.map(user => <span key={user.uid}>
-                        <Link to={`/${user.uname}/`}>
-                        <img src={`//i.juick.com/as/${user.uid}.png`} />
-                        <span>{user.uname}</span>
-                        </Link>
-                    </span>)
-            }
-        </div>
-    );
+class Users extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            user: {}
+        };
+    }
+    updateUser = (user) => {
+        this.setState({
+            user: user
+        });
+    }
+    render() {
+        return (
+            <UserInfo user={this.props.user} onUpdate={this.updateUser}>
+                <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row'}}>
+                    {
+                        this.state.user[this.props.prop] &&
+                        this.state.user[this.props.prop].map(user =>
+                            <Avatar key={user.uid} user={user} />
+                        )
+                    }
+                </div>
+            </UserInfo>
+        );
+    }
 }
 
 
 Friends.propTypes = {
-    visitor: UserType
+    user: PropTypes.string.isRequired
 };
 
 Readers.propTypes = {
-    visitor: UserType
+    user: PropTypes.string.isRequired
 };
 
 Users.propTypes = {
-    data: PropTypes.arrayOf(UserType).isRequired
+    user: PropTypes.string.isRequired,
+    prop: PropTypes.string.isRequired
 };