aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Users.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components/Users.js')
-rw-r--r--vnext/src/components/Users.js42
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>
+ );
}