Make Avatar pure component

1 files changed, 6 insertions, 25 deletions

diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index fed68ed1..dda5449f 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
@@ -6,34 +6,15 @@ import { UserType } from './Types';
 
 import Icon from './Icon';
 
-import { fetchUserUri } from '../api';
-
 import './Avatar.css';
 
-let isMounted;
-
-function Avatar(props) {
-    const [user, setUser] = useState(props.user);
-    useEffect(() => {
-        setUser(props.user);
-        isMounted = true;
-        if (!user.uid && !user.uname, user.uri) {
-            fetchUserUri(user.uri).then(response => {
-                if (isMounted) {
-                    setUser(response.data);
-                }
-            });
-        }
-        return () => {
-            isMounted = false;
-        };
-    }, [props.user]);
+function Avatar({ user, style, link, children}) {
     return (
-        <div className="Avatar" style={props.style}>
+        <div className="Avatar" style={style}>
             <div className="msg-avatar">
                 {
                     user.uname ?
-                        <Link to={{ pathname: props.link || `/${user.uname}/` }}>
+                        <Link to={{ pathname: link || `/${user.uname}/` }}>
                             {user.avatar ?
                                 <img src={user.avatar} alt={`${user.uname}`} />
                                 : <Icon name="ei-spinner" size="m" />}
@@ -47,13 +28,13 @@ function Avatar(props) {
                         <span>{user.uname}</span>
                     </Link>
                 </span>
-                {props.children}
+                {children}
             </div>
         </div>
     );
 }
 
-export default Avatar;
+export default memo(Avatar);
 
 Avatar.propTypes = {
     user: UserType,