Make Avatar pure component

2 files changed, 17 insertions, 35 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,
diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js
index c8565cbf..7d84488e 100644
--- a/vnext/src/components/UserInfo.js
+++ b/vnext/src/components/UserInfo.js
@@ -19,16 +19,18 @@ export default function UserInfo(props) {
     const { onUpdate } = props;
     useEffect(() => {
         isMounted = true;
-        info(user.uname).then(response => {
-            if (isMounted) {
-                setUser(response.data);
-                onUpdate && onUpdate(response.data);
-            }
-        });
+        if (!user.avatar) {
+            info(user.uname).then(response => {
+                if (isMounted) {
+                    setUser(response.data);
+                    onUpdate && onUpdate(response.data);
+                }
+            });
+        }
         return () => {
             isMounted = false;
         };
-    }, [onUpdate, user.uname]);
+    }, [onUpdate, user, user.avatar]);
     return (
         <>
             <div className="userinfo">
@@ -85,19 +87,18 @@ const UserSummary = React.memo(Summary);
 export function UserLink(props) {
     const [user, setUser] = useState(props.user);
     useEffect(() => {
-        setUser(props.user);
         isMounted = true;
         if (!user.uid && user.uri) {
             fetchUserUri(user.uri).then(response => {
                 if (isMounted) {
-                    setUser({...response.data, uid: 66666666});
+                    setUser({ ...response.data, uid: 66666666 });
                 }
             });
         }
         return () => {
             isMounted = false;
         };
-    }, [props.user]);
+    }, [user.uid, user.uri]);
     return (
         user.uid ?
             <Link key={user.uid} to={`/${user.uname}/`} className="info-avatar"><img src={user.avatar} />{user.uname}</Link>