1 files changed, 37 insertions, 21 deletions
diff --git a/vnext/src/components/Users.js b/vnext/src/components/Users.js
index c0da3748..2bab6de1 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
 };