From e22793ee7a5f88ece75c0e1ddbe4b5423bb9ffbd Mon Sep 17 00:00:00 2001 From: Hans Date: Tue, 15 Nov 2022 19:05:55 +0700 Subject: [PATCH 1/8] make avatar update when online --- src/components/Avatar.js | 48 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 45 insertions(+), 3 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index aa4f6dbf92fd..2e49c16bbc97 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -1,7 +1,8 @@ -import React, {PureComponent} from 'react'; +import React, {Component, PureComponent} from 'react'; import {Image, View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; +import lodashGet from 'lodash/get'; import stylePropTypes from '../styles/stylePropTypes'; import Icon from './Icon'; import themeColors from '../styles/themes/default'; @@ -9,6 +10,8 @@ import CONST from '../CONST'; import * as StyleUtils from '../styles/StyleUtils'; import * as Expensicons from './Icon/Expensicons'; import getAvatarDefaultSource from '../libs/getAvatarDefaultSource'; +import {withNetwork} from './OnyxProvider'; +import networkPropTypes from './networkPropTypes'; const propTypes = { /** Source for the avatar. Can be a URL or an icon. */ @@ -29,6 +32,9 @@ const propTypes = { /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ fallbackIcon: PropTypes.func, + + /** Props to detect online status */ + network: networkPropTypes.isRequired, }; const defaultProps = { @@ -40,7 +46,7 @@ const defaultProps = { fallbackIcon: Expensicons.FallbackAvatar, }; -class Avatar extends PureComponent { +class Avatar extends Component { constructor(props) { super(props); this.state = { @@ -48,6 +54,42 @@ class Avatar extends PureComponent { }; } + shouldComponentUpdate(nextProps, nextState) { + if ( + lodashGet(this.props.network, 'isOffline') + && !lodashGet(nextProps.network, 'isOffline') + ) { + return true; + } + if (this.props.source !== nextProps.source) { + return true; + } + if (this.state.imageError !== nextState.imageError) { + return true; + } + + if (this.props.fill !== nextProps.fill) { + return true; + } + if (this.props.size !== nextProps.size) { + return true; + } + + return false; + } + + componentDidUpdate(prevProps) { + if (!this.state.imageError) { + return; + } + if ( + lodashGet(prevProps.network, 'isOffline') + && !lodashGet(this.props.network, 'isOffline') + ) { + this.setState({imageError: false}); + } + } + render() { if (!this.props.source) { return null; @@ -86,4 +128,4 @@ class Avatar extends PureComponent { Avatar.defaultProps = defaultProps; Avatar.propTypes = propTypes; -export default Avatar; +export default withNetwork()(Avatar); From 5718a0b7ee84633c1db122998f58e45a51698fc8 Mon Sep 17 00:00:00 2001 From: Hans Date: Thu, 17 Nov 2022 10:27:12 +0700 Subject: [PATCH 2/8] fix linting --- src/components/Avatar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 2e49c16bbc97..f2848b8b779e 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -1,4 +1,4 @@ -import React, {Component, PureComponent} from 'react'; +import React, {Component} from 'react'; import {Image, View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; From cbc5d7d012068dffb7afcd89ce7bc2f73cc66b37 Mon Sep 17 00:00:00 2001 From: Hans Date: Sat, 19 Nov 2022 16:09:01 +0700 Subject: [PATCH 3/8] fix linting: early return --- src/components/Avatar.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index f2848b8b779e..88362dbc3470 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -79,15 +79,13 @@ class Avatar extends Component { } componentDidUpdate(prevProps) { - if (!this.state.imageError) { - return; - } if ( - lodashGet(prevProps.network, 'isOffline') - && !lodashGet(this.props.network, 'isOffline') + !this.state.imageError || !lodashGet(prevProps.network, 'isOffline') + || lodashGet(this.props.network, 'isOffline') ) { - this.setState({imageError: false}); + return; } + this.setState({imageError: false}); } render() { From c85ece43c92c5b6942dc61fdd7177c8c7fb5ba25 Mon Sep 17 00:00:00 2001 From: Hans Date: Fri, 2 Dec 2022 10:13:21 +0700 Subject: [PATCH 4/8] Remove shouldComponentUpdate --- src/components/Avatar.js | 28 ++-------------------------- 1 file changed, 2 insertions(+), 26 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 57530e3007c4..a0f1dbf43b57 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {PureComponent} from 'react'; import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; @@ -47,7 +47,7 @@ const defaultProps = { fallbackIcon: Expensicons.FallbackAvatar, }; -class Avatar extends Component { +class Avatar extends PureComponent { constructor(props) { super(props); this.state = { @@ -55,30 +55,6 @@ class Avatar extends Component { }; } - shouldComponentUpdate(nextProps, nextState) { - if ( - lodashGet(this.props.network, 'isOffline') - && !lodashGet(nextProps.network, 'isOffline') - ) { - return true; - } - if (this.props.source !== nextProps.source) { - return true; - } - if (this.state.imageError !== nextState.imageError) { - return true; - } - - if (this.props.fill !== nextProps.fill) { - return true; - } - if (this.props.size !== nextProps.size) { - return true; - } - - return false; - } - componentDidUpdate(prevProps) { if ( !this.state.imageError || !lodashGet(prevProps.network, 'isOffline') From 9611bf99eb9ed057ee8f1d2e269b5e9f495e03e4 Mon Sep 17 00:00:00 2001 From: Hans Date: Fri, 2 Dec 2022 10:24:12 +0700 Subject: [PATCH 5/8] fix linting --- src/components/Avatar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index a0f1dbf43b57..52679823cfec 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -56,9 +56,9 @@ class Avatar extends PureComponent { } componentDidUpdate(prevProps) { + const isReconnecting = prevProps.network.isOffline && !this.props.network.isOffline; if ( - !this.state.imageError || !lodashGet(prevProps.network, 'isOffline') - || lodashGet(this.props.network, 'isOffline') + !this.state.imageError || !isReconnecting ) { return; } From 222c7404b19578cbefadf1087b2d2e6fb22f34d5 Mon Sep 17 00:00:00 2001 From: Hans Date: Fri, 2 Dec 2022 17:28:37 +0700 Subject: [PATCH 6/8] fix linting and merge with main --- src/components/Avatar.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 52679823cfec..e3434bb980c7 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -2,7 +2,6 @@ import React, {PureComponent} from 'react'; import {View, Image} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; -import lodashGet from 'lodash/get'; import stylePropTypes from '../styles/stylePropTypes'; import Icon from './Icon'; import themeColors from '../styles/themes/default'; @@ -57,9 +56,7 @@ class Avatar extends PureComponent { componentDidUpdate(prevProps) { const isReconnecting = prevProps.network.isOffline && !this.props.network.isOffline; - if ( - !this.state.imageError || !isReconnecting - ) { + if (!this.state.imageError || !isReconnecting) { return; } this.setState({imageError: false}); From 61fb7f7e2f28e0afbb659c50c79c7080e442cbb4 Mon Sep 17 00:00:00 2001 From: Hans Date: Fri, 2 Dec 2022 22:39:56 +0700 Subject: [PATCH 7/8] revert import --- src/components/Avatar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index e3434bb980c7..a236c63b2cb5 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -1,5 +1,5 @@ import React, {PureComponent} from 'react'; -import {View, Image} from 'react-native'; +import {Image, View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import stylePropTypes from '../styles/stylePropTypes'; From ada0df2415c46c74a1d57e4f9cc00ec6721861ac Mon Sep 17 00:00:00 2001 From: Hans Date: Tue, 6 Dec 2022 10:58:26 +0700 Subject: [PATCH 8/8] make image refreshable