diff options
author | 2019-04-12 00:13:43 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 2812569d3964a9493ee7716e952e4aa59a8b21b2 (patch) | |
tree | a1490bec9073e9dc8120ec4bd28c26535b53d998 | |
parent | 485af16ce8c8ac546cefa19f31954cff3208e4f5 (diff) |
Make Avatar pure component
-rw-r--r-- | vnext/src/components/Avatar.js | 31 | ||||
-rw-r--r-- | vnext/src/components/UserInfo.js | 21 |
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> |