Merge pull request #3529 from matrix-org/t3chguy/react16_cleanup2

React error/warning cleanup

src/components/views/elements/AppTile.js

@@ -594,7 +594,7 @@ export default class AppTile extends React.Component {
                                 allow={iframeFeatures}
                                 ref="appFrame"
                                 src={this._getSafeUrl()}
-                                allowFullScreen="true"
+                                allowFullScreen={true}
                                 sandbox={sandboxFlags}
                                 onLoad={this._onLoaded} />
                         </div>

src/components/views/elements/Flair.js

@@ -74,15 +74,15 @@ export default class Flair extends React.Component {
         };
     }
 
-    componentWillUnmount() {
-        this._unmounted = true;
-    }
-
-    componentWillMount() {
+    componentDidMount() {
         this._unmounted = false;
         this._generateAvatars(this.props.groups);
     }
 
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
     componentWillReceiveProps(newProps) {
         this._generateAvatars(newProps.groups);
     }

src/components/views/elements/TagTile.js

@@ -57,7 +57,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount() {
+    componentDidMount() {
         this.unmounted = false;
         if (this.props.tag[0] === '+') {
             FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);

src/components/views/elements/ToggleSwitch.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2019 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.
@@ -14,85 +15,62 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
+
 import {KeyCode} from "../../../Keyboard";
 
-export default class ToggleSwitch extends React.Component {
-    static propTypes = {
-        // Whether or not this toggle is in the 'on' position. Default false (off).
-        checked: PropTypes.bool,
-
-        // Whether or not the user can interact with the switch
-        disabled: PropTypes.bool,
-
-        // Called when the checked state changes. First argument will be the new state.
-        onChange: PropTypes.func,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            checked: props.checked || false, // default false
-        };
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.checked !== this.state.checked) {
-            this.setState({checked: nextProps.checked});
-        }
-    }
-
-    _toggle = () => {
-        if (this.props.disabled) return;
-
-        const newState = !this.state.checked;
-        this.setState({checked: newState});
-        if (this.props.onChange) {
-            this.props.onChange(newState);
-        }
-    };
-
-    _onClick = (e) => {
+// Controlled Toggle Switch element
+const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
+    const _onClick = (e) => {
         e.stopPropagation();
         e.preventDefault();
+        if (disabled) return;
 
-        this._toggle();
+        onChange(!checked);
     };
 
-    _onKeyDown = (e) => {
+    const _onKeyDown = (e) => {
         e.stopPropagation();
         e.preventDefault();
+        if (disabled) return;
 
         if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) {
-            this._toggle();
+            onChange(!checked);
         }
     };
 
-    render() {
-        // eslint-disable-next-line no-unused-vars
-        const {checked, disabled, onChange, ...props} = this.props;
+    const classes = classNames({
+        "mx_ToggleSwitch": true,
+        "mx_ToggleSwitch_on": checked,
+        "mx_ToggleSwitch_enabled": !disabled,
+    });
 
-        const classes = classNames({
-            "mx_ToggleSwitch": true,
-            "mx_ToggleSwitch_on": this.state.checked,
-            "mx_ToggleSwitch_enabled": !this.props.disabled,
-        });
-        return (
-            <div
-                {...props}
-                className={classes}
-                onClick={this._onClick}
-                onKeyDown={this._onKeyDown}
-                role="checkbox"
-                aria-checked={this.state.checked}
-                aria-disabled={disabled}
-                tabIndex={0}
-            >
-                <div className="mx_ToggleSwitch_ball" />
-            </div>
-        );
-    }
-}
+    return (
+        <div {...props}
+            className={classes}
+            onClick={_onClick}
+            onKeyDown={_onKeyDown}
+            role="checkbox"
+            aria-checked={checked}
+            aria-disabled={disabled}
+            tabIndex={0}
+        >
+            <div className="mx_ToggleSwitch_ball" />
+        </div>
+    );
+};
+
+ToggleSwitch.propTypes = {
+    // Whether or not this toggle is in the 'on' position.
+    checked: PropTypes.bool.isRequired,
+
+    // Whether or not the user can interact with the switch
+    disabled: PropTypes.bool,
+
+    // Called when the checked state changes. First argument will be the new state.
+    onChange: PropTypes.func.isRequired,
+};
+
+export default ToggleSwitch;