Re-write as full class component

So we can re-use the functions we pass to props

package.json

@@ -47,7 +47,7 @@
     "start:init": "babel src -d lib --source-maps --copy-files",
     "lint": "eslint src/",
     "lintall": "eslint src/ test/",
-    "lintwithexclusions": "eslint --max-warnings 20 --ignore-path .eslintignore.errorfiles src test",
+    "lintwithexclusions": "eslint --max-warnings 16 --ignore-path .eslintignore.errorfiles src test",
     "clean": "rimraf lib",
     "prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt",
     "test": "karma start --single-run=true --browsers ChromeHeadless",

src/components/views/dialogs/LogoutDialog.js

@@ -22,14 +22,63 @@ import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import SettingsStore from "../../../settings/SettingsStore";
 
-export default (props) => {
+export default class LogoutDialog extends React.Component {
-    const onSettingsLinkClick = () => {
+    constructor() {
-        // close dialog
+        super();
-        if (props.onFinished) {
+        this._onSettingsLinkClick = this._onSettingsLinkClick.bind(this);
-            props.onFinished();
+        this._onExportE2eKeysClicked = this._onExportE2eKeysClicked.bind(this);
+        this._onFinished = this._onFinished.bind(this);
+        this._onSetRecoveryMethodClick = this._onSetRecoveryMethodClick.bind(this);
+        this._onLogoutConfirm = this._onLogoutConfirm.bind(this);
     }
-    };
 
+    _onSettingsLinkClick() {
+        // close dialog
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    _onExportE2eKeysClicked() {
+        Modal.createTrackedDialogAsync('Export E2E Keys', '',
+            import('../../../async-components/views/dialogs/ExportE2eKeysDialog'),
+            {
+                matrixClient: MatrixClientPeg.get(),
+            },
+        );
+    }
+
+    _onFinished(confirmed) {
+        if (confirmed) {
+            dis.dispatch({action: 'logout'});
+        }
+        // close dialog
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    _onSetRecoveryMethodClick() {
+        Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
+            import('../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
+        );
+
+        // close dialog
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    _onLogoutConfirm() {
+        dis.dispatch({action: 'logout'});
+
+        // close dialog
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    render() {
         let description;
         if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
             description = <div>
@@ -41,7 +90,7 @@ export default (props) => {
                     "Alternatively, advanced users can also manually export encryption keys in " +
                     "<a>Settings</a> before logging out.", {},
                     {
-                    a: sub => <a href='#/settings' onClick={onSettingsLinkClick}>{sub}</a>,
+                        a: sub => <a href='#/settings' onClick={this._onSettingsLinkClick}>{sub}</a>,
                     },
                 )}</p>
             </div>;
@@ -54,45 +103,6 @@ export default (props) => {
             )}</div>;
         }
 
-    const onExportE2eKeysClicked = () => {
-        Modal.createTrackedDialogAsync('Export E2E Keys', '',
-            import('../../../async-components/views/dialogs/ExportE2eKeysDialog'),
-            {
-                matrixClient: MatrixClientPeg.get(),
-            },
-        );
-    };
-
-    const onFinished = (confirmed) => {
-        if (confirmed) {
-            dis.dispatch({action: 'logout'});
-        }
-        // close dialog
-        if (props.onFinished) {
-            props.onFinished();
-        }
-    };
-
-    const onSetRecoveryMethodClick = () => {
-        Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
-            import('../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
-        );
-
-        // close dialog
-        if (props.onFinished) {
-            props.onFinished();
-        }
-    };
-
-    const onLogoutConfirm = () => {
-        dis.dispatch({action: 'logout'});
-
-        // close dialog
-        if (props.onFinished) {
-            props.onFinished();
-        }
-    };
-
         if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
             if (!MatrixClientPeg.get().getKeyBackupEnabled()) {
                 const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
@@ -104,17 +114,17 @@ export default (props) => {
                     title={_t("Warning!")}
                     contentId='mx_Dialog_content'
                     hasCancel={false}
-                onFinsihed={onFinished}
+                    onFinsihed={this._onFinished}
                 >
                     <div className="mx_Dialog_content" id='mx_Dialog_content'>
                         { description }
                     </div>
                     <DialogButtons primaryButton={_t('Set a Recovery Method')}
                         hasCancel={false}
-                    onPrimaryButtonClick={onSetRecoveryMethodClick}
+                        onPrimaryButtonClick={this._onSetRecoveryMethodClick}
                         focus={true}
                     >
-                    <button onClick={onLogoutConfirm}>
+                        <button onClick={this._onLogoutConfirm}>
                             {_t("I understand, log out without")}
                         </button>
                     </DialogButtons>
@@ -131,7 +141,7 @@ export default (props) => {
                         "restoring your key backup. You'll need your recovery key.",
                     )}
                     button={_t("Sign out")}
-                onFinished={onFinished}
+                    onFinished={this._onFinished}
                 />);
             }
         } else {
@@ -143,11 +153,12 @@ export default (props) => {
                 button={_t("Sign out")}
                 extraButtons={[
                     (<button key="export" className="mx_Dialog_primary"
-                        onClick={onExportE2eKeysClicked}>
+                            onClick={this._onExportE2eKeysClicked}>
                        { _t("Export E2E room keys") }
                     </button>),
                 ]}
-            onFinished={onFinished}
+                onFinished={this._onFinished}
             />);
         }
-};
+    }
+}