Refactor Avatar using hooks

1 files changed, 35 insertions, 47 deletions

diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index 6e56cfc2..67d75c5e 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.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';
 
@@ -10,58 +10,46 @@ import { fetchUserUri } from '../api';
 
 import './Avatar.css';
 
-class Avatar extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            user: props.user
-        };
-    }
-    componentDidMount() {
-        let user = this.state.user;
+let isMounted;
+
+function Avatar(props) {
+    const [user, setUser] = useState(props.user);
+    useEffect(() => {
+        isMounted = true;
         if (!user.uid && user.uri) {
             fetchUserUri(user.uri).then(response => {
-                this.setState({
-                    user: response.data
-                });
+                if (isMounted) {
+                    setUser(response.data);
+                }
             });
+            return () => {
+                isMounted = false;
+            };
         }
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        return this.state.user.avatar != nextState.user.avatar || this.state.user.uid != nextState.user.uid
-        || this.props.user.avatar != nextProps.user.avatar || this.props.user.uid != nextProps.user.uid;
-    }
-    componentDidUpdate(prevProps, prevState, shouldReload) {
-        this.setState({
-            user: this.props.user
-        });
-    }
-    render() {
-        let user = this.state.user;
-        return (
-            <div className="Avatar" style={this.props.style}>
-                <div className="msg-avatar">
-                    {
-                        user.uname ?
-                            <Link to={{ pathname: this.props.link || `/${user.uname}/` }}>
-                                {user.avatar ?
-                                    <img src={user.avatar} alt={`${user.uname}`} />
-                                    : <Icon name="ei-spinner" size="m" />}
-                            </Link>
-                            : <Icon name="ei-spinner" size="m" />
-                    }
-                </div>
-                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
-                    <span>
-                        <Link to={{ pathname: `/${user.uname}/` }}>
-                            <span>{user.uname}</span>
+    });
+    return (
+        <div className="Avatar" style={props.style}>
+            <div className="msg-avatar">
+                {
+                    user.uname ?
+                        <Link to={{ pathname: props.link || `/${user.uname}/` }}>
+                            {user.avatar ?
+                                <img src={user.avatar} alt={`${user.uname}`} />
+                                : <Icon name="ei-spinner" size="m" />}
                         </Link>
-                    </span>
-                    {this.props.children}
-                </div>
+                        : <Icon name="ei-spinner" size="m" />
+                }
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                <span>
+                    <Link to={{ pathname: `/${user.uname}/` }}>
+                        <span>{user.uname}</span>
+                    </Link>
+                </span>
+                {props.children}
             </div>
-        );
-    }
+        </div>
+    );
 }
 
 export default Avatar;