3 files changed, 46 insertions, 2 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js
index 683e310a..f3f48152 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -4,6 +4,7 @@ import * as qs from 'query-string';
 
 import Icon from './components/Icon';
 import { Discover, Discussions, Blog, Tag, Home } from './components/Feeds';
+import { Friends, Readers } from './components/Users';
 import Settings from './components/Settings';
 import Contacts from './components/Contacts';
 import Chat from './components/Chat';
@@ -156,6 +157,8 @@ export default class App extends React.Component {
                 <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} />
                 <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} />
                 <Route exact path="/pm/:user" render={(props) => <Chat ref={this.pm} visitor={user} {...props} />} />
+                <Route exact path="/:user/friends" render={(props) => <Friends visitor={user} {...props} />} />
+                <Route exact path="/:user/readers" render={(props) => <Readers visitor={user} {...props} />} />
                 <Route exact path="/:user" render={(props) => <Blog visitor={user} {...props} />} />
                 <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} />
                 <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} />
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index ad79f7f6..953276b5 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -106,8 +106,8 @@ function Tags({ data, user, ...rest }) {
 }
 
 Message.propTypes = {
-    data: MessageType,
-    visitor: UserType.isRequired,
+    data: PropTypes.instanceOf(MessageType),
+    visitor: PropTypes.instanceOf(UserType).isRequired,
     children: PropTypes.node
 };
 
diff --git a/vnext/src/components/Users.js b/vnext/src/components/Users.js
new file mode 100644
index 00000000..4201e1e0
--- /dev/null
+++ b/vnext/src/components/Users.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { UserType } from './Types';
+
+export function Friends({ visitor, ...rest }) {
+    return <Users data={visitor.read || []} />;
+}
+
+export function Readers({ visitor, ...rest }) {
+    return <Users data={ visitor.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>
+    );
+}
+
+
+Friends.propTypes = {
+    visitor: UserType
+};
+
+Readers.propTypes = {
+    visitor: UserType
+};
+
+Users.propTypes = {
+    data: PropTypes.arrayOf(UserType).isRequired
+}