refactor: use bind-decorator to bind methods to this

package.json

@@ -43,6 +43,7 @@
     "@octokit/rest": "^16.43.1",
     "@sentry/electron": "^2.5.3",
     "@types/getos": "^3.0.1",
+    "bind-decorator": "^1.0.11",
     "classnames": "^2.2.6",
     "commander": "^7.1.0",
     "electron-default-menu": "^1.0.2",

src/renderer/app.tsx

@@ -1,5 +1,6 @@
 import { autorun, reaction, when } from 'mobx';
 import * as path from 'path';
+import bind from 'bind-decorator';
 
 import { ipcRenderer } from 'electron';
 import { ipcRendererManager } from './ipc';
@@ -32,8 +33,6 @@ export class App {
   public readonly electronTypes: ElectronTypes;
 
   constructor() {
-    this.getEditorValues = this.getEditorValues.bind(this);
-
     this.taskRunner = new TaskRunner(this);
 
     this.electronTypes = new ElectronTypes(
@@ -84,7 +83,7 @@ export class App {
    *
    * @returns {EditorValues}
    */
-  public async getEditorValues(
+  @bind public async getEditorValues(
     options?: PackageJsonOptions,
   ): Promise<EditorValues> {
     const values = this.state.editorMosaic.values();
@@ -189,7 +188,7 @@ export class App {
    *
    * @param {SetFiddleOptions} fiddle The fiddle to open
    */
-  public async openFiddle(fiddle: SetFiddleOptions) {
+  @bind public async openFiddle(fiddle: SetFiddleOptions) {
     const { filePath, gistId } = fiddle;
     if (filePath) {
       await this.fileManager.openFiddle(filePath);

src/renderer/bisect.ts

@@ -1,4 +1,5 @@
 import { RunnableVersion } from '../interfaces';
+import bind from 'bind-decorator';
 
 export class Bisector {
   public revList: Array<RunnableVersion>;
@@ -7,21 +8,17 @@ export class Bisector {
   private pivot: number;
 
   constructor(revList: Array<RunnableVersion>) {
-    this.getCurrentVersion = this.getCurrentVersion.bind(this);
-    this.continue = this.continue.bind(this);
-    this.calculatePivot = this.calculatePivot.bind(this);
-
     this.revList = revList;
     this.minRev = 0;
     this.maxRev = revList.length - 1;
     this.calculatePivot();
   }
 
-  public getCurrentVersion() {
+  @bind public getCurrentVersion() {
     return this.revList[this.pivot];
   }
 
-  public continue(isGoodVersion: boolean) {
+  @bind public continue(isGoodVersion: boolean) {
     let isBisectOver = false;
     if (this.maxRev - this.minRev <= 1) {
       isBisectOver = true;
@@ -53,7 +50,7 @@ export class Bisector {
     }
   }
 
-  private calculatePivot() {
+  @bind private calculatePivot() {
     this.pivot = Math.floor((this.maxRev - this.minRev) / 2);
   }
 }

src/renderer/components/commands-action-button.tsx

@@ -12,6 +12,8 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { clipboard } from 'electron';
 import { when } from 'mobx';
+import bind from 'bind-decorator';
+
 import {
   EditorValues,
   GistActionState,
@@ -47,10 +49,6 @@ export class GistActionButton extends React.Component<
 > {
   public constructor(props: GistActionButtonProps) {
     super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.performGistAction = this.performGistAction.bind(this);
-    this.setPrivate = this.setPrivate.bind(this);
-    this.setPublic = this.setPublic.bind(this);
 
     this.state = {
       isUpdating: false,
@@ -85,7 +83,7 @@ export class GistActionButton extends React.Component<
    * @returns {Promise<void>}
    * @memberof GistActionButton
    */
-  public async handleClick(): Promise<void> {
+  @bind public async handleClick(): Promise<void> {
     const { appState } = this.props;
 
     if (!appState.gitHubToken) {
@@ -262,7 +260,7 @@ export class GistActionButton extends React.Component<
    * Connect with GitHub, perform a publish/update/delete action,
    * and update all related properties in the app state.
    */
-  public async performGistAction(): Promise<void> {
+  @bind public async performGistAction(): Promise<void> {
     const { gistId } = this.props.appState;
 
     const actionType = gistId ? this.state.actionType : GistActionType.publish;
@@ -284,7 +282,7 @@ export class GistActionButton extends React.Component<
    *
    * @memberof GistActionButton
    */
-  public setPrivate() {
+  @bind public setPrivate() {
     this.setPrivacy(false);
   }
 
@@ -293,7 +291,7 @@ export class GistActionButton extends React.Component<
    *
    * @memberof GistActionButton
    */
-  public setPublic() {
+  @bind public setPublic() {
     this.setPrivacy(true);
   }
 

src/renderer/components/commands-address-bar.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import bind from 'bind-decorator';
 
 import { IpcEvents } from '../../ipc-events';
 import { GistActionState } from '../../interfaces';
@@ -29,10 +30,6 @@ export class AddressBar extends React.Component<
 > {
   constructor(props: AddressBarProps) {
     super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.submit = this.submit.bind(this);
 
     const { gistId } = this.props.appState;
     const value = urlFromId(gistId);
@@ -42,8 +39,8 @@ export class AddressBar extends React.Component<
     this.state = {
       value,
       loaders: {
-        gist: remoteLoader.loadFiddleFromGist.bind(remoteLoader),
-        example: remoteLoader.loadFiddleFromElectronExample.bind(remoteLoader),
+        gist: remoteLoader.loadFiddleFromGist,
+        example: remoteLoader.loadFiddleFromElectronExample,
       },
     };
   }
@@ -54,7 +51,7 @@ export class AddressBar extends React.Component<
    *
    * @param {React.SyntheticEvent<HTMLFormElement>} event
    */
-  public handleSubmit(event: React.SyntheticEvent<HTMLFormElement>) {
+  @bind public handleSubmit(event: React.SyntheticEvent<HTMLFormElement>) {
     event.preventDefault();
     this.submit();
   }
@@ -64,7 +61,7 @@ export class AddressBar extends React.Component<
    *
    * @memberof AddressBar
    */
-  public submit() {
+  @bind public submit() {
     const { remoteLoader } = window.ElectronFiddle.app;
     if (this.state.value) {
       remoteLoader.fetchGistAndLoad(
@@ -107,11 +104,11 @@ export class AddressBar extends React.Component<
    *
    * @param {React.ChangeEvent<HTMLInputElement>} event
    */
-  public handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+  @bind public handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     this.setState({ value: event.target.value });
   }
 
-  public handleBlur(event: React.FocusEvent<HTMLInputElement>) {
+  @bind public handleBlur(event: React.FocusEvent<HTMLInputElement>) {
     const { gistId } = this.props.appState;
     const url = urlFromId(gistId);
 

src/renderer/components/commands-bisect.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import bind from 'bind-decorator';
 
 import { VersionState } from '../../../src/interfaces';
 import { AppState } from '../state';
@@ -11,14 +12,7 @@ interface BisectHandlerProps {
 
 @observer
 export class BisectHandler extends React.Component<BisectHandlerProps> {
-  constructor(props: BisectHandlerProps) {
-    super(props);
-
-    this.continueBisect = this.continueBisect.bind(this);
-    this.terminateBisect = this.terminateBisect.bind(this);
-  }
-
-  public continueBisect(isGood: boolean) {
+  @bind public continueBisect(isGood: boolean) {
     window.ElectronFiddle.app.runner.stop();
 
     const { appState } = this.props;
@@ -50,7 +44,7 @@ export class BisectHandler extends React.Component<BisectHandlerProps> {
     }
   }
 
-  public terminateBisect() {
+  @bind public terminateBisect() {
     const { appState } = this.props;
     appState.Bisector = undefined;
   }

src/renderer/components/dialog-add-theme.tsx

@@ -5,8 +5,9 @@ import { observer } from 'mobx-react';
 import * as MonacoType from 'monaco-editor';
 import * as path from 'path';
 import * as React from 'react';
-import { getTheme, THEMES_PATH } from '../themes';
+import bind from 'bind-decorator';
 
+import { getTheme, THEMES_PATH } from '../themes';
 import { AppState } from '../state';
 import { defaultDark, LoadedFiddleTheme } from '../themes-defaults';
 
@@ -34,19 +35,14 @@ export class AddThemeDialog extends React.Component<
   constructor(props: AddThemeDialogProps) {
     super(props);
     this.state = this.resetState;
-
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onClose = this.onClose.bind(this);
-    this.onChangeFile = this.onChangeFile.bind(this);
-    this.reset = this.reset.bind(this);
   }
 
   /**
    * Handles a change of the file input.
    *
    * @param {React.ChangeEvent<HTMLInputElement>} event
    */
-  public async onChangeFile(event: React.FormEvent<HTMLInputElement>) {
+  @bind public async onChangeFile(event: React.FormEvent<HTMLInputElement>) {
     const { files } = event.target as any;
     const file = files?.[0];
 
@@ -58,7 +54,7 @@ export class AddThemeDialog extends React.Component<
    *
    * @returns {Promise<void>}
    */
-  public async onSubmit(): Promise<void> {
+  @bind public async onSubmit(): Promise<void> {
     const { file } = this.state;
     const { appState } = this.props;
 
@@ -123,7 +119,7 @@ export class AddThemeDialog extends React.Component<
     ];
   }
 
-  public onClose() {
+  @bind public onClose() {
     this.props.appState.isThemeDialogShowing = false;
     this.reset();
   }
@@ -159,7 +155,7 @@ export class AddThemeDialog extends React.Component<
   /**
    * Reset this component's state
    */
-  private reset(): void {
+  @bind private reset(): void {
     this.setState(this.resetState);
     return;
   }

src/renderer/components/dialog-add-version.tsx

@@ -10,6 +10,7 @@ import { observer } from 'mobx-react';
 import * as path from 'path';
 import * as React from 'react';
 import * as semver from 'semver';
+import bind from 'bind-decorator';
 
 import { Version } from '../../interfaces';
 import { IpcEvents } from '../../ipc-events';
@@ -76,10 +77,6 @@ export class AddVersionDialog extends React.Component<
       version: '',
     };
 
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onClose = this.onClose.bind(this);
-    this.onChangeVersion = this.onChangeVersion.bind(this);
-
     ipcRendererManager.on(
       IpcEvents.LOAD_LOCAL_VERSION_FOLDER,
       (_event, [file]) => {
@@ -104,7 +101,7 @@ export class AddVersionDialog extends React.Component<
     this.setState({ existingLocalVersion, folderPath, isValidElectron });
   }
 
-  public onChangeVersion(event: React.ChangeEvent<HTMLInputElement>) {
+  @bind public onChangeVersion(event: React.ChangeEvent<HTMLInputElement>) {
     const version = event.target.value || '';
     const isValidVersion = !!semver.valid(version);
 
@@ -119,7 +116,7 @@ export class AddVersionDialog extends React.Component<
    *
    * @returns {Promise<void>}
    */
-  public async onSubmit(): Promise<void> {
+  @bind public async onSubmit(): Promise<void> {
     const {
       folderPath,
       version,
@@ -148,7 +145,7 @@ export class AddVersionDialog extends React.Component<
   /**
    * Closes the dialog
    */
-  public onClose() {
+  @bind public onClose() {
     this.props.appState.isAddVersionDialogShowing = false;
     this.reset();
   }