diff options
author | Vitaly Takmazov | 2019-02-21 00:02:17 +0300 |
---|---|---|
committer | Vitaly Takmazov | 2023-01-13 10:37:54 +0300 |
commit | e39818079a05cdd7cfc4744e972ce87105e1ff87 (patch) | |
tree | a2fbf5e482a3ad4f3e58dd02e30cc6cf198afc52 /vnext/src | |
parent | 9013ea38ca549245442ef18aac199f9431973b60 (diff) |
Refactor Avatar using hooks
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/Avatar.js | 82 |
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; |