revert(avatar): Move Avatar back to non-hook implementation (#1186)

Author: j3tan

src/components/avatar/Avatar.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { useState, useEffect } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import AvatarImage from './AvatarImage';
 import AvatarInitials from './AvatarInitials';
@@ -30,36 +30,50 @@ type Props = {
     size?: $Keys<typeof SIZES>,
 };
 
-function Avatar({ avatarUrl, className, name, id, size = '' }: Props) {
-    const [hasImageErrored, setHasImageErrored] = useState(false);
-    const classes = classNames(['avatar', className, { [`avatar--${size}`]: SIZES[size] }]);
+type State = {
+    /** boolean to determine if image did not load correctly */
+    hasImageErrored: boolean,
+};
 
-    // Reset hasImageErrored state when avatarUrl changes
-    useEffect(() => {
-        setHasImageErrored(false);
-    }, [avatarUrl]);
+class Avatar extends React.PureComponent<Props, State> {
+    state = {
+        hasImageErrored: false,
+    };
 
-    let avatar;
-    if (avatarUrl && !hasImageErrored) {
-        avatar = (
-            <AvatarImage
-                onError={() => {
-                    setHasImageErrored(true);
-                }}
-                url={avatarUrl}
-            />
-        );
-    } else if (name) {
-        avatar = <AvatarInitials id={id} name={name} />;
-    } else {
-        avatar = <UnknownUserAvatar className="avatar-icon" />;
+    componentWillReceiveProps(nextProps: Props) {
+        if (this.state.hasImageErrored && this.props.avatarUrl !== nextProps.avatarUrl) {
+            this.setState({
+                hasImageErrored: false,
+            });
+        }
     }
 
-    return (
-        <span className={classes} role="presentation">
-            {avatar}
-        </span>
-    );
+    onImageError = () => {
+        this.setState({
+            hasImageErrored: true,
+        });
+    };
+
+    render() {
+        const { avatarUrl, className, name, id, size = '' }: Props = this.props;
+        const { hasImageErrored }: State = this.state;
+        const classes = classNames(['avatar', className, { [`avatar--${size}`]: SIZES[size] }]);
+
+        let avatar;
+        if (avatarUrl && !hasImageErrored) {
+            avatar = <AvatarImage onError={this.onImageError} url={avatarUrl} />;
+        } else if (name) {
+            avatar = <AvatarInitials id={id} name={name} />;
+        } else {
+            avatar = <UnknownUserAvatar className="avatar-icon" />;
+        }
+
+        return (
+            <span className={classes} role="presentation">
+                {avatar}
+            </span>
+        );
+    }
 }
 
 export default Avatar;

src/components/avatar/__tests__/Avatar-test.js

@@ -1,14 +1,7 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
 import Avatar from '../Avatar';
 
-function MockAvatarImage() {
-    return <div className="avatar-image" />;
-}
-
-jest.mock('../AvatarImage', () => MockAvatarImage);
-
 const testDataURI = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
 describe('components/avatar/Avatar', () => {
@@ -29,7 +22,7 @@ describe('components/avatar/Avatar', () => {
 
     test('should render an AvatarImage when avatarUrl is passed in', () => {
         const wrapper = shallow(<Avatar avatarUrl={testDataURI} />);
-        const avatarImage = wrapper.find(MockAvatarImage);
+        const avatarImage = wrapper.find('AvatarImage');
         expect(avatarImage.length).toEqual(1);
         expect(avatarImage.prop('url')).toEqual(testDataURI);
     });
@@ -58,9 +51,10 @@ describe('components/avatar/Avatar', () => {
 
     test('should fall back to AvatarInitials when there is an error in AvatarImage', () => {
         const wrapper = shallow(<Avatar avatarUrl="http://foo.bar/baz123_invalid" id="1" name="hello world" />);
-        const avatarImage = wrapper.find(MockAvatarImage);
-        avatarImage.prop('onError')();
 
+        wrapper.instance().onImageError();
+        expect(wrapper.state('hasImageErrored')).toEqual(true);
+        wrapper.update();
         const avatarInitials = wrapper.find('AvatarInitials');
         expect(avatarInitials.length).toEqual(1);
     });
@@ -72,27 +66,18 @@ describe('components/avatar/Avatar', () => {
             avatarUrl: 'http://foo.bar/baz123_invalid',
         };
 
-        let wrapper;
-        act(() => {
-            wrapper = mount(<Avatar {...props} />);
-        });
-        expect(wrapper.find(MockAvatarImage).length).toEqual(1);
+        const wrapper = shallow(<Avatar {...props} />);
 
-        act(() => {
-            const avatarImage = wrapper.find(MockAvatarImage);
-            avatarImage.prop('onError')();
-        });
-        wrapper.update();
-        expect(wrapper.find(MockAvatarImage).length).toEqual(0);
-        expect(wrapper.find('AvatarInitials').length).toEqual(1);
-
-        act(() => {
-            wrapper.setProps({
-                ...props,
-                avatarUrl: 'http://foo.bar/baz123_invalid_new',
-            });
+        wrapper.instance().onImageError();
+        expect(wrapper.state('hasImageErrored')).toEqual(true);
+
+        wrapper.setProps({
+            ...props,
+            avatarUrl: 'http://foo.bar/baz123_invalid_new',
         });
         wrapper.update();
-        expect(wrapper.find(MockAvatarImage).length).toEqual(1);
+
+        expect(wrapper.state('hasImageErrored')).toEqual(false);
+        expect(wrapper.find('AvatarImage').length).toEqual(1);
     });
 });