useState, useEffect

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 = {