diff options
| -rw-r--r-- | vnext/src/components/UserInfo.js | 90 |
1 files changed, 40 insertions, 50 deletions
diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js index 3c4ffab3..d772d76e 100644 --- a/vnext/src/components/UserInfo.js +++ b/vnext/src/components/UserInfo.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; @@ -12,59 +12,49 @@ import SearchBox from './SearchBox'; import './UserInfo.css'; -export default class UserInfo extends React.Component { - constructor(props) { - super(props); - this.state = { - user: { uname: props.user, uid: 0 } - }; - } - componentDidMount() { - info(this.state.user.uname).then(response => { - this.setState({ - user: response.data - }); - this.props.onUpdate && this.props.onUpdate(response.data); +export default function UserInfo(props) { + const [user, setUser] = useState({ uname: props.user, uid: 0 }); + useEffect(() => { + info(user.uname).then(response => { + setUser(response.data); + props.onUpdate && props.onUpdate(response.data); }); - } - render() { - const { user } = this.state; - return ( - <> - <div className="userinfo"> - <Avatar user={user}> - <div className="msg-ts">Was online recently</div> - </Avatar> - </div> - <div className="l"> - { - user.uid > 0 && - <> - <Link to="/pm"> - <Icon name="ei-envelope" size="s" />PM + }); + return ( + <> + <div className="userinfo"> + <Avatar user={user}> + <div className="msg-ts">Was online recently</div> + </Avatar> + </div> + <div className="l"> + { + user.uid > 0 && + <> + <Link to="/pm"> + <Icon name="ei-envelope" size="s" />PM </Link> - <Link to={`/${user.uname}/?show=recomm`} rel="nofollow"> - <Icon name="ei-heart" size="s" />Recommendations + <Link to={`/${user.uname}/?show=recomm`} rel="nofollow"> + <Icon name="ei-heart" size="s" />Recommendations </Link> - <Link to={`/${user.uname}/?media=1`} rel="nofollow"> - <Icon name="ei-camera" size="s" />Photos + <Link to={`/${user.uname}/?media=1`} rel="nofollow"> + <Icon name="ei-camera" size="s" />Photos </Link> - { - user.read && - <Link to={`/${user.uname}/friends`}>I read: {user.read.length}</Link> - } - <Link to={`/${user.uname}/readers`}>My readers: {user.readers ? user.readers.length : 0}</Link> - { - user.statsMyBL && - <Link to={`/${user.uname}/bl`}>My blacklist: {user.statsMyBL}</Link> - } - </> - } - </div> - {this.props.children} - </> - ); - } + { + user.read && + <Link to={`/${user.uname}/friends`}>I read: {user.read.length}</Link> + } + <Link to={`/${user.uname}/readers`}>My readers: {user.readers ? user.readers.length : 0}</Link> + { + user.statsMyBL && + <Link to={`/${user.uname}/bl`}>My blacklist: {user.statsMyBL}</Link> + } + </> + } + </div> + {props.children} + </> + ); } UserInfo.propTypes = { |