Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: use bind-decorator to bind methods to this #1057

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"@octokit/rest": "^16.43.1",
"@sentry/electron": "^2.5.3",
"@types/getos": "^3.0.1",
"bind-decorator": "^1.0.11",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of adding a new dependency can you make a custom Autobind decorator. Learn about them here

"classnames": "^2.2.6",
"commander": "^7.1.0",
"electron-default-menu": "^1.0.2",
Expand Down
7 changes: 3 additions & 4 deletions src/renderer/app.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down
12 changes: 5 additions & 7 deletions src/renderer/bisect.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import bind from 'bind-decorator';

import { RunnableVersion } from '../interfaces';

export class Bisector {
Expand All @@ -7,21 +9,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;
Expand Down Expand Up @@ -53,7 +51,7 @@ export class Bisector {
}
}

private calculatePivot() {
@bind private calculatePivot() {
this.pivot = Math.floor((this.maxRev - this.minRev) / 2);
}
}
14 changes: 6 additions & 8 deletions src/renderer/components/commands-action-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand All @@ -284,7 +282,7 @@ export class GistActionButton extends React.Component<
*
* @memberof GistActionButton
*/
public setPrivate() {
@bind public setPrivate() {
this.setPrivacy(false);
}

Expand All @@ -293,7 +291,7 @@ export class GistActionButton extends React.Component<
*
* @memberof GistActionButton
*/
public setPublic() {
@bind public setPublic() {
this.setPrivacy(true);
}

Expand Down
17 changes: 7 additions & 10 deletions src/renderer/components/commands-address-bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
Expand All @@ -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,
},
};
}
Expand All @@ -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();
}
Expand All @@ -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(
Expand Down Expand Up @@ -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);

Expand Down
12 changes: 3 additions & 9 deletions src/renderer/components/commands-bisect.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -50,7 +44,7 @@ export class BisectHandler extends React.Component<BisectHandlerProps> {
}
}

public terminateBisect() {
@bind public terminateBisect() {
const { appState } = this.props;
appState.Bisector = undefined;
}
Expand Down
16 changes: 6 additions & 10 deletions src/renderer/components/dialog-add-theme.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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];

Expand All @@ -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;

Expand Down Expand Up @@ -123,7 +119,7 @@ export class AddThemeDialog extends React.Component<
];
}

public onClose() {
@bind public onClose() {
this.props.appState.isThemeDialogShowing = false;
this.reset();
}
Expand Down Expand Up @@ -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;
}
Expand Down
11 changes: 4 additions & 7 deletions src/renderer/components/dialog-add-version.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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]) => {
Expand All @@ -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);

Expand All @@ -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,
Expand Down Expand Up @@ -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();
}
Expand Down
Loading