From 2812569d3964a9493ee7716e952e4aa59a8b21b2 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Fri, 12 Apr 2019 00:13:43 +0300
Subject: Make Avatar pure component
---
vnext/src/components/Avatar.js | 31 ++++++-------------------------
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 (
-
+
{
user.uname ?
-
+
{user.avatar ?
![{`${user.uname}`}]({user.avatar})
:
}
@@ -47,13 +28,13 @@ function Avatar(props) {
{user.uname}
- {props.children}
+ {children}
);
}
-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 (
<>
@@ -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 ?
![]({user.avatar})
{user.uname}
--
cgit v1.2.3