Users using hooks

1 files changed, 15 insertions, 27 deletions

diff --git a/vnext/src/components/Users.js b/vnext/src/components/Users.js
index 2bab6de1..522aaa30 100644
--- a/vnext/src/components/Users.js
+++ b/vnext/src/components/Users.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 
@@ -14,32 +14,20 @@ export function Readers({ user, ...rest }) {
     return <Users user={user} prop='readers' />;
 }
 
-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>
-        );
-    }
+function Users(props) {
+    const [user, setUser] = useState(props.user);
+    return (
+        <UserInfo user={user} 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>
+    );
 }