Components -> UI

1 files changed, 44 insertions, 0 deletions

diff --git a/vnext/src/ui/Users.js b/vnext/src/ui/Users.js
new file mode 100644
index 00000000..a10bba7f
--- /dev/null
+++ b/vnext/src/ui/Users.js
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import ReactRouterPropTypes from 'react-router-prop-types';
+
+import UserInfo from './UserInfo';
+import Avatar from './Avatar';
+
+export function Friends({ match }) {
+    return <Users user={match.params.user} prop='read' />;
+}
+
+export function Readers({ match }) {
+    return <Users user={match.params.user} prop='readers' />;
+}
+
+function Users(props) {
+    const [user, setUser] = useState({ uid: 0, uname: props.user });
+    return (
+        <UserInfo user={user.uname} onUpdate={setUser}>
+            <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
+                {
+                    user[props.prop] &&
+                    user[props.prop].map(user =>
+                        <Avatar key={user.uid} user={user} />
+                    )
+                }
+            </div>
+        </UserInfo>
+    );
+}
+
+
+Friends.propTypes = {
+    match: ReactRouterPropTypes.match.isRequired
+};
+
+Readers.propTypes = {
+    match: ReactRouterPropTypes.match.isRequired
+};
+
+Users.propTypes = {
+    user: PropTypes.string.isRequired,
+    prop: PropTypes.string.isRequired
+};