Transition BaseAvatar to hooks

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

.eslintignore.errorfiles

@@ -7,7 +7,6 @@ src/components/structures/RoomView.js
 src/components/structures/ScrollPanel.js
 src/components/structures/SearchBox.js
 src/components/structures/UploadBar.js
-src/components/views/avatars/BaseAvatar.js
 src/components/views/avatars/MemberAvatar.js
 src/components/views/create_room/RoomAlias.js
 src/components/views/dialogs/DeactivateAccountDialog.js

src/components/views/avatars/BaseAvatar.js

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,206 +17,183 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
 
-export default createReactClass({
+const useImageUrl = ({url, urls, idName, name, defaultToInitialLetter}) => {
-    displayName: 'BaseAvatar',
+    const [imageUrls, setUrls] = useState([]);
+    const [urlsIndex, setIndex] = useState();
 
-    propTypes: {
+    const onError = () => {
-        name: PropTypes.string.isRequired, // The name (first initial used as default)
+        const nextIndex = urlsIndex + 1;
-        idName: PropTypes.string, // ID for generating hash colours
+        if (nextIndex < imageUrls.length) {
-        title: PropTypes.string, // onHover title text
+            // try the next one
-        url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
+            setIndex(nextIndex);
-        urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
-        width: PropTypes.number,
-        height: PropTypes.number,
-        // XXX resizeMethod not actually used.
-        resizeMethod: PropTypes.string,
-        defaultToInitialLetter: PropTypes.bool, // true to add default url
-        inputRef: PropTypes.oneOfType([
-            // Either a function
-            PropTypes.func,
-            // Or the instance of a DOM native element
-            PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-        ]),
-    },
-
-    statics: {
-        contextType: MatrixClientContext,
-    },
-
-    getDefaultProps: function() {
-        return {
-            width: 40,
-            height: 40,
-            resizeMethod: 'crop',
-            defaultToInitialLetter: true,
-        };
-    },
-
-    getInitialState: function() {
-        return this._getState(this.props);
-    },
-
-    componentDidMount() {
-        this.unmounted = false;
-        this.context.on('sync', this.onClientSync);
-    },
-
-    componentWillUnmount() {
-        this.unmounted = true;
-        this.context.removeListener('sync', this.onClientSync);
-    },
-
-    componentWillReceiveProps: function(nextProps) {
-        // work out if we need to call setState (if the image URLs array has changed)
-        const newState = this._getState(nextProps);
-        const newImageUrls = newState.imageUrls;
-        const oldImageUrls = this.state.imageUrls;
-        if (newImageUrls.length !== oldImageUrls.length) {
-            this.setState(newState); // detected a new entry
-        } else {
-            // check each one to see if they are the same
-            for (let i = 0; i < newImageUrls.length; i++) {
-                if (oldImageUrls[i] !== newImageUrls[i]) {
-                    this.setState(newState); // detected a diff
-                    break;
-                }
-            }
         }
-    },
+    };
 
-    onClientSync: function(syncState, prevState) {
+    const defaultImageUrl = useMemo(() => AvatarLogic.defaultAvatarUrlForString(idName || name), [idName, name]);
-        if (this.unmounted) return;
 
-        // Consider the client reconnected if there is no error with syncing.
+    useEffect(() => {
-        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
-        const reconnected = syncState !== "ERROR" && prevState !== syncState;
-        if (reconnected &&
-            // Did we fall back?
-            this.state.urlsIndex > 0
-        ) {
-            // Start from the highest priority URL again
-            this.setState({
-                urlsIndex: 0,
-            });
-        }
-    },
-
-    _getState: function(props) {
         // work out the full set of urls to try to load. This is formed like so:
-        // imageUrls: [ props.url, props.urls, default image ]
+        // imageUrls: [ props.url, ...props.urls, default image ]
 
-        let urls = [];
+        let _urls = [];
         if (!SettingsStore.getValue("lowBandwidth")) {
-            urls = props.urls || [];
+            _urls = urls || [];
 
-            if (props.url) {
+            if (url) {
-                urls.unshift(props.url); // put in urls[0]
+                _urls.unshift(url); // put in urls[0]
             }
         }
 
-        let defaultImageUrl = null;
+        if (defaultToInitialLetter) {
-        if (props.defaultToInitialLetter) {
+            _urls.push(defaultImageUrl); // lowest priority
-            defaultImageUrl = AvatarLogic.defaultAvatarUrlForString(
-                props.idName || props.name,
-            );
-            urls.push(defaultImageUrl); // lowest priority
         }
 
         // deduplicate URLs
-        urls = Array.from(new Set(urls));
+        _urls = Array.from(new Set(_urls));
 
-        return {
+        setIndex(0);
-            imageUrls: urls,
+        setUrls(_urls);
-            defaultImageUrl: defaultImageUrl,
+    }, [url, ...(urls || [])]); // eslint-disable-line react-hooks/exhaustive-deps
-            urlsIndex: 0,
-        };
-    },
 
-    onError: function(ev) {
+    const cli = useContext(MatrixClientContext);
-        const nextIndex = this.state.urlsIndex + 1;
+    const onClientSync = useCallback((syncState, prevState) => {
-        if (nextIndex < this.state.imageUrls.length) {
+        // Consider the client reconnected if there is no error with syncing.
-            // try the next one
+        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
-            this.setState({
+        const reconnected = syncState !== "ERROR" && prevState !== syncState;
-                urlsIndex: nextIndex,
+        if (reconnected && urlsIndex > 0 ) { // Did we fall back?
-            });
+            // Start from the highest priority URL again
+            setIndex(0);
         }
-    },
+    }, [urlsIndex]);
+    useEventEmitter(cli, "sync", onClientSync);
 
-    render: function() {
+    const imageUrl = imageUrls[urlsIndex];
-        const imageUrl = this.state.imageUrls[this.state.urlsIndex];
+    return [imageUrl, imageUrl === defaultImageUrl, onError];
+};
 
-        const {
+const BaseAvatar = (props) => {
-            name, idName, title, url, urls, width, height, resizeMethod,
+    const {
-            defaultToInitialLetter, onClick, inputRef,
+        name,
-            ...otherProps
+        idName,
-        } = this.props;
+        title,
+        url,
+        urls,
+        width=40,
+        height=40,
+        resizeMethod="crop", // eslint-disable-line no-unused-vars
+        defaultToInitialLetter=true,
+        onClick,
+        inputRef,
+        ...otherProps
+    } = props;
 
-        if (imageUrl === this.state.defaultImageUrl) {
+    const [imageUrl, isDefault, onError] = useImageUrl({url, urls, idName, name, defaultToInitialLetter});
-            const initialLetter = AvatarLogic.getInitialLetter(name);
+
-            const textNode = (
+    if (isDefault) {
-                <span className="mx_BaseAvatar_initial" aria-hidden="true"
+        const initialLetter = AvatarLogic.getInitialLetter(name);
-                    style={{ fontSize: (width * 0.65) + "px",
+        const textNode = (
+            <span
+                className="mx_BaseAvatar_initial"
+                aria-hidden="true"
+                style={{
+                    fontSize: (width * 0.65) + "px",
                     width: width + "px",
-                    lineHeight: height + "px" }}
+                    lineHeight: height + "px",
-                >
+                }}
-                    { initialLetter }
+            >
-                </span>
+                { initialLetter }
-            );
+            </span>
-            const imgNode = (
+        );
-                <img className="mx_BaseAvatar_image" src={imageUrl}
+        const imgNode = (
-                    alt="" title={title} onError={this.onError}
+            <img
-                    width={width} height={height} aria-hidden="true" />
+                className="mx_BaseAvatar_image"
-            );
+                src={imageUrl}
-            if (onClick != null) {
+                alt=""
-                return (
+                title={title}
-                    <AccessibleButton element='span' className="mx_BaseAvatar"
+                onError={onError}
-                        onClick={onClick} inputRef={inputRef} {...otherProps}
+                width={width}
-                    >
+                height={height}
-                        { textNode }
+                aria-hidden="true" />
-                        { imgNode }
+        );
-                    </AccessibleButton>
+
-                );
-            } else {
-                return (
-                    <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
-                        { textNode }
-                        { imgNode }
-                    </span>
-                );
-            }
-        }
         if (onClick != null) {
             return (
                 <AccessibleButton
-                    className="mx_BaseAvatar mx_BaseAvatar_image"
+                    {...otherProps}
-                    element='img'
+                    element="span"
-                    src={imageUrl}
+                    className="mx_BaseAvatar"
                     onClick={onClick}
-                    onError={this.onError}
-                    width={width} height={height}
-                    title={title} alt=""
                     inputRef={inputRef}
-                    {...otherProps} />
+                >
+                    { textNode }
+                    { imgNode }
+                </AccessibleButton>
             );
         } else {
             return (
-                <img
+                <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
-                    className="mx_BaseAvatar mx_BaseAvatar_image"
+                    { textNode }
-                    src={imageUrl}
+                    { imgNode }
-                    onError={this.onError}
+                </span>
-                    width={width} height={height}
-                    title={title} alt=""
-                    ref={inputRef}
-                    {...otherProps} />
             );
         }
-    },
+    }
-});
+
+    if (onClick != null) {
+        return (
+            <AccessibleButton
+                className="mx_BaseAvatar mx_BaseAvatar_image"
+                element='img'
+                src={imageUrl}
+                onClick={onClick}
+                onError={onError}
+                width={width} height={height}
+                title={title} alt=""
+                inputRef={inputRef}
+                {...otherProps} />
+        );
+    } else {
+        return (
+            <img
+                className="mx_BaseAvatar mx_BaseAvatar_image"
+                src={imageUrl}
+                onError={onError}
+                width={width} height={height}
+                title={title} alt=""
+                ref={inputRef}
+                {...otherProps} />
+        );
+    }
+};
+
+BaseAvatar.displayName = "BaseAvatar";
+
+BaseAvatar.propTypes = {
+    name: PropTypes.string.isRequired, // The name (first initial used as default)
+    idName: PropTypes.string, // ID for generating hash colours
+    title: PropTypes.string, // onHover title text
+    url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
+    urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
+    width: PropTypes.number,
+    height: PropTypes.number,
+    // XXX resizeMethod not actually used.
+    resizeMethod: PropTypes.string,
+    defaultToInitialLetter: PropTypes.bool, // true to add default url
+    onClick: PropTypes.func,
+    inputRef: PropTypes.oneOfType([
+        // Either a function
+        PropTypes.func,
+        // Or the instance of a DOM native element
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    ]),
+};
+
+export default BaseAvatar;