2 files changed, 43 insertions, 2 deletions
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
+}