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

React error/warning cleanup

src/components/structures/TagPanelButtons.js

@@ -25,7 +25,7 @@ const TagPanelButtons = createReactClass({
     displayName: 'TagPanelButtons',
 
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._dispatcherRef = dis.register(this._onAction);
     },
 

src/components/views/avatars/BaseAvatar.js

@@ -57,7 +57,7 @@ module.exports = createReactClass({
         return this._getState(this.props);
     },
 
-    componentWillMount() {
+    componentDidMount() {
         this.unmounted = false;
         this.context.matrixClient.on('sync', this.onClientSync);
     },

src/components/views/avatars/RoomAvatar.js

@@ -52,7 +52,7 @@ module.exports = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
     },
 

src/components/views/dialogs/BugReportDialog.js

@@ -176,6 +176,7 @@ export default class BugReportDialog extends React.Component {
                         placeholder="https://github.com/vector-im/riot-web/issues/..."
                     />
                     <Field
+                        id="mx_BugReportDialog_notes"
                         className="mx_BugReportDialog_field_input"
                         element="textarea"
                         label={_t("Notes")}

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() {
+    componentDidMount() {
-        this._unmounted = true;
-    }
-
-    componentWillMount() {
         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 React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import classNames from "classnames";
+
 import {KeyCode} from "../../../Keyboard";
 
-export default class ToggleSwitch extends React.Component {
+// Controlled Toggle Switch element
-    static propTypes = {
+const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
-        // Whether or not this toggle is in the 'on' position. Default false (off).
+    const _onClick = (e) => {
-        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) => {
         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() {
+    const classes = classNames({
-        // eslint-disable-next-line no-unused-vars
+        "mx_ToggleSwitch": true,
-        const {checked, disabled, onChange, ...props} = this.props;
+        "mx_ToggleSwitch_on": checked,
+        "mx_ToggleSwitch_enabled": !disabled,
+    });
 
-        const classes = classNames({
+    return (
-            "mx_ToggleSwitch": true,
+        <div {...props}
-            "mx_ToggleSwitch_on": this.state.checked,
+            className={classes}
-            "mx_ToggleSwitch_enabled": !this.props.disabled,
+            onClick={_onClick}
-        });
+            onKeyDown={_onKeyDown}
-        return (
+            role="checkbox"
-            <div
+            aria-checked={checked}
-                {...props}
+            aria-disabled={disabled}
-                className={classes}
+            tabIndex={0}
-                onClick={this._onClick}
+        >
-                onKeyDown={this._onKeyDown}
+            <div className="mx_ToggleSwitch_ball" />
-                role="checkbox"
+        </div>
-                aria-checked={this.state.checked}
+    );
-                aria-disabled={disabled}
+};
-                tabIndex={0}
+
-            >
+ToggleSwitch.propTypes = {
-                <div className="mx_ToggleSwitch_ball" />
+    // Whether or not this toggle is in the 'on' position.
-            </div>
+    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;

src/components/views/globals/CookieBar.js

@@ -30,7 +30,9 @@ export default class CookieBar extends React.Component {
         super();
     }
 
-    onUsageDataClicked() {
+    onUsageDataClicked(e) {
+        e.stopPropagation();
+        e.preventDefault();
         Analytics.showDetailsModal();
     }
 
@@ -61,7 +63,6 @@ export default class CookieBar extends React.Component {
                         {
                             'UsageDataLink': (sub) => <a
                                 className="mx_MatrixToolbar_link"
-                                href="javascript:;"
                                 onClick={this.onUsageDataClicked}
                             >
                                 { sub }
@@ -83,7 +84,6 @@ export default class CookieBar extends React.Component {
                         {
                             'UsageDataLink': (sub) => <a
                                 className="mx_MatrixToolbar_link"
-                                href="javascript:;"
                                 onClick={this.onUsageDataClicked}
                             >
                                 { sub }

src/components/views/rooms/RoomTile.js

@@ -146,19 +146,17 @@ module.exports = createReactClass({
         });
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
-        MatrixClientPeg.get().on("accountData", this.onAccountData);
+        const cli = MatrixClientPeg.get();
-        MatrixClientPeg.get().on("Room.name", this.onRoomName);
+        cli.on("accountData", this.onAccountData);
+        cli.on("Room.name", this.onRoomName);
         ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
         this.dispatcherRef = dis.register(this.onAction);
 
         if (this._shouldShowStatusMessage()) {
             const statusUser = this._getStatusMessageUser();
             if (statusUser) {
-                statusUser.on(
+                statusUser.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
-                    "User._unstable_statusMessage",
-                    this._onStatusMessageCommitted,
-                );
             }
         }
     },