Appease the linter

Appease the linter round 2

Appease the linter round 3

Appease the linter round 4

Appease the linter round 5

.eslintrc.js

@@ -42,9 +42,8 @@ module.exports = {
 
         // bind or arrow function in props causes performance issues
         // (but we currently use them in some places)
-        "react/jsx-no-bind": ["warn", {
+        // It's disabled here, but we should using it sparingly.
-            "ignoreRefs": true,
+        "react/jsx-no-bind": "off",
-        }],
         "react/jsx-key": ["error"],
 
         // Components in JSX should always be defined.

src/components/structures/MatrixChat.js

@@ -610,12 +610,13 @@ export default React.createClass({
             case 'view_indexed_room':
                 this._viewIndexedRoom(payload.roomIndex);
                 break;
-            case 'view_user_settings':
+            case 'view_user_settings': {
                 const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
                 Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {});
                 //this._setPage(PageTypes.UserSettings);
                 //this.notifyNewScreen('settings');
                 break;
+            }
             case 'view_old_user_settings':
                 this._setPage(PageTypes.UserSettings);
                 this.notifyNewScreen('settings');

src/components/structures/TabbedView.js

@@ -81,9 +81,11 @@ export class TabbedView extends React.Component {
             tabIcon = <span className="mx_TabbedView_tabLabel_icon">{tab.icon}</span>;
         }
 
+        const onClickHandler = () => this._setActiveTab(tab);
+
         return (
-            <span className={classes} key={"tab_label_ " + tab.label}
+            <span className={classes} key={"tab_label_" + tab.label}
-                  onClick={() => this._setActiveTab(tab)}>
+                  onClick={onClickHandler}>
                 {tabIcon}
                 <span className="mx_TabbedView_tabLabel_text">
                     {_t(tab.label)}
@@ -113,4 +115,4 @@ export class TabbedView extends React.Component {
             </div>
         );
     }
-}
+}

src/components/views/dialogs/UserSettingsDialog.js

@@ -22,8 +22,8 @@ import AccessibleButton from "../elements/AccessibleButton";
 import GeneralSettingsTab from "../settings/tabs/GeneralSettingsTab";
 import dis from '../../../dispatcher';
 
+// TODO: Ditch this whole component
 export class TempTab extends React.Component {
-    // TODO: Ditch this
     static propTypes = {
         onClose: PropTypes.func.isRequired,
     };
@@ -45,13 +45,41 @@ export default class UserSettingsDialog extends React.Component {
 
     _getTabs() {
         return [
-            new Tab(_td("General"), <span className="mx_UserSettingsDialog_settingsIcon mx_TabbedView_maskedIcon" />, <GeneralSettingsTab />),
+            new Tab(
-            new Tab(_td("Notifications"), <span className="mx_UserSettingsDialog_bellIcon mx_TabbedView_maskedIcon" />, <div>Notifications Test</div>),
+                _td("General"),
-            new Tab(_td("Preferences"), <span className="mx_UserSettingsDialog_preferencesIcon mx_TabbedView_maskedIcon" />, <div>Preferences Test</div>),
+                <span className="mx_UserSettingsDialog_settingsIcon mx_TabbedView_maskedIcon" />,
-            new Tab(_td("Voice & Video"), <span className="mx_UserSettingsDialog_voiceIcon mx_TabbedView_maskedIcon" />, <div>Voice Test</div>),
+                <GeneralSettingsTab />,
-            new Tab(_td("Security & Privacy"), <span className="mx_UserSettingsDialog_securityIcon mx_TabbedView_maskedIcon" />, <div>Security Test</div>),
+            ),
-            new Tab(_td("Help & About"), <span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />, <div>Help Test</div>),
+            new Tab(
-            new Tab(_td("Visit old settings"), <span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />, <TempTab onClose={this.props.onFinished}/>),
+                _td("Notifications"),
+                <span className="mx_UserSettingsDialog_bellIcon mx_TabbedView_maskedIcon" />,
+                <div>Notifications Test</div>,
+            ),
+            new Tab(
+                _td("Preferences"),
+                <span className="mx_UserSettingsDialog_preferencesIcon mx_TabbedView_maskedIcon" />,
+                <div>Preferences Test</div>,
+            ),
+            new Tab(
+                _td("Voice & Video"),
+                <span className="mx_UserSettingsDialog_voiceIcon mx_TabbedView_maskedIcon" />,
+                <div>Voice Test</div>,
+            ),
+            new Tab(
+                _td("Security & Privacy"),
+                <span className="mx_UserSettingsDialog_securityIcon mx_TabbedView_maskedIcon" />,
+                <div>Security Test</div>,
+            ),
+            new Tab(
+                _td("Help & About"),
+                <span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />,
+                <div>Help Test</div>,
+            ),
+            new Tab(
+                _td("Visit old settings"),
+                <span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />,
+                <TempTab onClose={this.props.onFinished} />,
+            ),
         ];
     }
 
@@ -66,12 +94,6 @@ export default class UserSettingsDialog extends React.Component {
                 </div>
                 <TabbedView tabs={this._getTabs()} />
             </div>
-            // <UserSettings
-            //     onClose={this.props.onFinished}
-            //     brand={SdkConfig.get().brand}
-            //     referralBaseUrl={SdkConfig.get().referralBaseUrl}
-            //     teamToken={SdkConfig.get().teamToken}
-            // />
         );
     }
 }

src/components/views/elements/AccessibleButton.js

@@ -39,7 +39,7 @@ export default function AccessibleButton(props) {
         // And divs which we report as role button to assistive technologies.
         // Browsers handle space and enter keypresses differently and we are only adjusting to the
         // inconsistencies here
-        restProps.onKeyDown = function (e) {
+        restProps.onKeyDown = function(e) {
             if (e.keyCode === KeyCode.ENTER) {
                 e.stopPropagation();
                 e.preventDefault();
@@ -50,7 +50,7 @@ export default function AccessibleButton(props) {
                 e.preventDefault();
             }
         };
-        restProps.onKeyUp = function (e) {
+        restProps.onKeyUp = function(e) {
             if (e.keyCode === KeyCode.SPACE) {
                 e.stopPropagation();
                 e.preventDefault();

src/components/views/settings/tabs/GeneralSettingsTab.js

@@ -21,7 +21,6 @@ import Field from "../../elements/Field";
 import AccessibleButton from "../../elements/AccessibleButton";
 
 export default class GeneralSettingsTab extends React.Component {
-
     constructor() {
         super();
 
@@ -56,6 +55,7 @@ export default class GeneralSettingsTab extends React.Component {
     };
 
     _renderProfileSection() {
+        // TODO: Ditch avatar placeholder and use the real thing
         const form = (
             <form onSubmit={this._saveProfile} autoComplete={false} noValidate={true}>
                 <div className="mx_GeneralSettingsTab_profile">
@@ -63,24 +63,20 @@ export default class GeneralSettingsTab extends React.Component {
                         <p className="mx_GeneralSettingsTab_profileUsername">{this.state.userId}</p>
                         <Field id="profileDisplayName" label={_t("Display Name")}
                                type="text" value={this.state.displayName} autocomplete="off"
-                               onChange={this._onDisplayNameChanged}
+                               onChange={this._onDisplayNameChanged} />
-                        />
                     </div>
                     <div className="mx_GeneralSettingsTab_profileAvatar">
-                        {/*TODO: Ditch avatar placeholder and use the real thing*/}
+                        <div />
-                        <div/>
                     </div>
                 </div>
                 <AccessibleButton onClick={this._saveProfile} kind="primary"
-                                  disabled={!this.state.enableProfileSave}
+                                  disabled={!this.state.enableProfileSave}>
-                >
                     {_t("Save")}
                 </AccessibleButton>
             </form>
         );
 
-        return (
+        return (<div className="mx_SettingsTab_section">
-            <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
                 {form}
             </div>