aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/components/Avatar.js31
-rw-r--r--vnext/src/components/UserInfo.js21
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>