Merge pull request #1064 from matrix-org/rav/delinting

Delinting

.eslintignore.errorfiles

@@ -22,7 +22,6 @@ src/components/structures/login/ForgotPassword.js
 src/components/structures/login/Login.js
 src/components/structures/login/PostRegistration.js
 src/components/structures/login/Registration.js
-src/components/structures/MatrixChat.js
 src/components/structures/MessagePanel.js
 src/components/structures/NotificationPanel.js
 src/components/structures/RoomStatusBar.js
@@ -30,7 +29,6 @@ src/components/structures/RoomView.js
 src/components/structures/ScrollPanel.js
 src/components/structures/TimelinePanel.js
 src/components/structures/UploadBar.js
-src/components/structures/UserSettings.js
 src/components/views/avatars/BaseAvatar.js
 src/components/views/avatars/MemberAvatar.js
 src/components/views/avatars/RoomAvatar.js

src/components/structures/MatrixChat.js

@@ -35,7 +35,7 @@ import * as Rooms from '../../Rooms';
 import linkifyMatrix from "../../linkify-matrix";
 import * as Lifecycle from '../../Lifecycle';
 // LifecycleStore is not used but does listen to and dispatch actions
-import LifecycleStore from '../../stores/LifecycleStore';
+require('../../stores/LifecycleStore');
 import RoomViewStore from '../../stores/RoomViewStore';
 import PageTypes from '../../PageTypes';
 
@@ -745,8 +745,8 @@ module.exports = React.createClass({
             title: _t('Create Room'),
             description: _t('Room name (optional)'),
             button: _t('Create Room'),
-            onFinished: (should_create, name) => {
+            onFinished: (shouldCreate, name) => {
-                if (should_create) {
+                if (shouldCreate) {
                     const createOpts = {};
                     if (name) createOpts.name = name;
                     createRoom({createOpts}).done();

src/components/structures/UserSettings.js

@@ -389,7 +389,10 @@ module.exports = React.createClass({
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createDialog(ErrorDialog, {
             title: _t("Success"),
-            description: _t("Your password was successfully changed. You will not receive push notifications on other devices until you log back in to them") + ".",
+            description: _t(
+                "Your password was successfully changed. You will not receive " +
+                "push notifications on other devices until you log back in to them",
+            ) + ".",
         });
         dis.dispatch({action: 'password_changed'});
     },
@@ -427,7 +430,10 @@ module.exports = React.createClass({
         this._addThreepid.addEmailAddress(emailAddress, true).done(() => {
             Modal.createDialog(QuestionDialog, {
                 title: _t("Verification Pending"),
-                description: _t("Please check your email and click on the link it contains. Once this is done, click continue."),
+                description: _t(
+                    "Please check your email and click on the link it contains. Once this " +
+                    "is done, click continue.",
+                ),
                 button: _t('Continue'),
                 onFinished: this.onEmailDialogFinished,
             });
@@ -447,7 +453,7 @@ module.exports = React.createClass({
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createDialog(QuestionDialog, {
             title: _t("Remove Contact Information?"),
-            description: _t("Remove %(threePid)s?", { threePid : threepid.address }),
+            description: _t("Remove %(threePid)s?", { threePid: threepid.address }),
             button: _t('Remove'),
             onFinished: (submit) => {
                 if (submit) {
@@ -489,7 +495,7 @@ module.exports = React.createClass({
             this.setState({email_add_pending: false});
             if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
                 const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                let message = _t("Unable to verify email address.") + " " +
+                const message = _t("Unable to verify email address.") + " " +
                     _t("Please check your email and click on the link it contains. Once this is done, click continue.");
                 Modal.createDialog(QuestionDialog, {
                     title: _t("Verification Pending"),
@@ -608,7 +614,7 @@ module.exports = React.createClass({
         }
     },
 
-    _renderLanguageSetting: function () {
+    _renderLanguageSetting: function() {
         const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
         return <div>
             <label htmlFor="languageSelector">{_t('Interface Language')}</label>
@@ -639,7 +645,7 @@ module.exports = React.createClass({
             <input id="urlPreviewsDisabled"
                    type="checkbox"
                    defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() }
-                   onChange={ (e) => UserSettingsStore.setUrlPreviewsDisabled(e.target.checked) }
+                   onChange={ this._onPreviewsDisabledChanged }
             />
             <label htmlFor="urlPreviewsDisabled">
                 { _t("Disable inline URL previews by default") }
@@ -647,17 +653,24 @@ module.exports = React.createClass({
         </div>;
     },
 
+    _onPreviewsDisabledChanged: function(e) {
+         UserSettingsStore.setUrlPreviewsDisabled(e.target.checked);
+    },
+
     _renderSyncedSetting: function(setting) {
+        // TODO: this ought to be a separate component so that we don't need
+        // to rebind the onChange each time we render
+
+        const onChange = (e) => {
+            UserSettingsStore.setSyncedSetting(setting.id, e.target.checked);
+            if (setting.fn) setting.fn(e.target.checked);
+        };
+
         return <div className="mx_UserSettings_toggle" key={ setting.id }>
             <input id={ setting.id }
                    type="checkbox"
                    defaultChecked={ this._syncedSettings[setting.id] }
-                   onChange={
+                   onChange={ onChange }
-                       (e) => {
-                           UserSettingsStore.setSyncedSetting(setting.id, e.target.checked);
-                           if (setting.fn) setting.fn(e.target.checked);
-                       }
-                   }
             />
             <label htmlFor={ setting.id }>
                 { _t(setting.label) }
@@ -666,13 +679,9 @@ module.exports = React.createClass({
     },
 
     _renderThemeSelector: function(setting) {
-        return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }>
+        // TODO: this ought to be a separate component so that we don't need
-            <input id={ setting.id + "_" + setting.value }
+        // to rebind the onChange each time we render
-                   type="radio"
+        const onChange = (e) => {
-                   name={ setting.id }
-                   value={ setting.value }
-                   defaultChecked={ this._syncedSettings[setting.id] === setting.value }
-                   onChange={ (e) => {
             if (e.target.checked) {
                 UserSettingsStore.setSyncedSetting(setting.id, setting.value);
             }
@@ -680,8 +689,14 @@ module.exports = React.createClass({
                 action: 'set_theme',
                 value: setting.value,
             });
-                        }
+        };
-                   }
+        return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }>
+            <input id={ setting.id + "_" + setting.value }
+                   type="radio"
+                   name={ setting.id }
+                   value={ setting.value }
+                   defaultChecked={ this._syncedSettings[setting.id] === setting.value }
+                   onChange={ onChange }
             />
             <label htmlFor={ setting.id + "_" + setting.value }>
                 { setting.label }
@@ -720,8 +735,10 @@ module.exports = React.createClass({
                 <h3>{ _t("Cryptography") }</h3>
                 <div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
                     <ul>
-                        <li><label>{_t("Device ID:")}</label>             <span><code>{deviceId}</code></span></li>
+                        <li><label>{_t("Device ID:")}</label>
-                        <li><label>{_t("Device key:")}</label>            <span><code><b>{identityKey}</b></code></span></li>
+                            <span><code>{deviceId}</code></span></li>
+                        <li><label>{_t("Device key:")}</label>
+                            <span><code><b>{identityKey}</b></code></span></li>
                     </ul>
                     { importExportButtons }
                 </div>
@@ -733,16 +750,18 @@ module.exports = React.createClass({
     },
 
     _renderLocalSetting: function(setting) {
+        // TODO: this ought to be a separate component so that we don't need
+        // to rebind the onChange each time we render
+        const onChange = (e) => {
+            UserSettingsStore.setLocalSetting(setting.id, e.target.checked);
+            if (setting.fn) setting.fn(e.target.checked);
+        };
+
         return <div className="mx_UserSettings_toggle" key={ setting.id }>
             <input id={ setting.id }
                    type="checkbox"
                    defaultChecked={ this._localSettings[setting.id] }
-                   onChange={
+                   onChange={ onChange }
-                        (e) => {
-                            UserSettingsStore.setLocalSetting(setting.id, e.target.checked);
-                            if (setting.fn) setting.fn(e.target.checked);
-                        }
-                   }
             />
             <label htmlFor={ setting.id }>
                 { _t(setting.label) }
@@ -794,14 +813,10 @@ module.exports = React.createClass({
         if (this.props.enableLabs === false) return null;
         UserSettingsStore.doTranslations();
 
-        const features = UserSettingsStore.LABS_FEATURES.map((feature) => (
+        const features = UserSettingsStore.LABS_FEATURES.map((feature) => {
-            <div key={feature.id} className="mx_UserSettings_toggle">
+            // TODO: this ought to be a separate component so that we don't need
-                <input
+            // to rebind the onChange each time we render
-                    type="checkbox"
+            const onChange = (e) => {
-                    id={feature.id}
-                    name={feature.id}
-                    defaultChecked={ UserSettingsStore.isFeatureEnabled(feature.id) }
-                    onChange={(e) => {
                 if (MatrixClientPeg.get().isGuest()) {
                     e.target.checked = false;
                     dis.dispatch({action: 'view_set_mxid'});
@@ -810,10 +825,21 @@ module.exports = React.createClass({
 
                 UserSettingsStore.setFeatureEnabled(feature.id, e.target.checked);
                 this.forceUpdate();
-                    }}/>
+            };
+
+            return (
+                <div key={feature.id} className="mx_UserSettings_toggle">
+                    <input
+                        type="checkbox"
+                        id={feature.id}
+                        name={feature.id}
+                        defaultChecked={ UserSettingsStore.isFeatureEnabled(feature.id) }
+                        onChange={ onChange }
+                    />
                     <label htmlFor={feature.id}>{feature.name}</label>
                 </div>
-        ));
+            );
+        });
         return (
             <div>
                 <h3>{ _t("Labs") }</h3>
@@ -865,9 +891,10 @@ module.exports = React.createClass({
         if (!this.state.rejectingInvites) {
             // bind() the invited rooms so any new invites that may come in as this button is clicked
             // don't inadvertently get rejected as well.
+            const onClick = this._onRejectAllInvitesClicked.bind(this, invitedRooms);
             reject = (
                 <AccessibleButton className="mx_UserSettings_button danger"
-                onClick={this._onRejectAllInvitesClicked.bind(this, invitedRooms)}>
+                onClick={onClick}>
                     {_t("Reject all %(invitedRooms)s invites", {invitedRooms: invitedRooms.length})}
                 </AccessibleButton>
             );
@@ -885,8 +912,6 @@ module.exports = React.createClass({
         const settings = this.state.electron_settings;
         if (!settings) return;
 
-        const {ipcRenderer} = require('electron');
-
         return <div>
             <h3>{ _t('Desktop specific') }</h3>
             <div className="mx_UserSettings_section">
@@ -894,9 +919,7 @@ module.exports = React.createClass({
                     <input type="checkbox"
                            name="auto-launch"
                            defaultChecked={settings['auto-launch']}
-                           onChange={(e) => {
+                           onChange={this._onAutoLaunchChanged}
-                               ipcRenderer.send('settings_set', 'auto-launch', e.target.checked);
-                           }}
                     />
                     <label htmlFor="auto-launch">{_t('Start automatically after system login')}</label>
                 </div>
@@ -904,6 +927,11 @@ module.exports = React.createClass({
         </div>;
     },
 
+    _onAutoLaunchChanged: function(e) {
+        const {ipcRenderer} = require('electron');
+        ipcRenderer.send('settings_set', 'auto-launch', e.target.checked);
+    },
+
     _mapWebRtcDevicesToSpans: function(devices) {
         return devices.map((device) => <span key={device.deviceId}>{device.label}</span>);
     },
@@ -1060,6 +1088,9 @@ module.exports = React.createClass({
 
         const threepidsSection = this.state.threepids.map((val, pidIndex) => {
             const id = "3pid-" + val.address;
+            // TODO; make a separate component to avoid having to rebind onClick
+            // each time we render
+            const onRemoveClick = (e) => this.onRemoveThreepidClicked(val);
             return (
                 <div className="mx_UserSettings_profileTableRow" key={pidIndex}>
                     <div className="mx_UserSettings_profileLabelCell">
@@ -1071,7 +1102,8 @@ module.exports = React.createClass({
                         />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                        <img src="img/cancel-small.svg" width="14" height="14" alt={ _t("Remove") } onClick={this.onRemoveThreepidClicked.bind(this, val)} />
+                        <img src="img/cancel-small.svg" width="14" height="14" alt={ _t("Remove") }
+                            onClick={onRemoveClick} />
                     </div>
                 </div>
             );
@@ -1222,7 +1254,12 @@ module.exports = React.createClass({
                         { _t("Logged in as:") } {this._me}
                     </div>
                     <div className="mx_UserSettings_advanced">
-                        {_t('Access Token:')} <span className="mx_UserSettings_advanced_spoiler" onClick={this._showSpoiler} data-spoiler={ MatrixClientPeg.get().getAccessToken() }>&lt;{ _t("click to reveal") }&gt;</span>
+                        {_t('Access Token:')}
+                        <span className="mx_UserSettings_advanced_spoiler"
+                                onClick={this._showSpoiler}
+                                data-spoiler={ MatrixClientPeg.get().getAccessToken() }>
+                            &lt;{ _t("click to reveal") }&gt;
+                        </span>
                     </div>
                     <div className="mx_UserSettings_advanced">
                         { _t("Homeserver is") } { MatrixClientPeg.get().getHomeserverUrl() }