Merge pull request #15663 from kidroca/kidroca/refactor/avatar-platform-specific-code-replacement

Refactor: Remove Avatar platform specific code

Author: mountiny

package-lock.json

@@ -41,7 +41,7 @@
     "test:e2e": "node tests/e2e/testRunner.js --development"
   },
   "dependencies": {
-    "@expensify/react-native-web": "0.18.12",
+    "@expensify/react-native-web": "0.18.15",
     "@formatjs/intl-getcanonicallocales": "^1.5.8",
     "@formatjs/intl-locale": "^2.4.21",
     "@formatjs/intl-numberformat": "^6.2.5",

package.json

@@ -8,7 +8,6 @@ import themeColors from '../styles/themes/default';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import * as Expensicons from './Icon/Expensicons';
-import getAvatarDefaultSource from '../libs/getAvatarDefaultSource';
 import Image from './Image';
 import {withNetwork} from './OnyxProvider';
 import networkPropTypes from './networkPropTypes';
@@ -119,12 +118,7 @@ class Avatar extends PureComponent {
                         </View>
                     )
                     : (
-                        <Image
-                            source={{uri: this.props.source}}
-                            defaultSource={getAvatarDefaultSource(this.props.source)}
-                            style={imageStyle}
-                            onError={() => this.setState({imageError: true})}
-                        />
+                        <Image source={{uri: this.props.source}} style={imageStyle} onError={() => this.setState({imageError: true})} />
                     )}
             </View>
         );

src/components/Avatar.js

@@ -8,36 +8,23 @@ import {defaultProps, imagePropTypes} from './imagePropTypes';
 import RESIZE_MODES from './resizeModes';
 
 class Image extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.debouncedConfigureImageSource = _.debounce(this.configureImageSource, 220);
-
-        this.state = {
-            imageSource: undefined,
-        };
-    }
-
     componentDidMount() {
-        this.debouncedConfigureImageSource();
+        this.configureOnLoad();
     }
 
     componentDidUpdate(prevProps) {
-        if (prevProps.source.uri === this.props.source.uri) {
+        if (prevProps.source === this.props.source) {
             return;
         }
-
-        this.debouncedConfigureImageSource.cancel();
-        this.debouncedConfigureImageSource();
+        this.configureOnLoad();
     }
 
     /**
      * Check if the image source is a URL - if so the `encryptedAuthToken` is appended
-     * to the source. The natural image dimensions can then be retrieved using this source
-     * and as a result the `onLoad` event needs to be maunually invoked to return these dimensions
+     * to the source.
+     * @returns {Object} - the configured image source
      */
-    configureImageSource() {
-        this.props.onLoadStart();
+    getImageSource() {
         const source = this.props.source;
         let imageSource = source;
         if (this.props.isAuthTokenRequired) {
@@ -47,25 +34,34 @@ class Image extends React.Component {
             const authToken = lodashGet(this.props, 'session.encryptedAuthToken', null);
             imageSource = {uri: `${source.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`};
         }
-        this.setState({imageSource});
 
+        return imageSource;
+    }
+
+    /**
+     * The natural image dimensions are retrieved using the updated source
+     * and as a result the `onLoad` event needs to be manually invoked to return these dimensions
+     */
+    configureOnLoad() {
         // If an onLoad callback was specified then manually call it and pass
         // the natural image dimensions to match the native API
         if (this.props.onLoad == null) {
             return;
         }
 
+        const imageSource = this.getImageSource();
         RNImage.getSize(imageSource.uri, (width, height) => {
             this.props.onLoad({nativeEvent: {width, height}});
         });
     }
 
     render() {
-        // eslint-disable-next-line
-        const { source, onLoad, ...rest } = this.props;
+        // Omit the props which the underlying RNImage won't use
+        const forwardedProps = _.omit(this.props, ['source', 'onLoad', 'session', 'isAuthTokenRequired']);
+        const source = this.getImageSource();
 
-        // eslint-disable-next-line
-        return <RNImage {...rest} source={this.state.imageSource} />;
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return <RNImage {...forwardedProps} source={source} />;
     }
 }