aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-02-21 00:02:17 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commite39818079a05cdd7cfc4744e972ce87105e1ff87 (patch)
treea2fbf5e482a3ad4f3e58dd02e30cc6cf198afc52
parent9013ea38ca549245442ef18aac199f9431973b60 (diff)
Refactor Avatar using hooks
-rw-r--r--vnext/src/components/Avatar.js82
1 files changed, 35 insertions, 47 deletions
diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index 6e56cfc2..67d75c5e 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
@@ -10,58 +10,46 @@ import { fetchUserUri } from '../api';
import './Avatar.css';
-class Avatar extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- user: props.user
- };
- }
- componentDidMount() {
- let user = this.state.user;
+let isMounted;
+
+function Avatar(props) {
+ const [user, setUser] = useState(props.user);
+ useEffect(() => {
+ isMounted = true;
if (!user.uid && user.uri) {
fetchUserUri(user.uri).then(response => {
- this.setState({
- user: response.data
- });
+ if (isMounted) {
+ setUser(response.data);
+ }
});
+ return () => {
+ isMounted = false;
+ };
}
- }
- shouldComponentUpdate(nextProps, nextState) {
- return this.state.user.avatar != nextState.user.avatar || this.state.user.uid != nextState.user.uid
- || this.props.user.avatar != nextProps.user.avatar || this.props.user.uid != nextProps.user.uid;
- }
- componentDidUpdate(prevProps, prevState, shouldReload) {
- this.setState({
- user: this.props.user
- });
- }
- render() {
- let user = this.state.user;
- return (
- <div className="Avatar" style={this.props.style}>
- <div className="msg-avatar">
- {
- user.uname ?
- <Link to={{ pathname: this.props.link || `/${user.uname}/` }}>
- {user.avatar ?
- <img src={user.avatar} alt={`${user.uname}`} />
- : <Icon name="ei-spinner" size="m" />}
- </Link>
- : <Icon name="ei-spinner" size="m" />
- }
- </div>
- <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
- <span>
- <Link to={{ pathname: `/${user.uname}/` }}>
- <span>{user.uname}</span>
+ });
+ return (
+ <div className="Avatar" style={props.style}>
+ <div className="msg-avatar">
+ {
+ user.uname ?
+ <Link to={{ pathname: props.link || `/${user.uname}/` }}>
+ {user.avatar ?
+ <img src={user.avatar} alt={`${user.uname}`} />
+ : <Icon name="ei-spinner" size="m" />}
</Link>
- </span>
- {this.props.children}
- </div>
+ : <Icon name="ei-spinner" size="m" />
+ }
+ </div>
+ <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+ <span>
+ <Link to={{ pathname: `/${user.uname}/` }}>
+ <span>{user.uname}</span>
+ </Link>
+ </span>
+ {props.children}
</div>
- );
- }
+ </div>
+ );
}
export default Avatar;