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,132 +22,143 @@ import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import SettingsStore from "../../../settings/SettingsStore";
 
-export default (props) => {
-    const onSettingsLinkClick = () => {
-        // close dialog
-        if (props.onFinished) {
-            props.onFinished();
-        }
-    };
-
-    let description;
-    if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
-        description = <div>
-            <p>{_t(
-                "When you log out, you'll lose your secure message history. To prevent " +
-                "this, set up a recovery method.",
-            )}</p>
-            <p>{_t(
-                "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>,
-                },
-            )}</p>
-        </div>;
-    } else {
-        description = <div>{_t(
-            "For security, logging out will delete any end-to-end " +
-            "encryption keys from this browser. If you want to be able " +
-            "to decrypt your conversation history from future Riot sessions, " +
-            "please export your room keys for safe-keeping.",
-        )}</div>;
+export default class LogoutDialog extends React.Component {
+    constructor() {
+        super();
+        this._onSettingsLinkClick = this._onSettingsLinkClick.bind(this);
+        this._onExportE2eKeysClicked = this._onExportE2eKeysClicked.bind(this);
+        this._onFinished = this._onFinished.bind(this);
+        this._onSetRecoveryMethodClick = this._onSetRecoveryMethodClick.bind(this);
+        this._onLogoutConfirm = this._onLogoutConfirm.bind(this);
     }
 
-    const onExportE2eKeysClicked = () => {
+    _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(),
             },
         );
-    };
+    }
 
-    const onFinished = (confirmed) => {
+    _onFinished(confirmed) {
         if (confirmed) {
             dis.dispatch({action: 'logout'});
         }
         // close dialog
-        if (props.onFinished) {
-            props.onFinished();
+        if (this.props.onFinished) {
+            this.props.onFinished();
         }
-    };
+    }
 
-    const onSetRecoveryMethodClick = () => {
+    _onSetRecoveryMethodClick() {
         Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
             import('../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
         );
 
         // close dialog
-        if (props.onFinished) {
-            props.onFinished();
+        if (this.props.onFinished) {
+            this.props.onFinished();
         }
-    };
+    }
 
-    const onLogoutConfirm = () => {
+    _onLogoutConfirm() {
         dis.dispatch({action: 'logout'});
 
         // close dialog
-        if (props.onFinished) {
-            props.onFinished();
+        if (this.props.onFinished) {
+            this.props.onFinished();
         }
-    };
+    }
 
-    if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
-        if (!MatrixClientPeg.get().getKeyBackupEnabled()) {
-            const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            // Not quite a standard question dialog as the primary button cancels
-            // the action and does something else instead, whilst non-default button
-            // confirms the action.
-            return (<BaseDialog
-                title={_t("Warning!")}
-                contentId='mx_Dialog_content'
-                hasCancel={false}
-                onFinsihed={onFinished}
-            >
-                <div className="mx_Dialog_content" id='mx_Dialog_content'>
-                    { description }
-                </div>
-                <DialogButtons primaryButton={_t('Set a Recovery Method')}
+    render() {
+        let description;
+        if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
+            description = <div>
+                <p>{_t(
+                    "When you log out, you'll lose your secure message history. To prevent " +
+                    "this, set up a recovery method.",
+                )}</p>
+                <p>{_t(
+                    "Alternatively, advanced users can also manually export encryption keys in " +
+                    "<a>Settings</a> before logging out.", {},
+                    {
+                        a: sub => <a href='#/settings' onClick={this._onSettingsLinkClick}>{sub}</a>,
+                    },
+                )}</p>
+            </div>;
+        } else {
+            description = <div>{_t(
+                "For security, logging out will delete any end-to-end " +
+                "encryption keys from this browser. If you want to be able " +
+                "to decrypt your conversation history from future Riot sessions, " +
+                "please export your room keys for safe-keeping.",
+            )}</div>;
+        }
+
+        if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
+            if (!MatrixClientPeg.get().getKeyBackupEnabled()) {
+                const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+                const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+                // Not quite a standard question dialog as the primary button cancels
+                // the action and does something else instead, whilst non-default button
+                // confirms the action.
+                return (<BaseDialog
+                    title={_t("Warning!")}
+                    contentId='mx_Dialog_content'
                     hasCancel={false}
-                    onPrimaryButtonClick={onSetRecoveryMethodClick}
-                    focus={true}
+                    onFinsihed={this._onFinished}
                 >
-                    <button onClick={onLogoutConfirm}>
-                        {_t("I understand, log out without")}
-                    </button>
-                </DialogButtons>
-            </BaseDialog>);
+                    <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                        { description }
+                    </div>
+                    <DialogButtons primaryButton={_t('Set a Recovery Method')}
+                        hasCancel={false}
+                        onPrimaryButtonClick={this._onSetRecoveryMethodClick}
+                        focus={true}
+                    >
+                        <button onClick={this._onLogoutConfirm}>
+                            {_t("I understand, log out without")}
+                        </button>
+                    </DialogButtons>
+                </BaseDialog>);
+            } else {
+                const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
+                return (<QuestionDialog
+                    hasCancelButton={true}
+                    title={_t("Sign out")}
+                    // TODO: This is made up by me and would need to also mention verifying
+                    // once you can restorew a backup by verifying a device
+                    description={_t(
+                        "When signing in again, you can access encrypted chat history by " +
+                        "restoring your key backup. You'll need your recovery key.",
+                    )}
+                    button={_t("Sign out")}
+                    onFinished={this._onFinished}
+                />);
+            }
         } else {
             const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
             return (<QuestionDialog
                 hasCancelButton={true}
                 title={_t("Sign out")}
-                // TODO: This is made up by me and would need to also mention verifying
-                // once you can restorew a backup by verifying a device
-                description={_t(
-                    "When signing in again, you can access encrypted chat history by " +
-                    "restoring your key backup. You'll need your recovery key.",
-                )}
+                description={description}
                 button={_t("Sign out")}
-                onFinished={onFinished}
+                extraButtons={[
+                    (<button key="export" className="mx_Dialog_primary"
+                            onClick={this._onExportE2eKeysClicked}>
+                       { _t("Export E2E room keys") }
+                    </button>),
+                ]}
+                onFinished={this._onFinished}
             />);
         }
-    } else {
-        const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
-        return (<QuestionDialog
-            hasCancelButton={true}
-            title={_t("Sign out")}
-            description={description}
-            button={_t("Sign out")}
-            extraButtons={[
-                (<button key="export" className="mx_Dialog_primary"
-                        onClick={onExportE2eKeysClicked}>
-                   { _t("Export E2E room keys") }
-                </button>),
-            ]}
-            onFinished={onFinished}
-        />);
     }
-};
+}