diff --git a/src/interfaces.ts b/src/interfaces.ts index 7b4ba24510..331459ddf9 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -22,6 +22,13 @@ export enum GistActionType { delete = 'Delete', } +export enum GistActionState { + publishing = 'publishing', + updating = 'updating', + deleting = 'deleting', + none = 'none', +} + export interface Version { version: string; name?: string; diff --git a/src/renderer/components/commands-action-button.tsx b/src/renderer/components/commands-action-button.tsx index 624b10b69a..d56131c029 100644 --- a/src/renderer/components/commands-action-button.tsx +++ b/src/renderer/components/commands-action-button.tsx @@ -12,7 +12,11 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { when } from 'mobx'; -import { EditorValues, GistActionType } from '../../interfaces'; +import { + EditorValues, + GistActionState, + GistActionType, +} from '../../interfaces'; import { IpcEvents } from '../../ipc-events'; import { INDEX_HTML_NAME, @@ -112,7 +116,7 @@ export class GistActionButton extends React.Component< const options = { includeDependencies: true, includeElectron: true }; const values = await window.ElectronFiddle.app.getEditorValues(options); - appState.isPublishing = true; + appState.activeGistAction = GistActionState.publishing; try { const gist = await octo.gists.create({ @@ -126,6 +130,9 @@ export class GistActionButton extends React.Component< console.log(`Publish Button: Publishing complete`, { gist }); this.renderToast({ message: 'Publishing completed successfully!' }); + + // Only set action type to update if publish completed successfully. + this.setActionType(GistActionType.update); } catch (error) { console.warn(`Could not publish gist`, { error }); @@ -138,8 +145,7 @@ export class GistActionButton extends React.Component< ipcRendererManager.send(IpcEvents.SHOW_WARNING_DIALOG, messageBoxOptions); } - appState.isPublishing = false; - this.setActionType(GistActionType.update); + appState.activeGistAction = GistActionState.none; } /** @@ -151,7 +157,7 @@ export class GistActionButton extends React.Component< const options = { includeDependencies: true, includeElectron: true }; const values = await window.ElectronFiddle.app.getEditorValues(options); - this.setState({ isUpdating: true }); + appState.activeGistAction = GistActionState.updating; try { const gist = await octo.gists.update({ @@ -173,7 +179,7 @@ export class GistActionButton extends React.Component< ipcRendererManager.send(IpcEvents.SHOW_WARNING_DIALOG, messageBoxOptions); } - this.setState({ isUpdating: false }); + appState.activeGistAction = GistActionState.none; this.setActionType(GistActionType.update); } @@ -184,7 +190,8 @@ export class GistActionButton extends React.Component< const { appState } = this.props; const octo = await getOctokit(this.props.appState); - this.setState({ isDeleting: true }); + appState.activeGistAction = GistActionState.deleting; + try { const gist = await octo.gists.delete({ gist_id: appState.gistId!, @@ -205,7 +212,7 @@ export class GistActionButton extends React.Component< } appState.gistId = undefined; - this.setState({ isDeleting: false }); + appState.activeGistAction = GistActionState.none; this.setActionType(GistActionType.publish); } @@ -253,18 +260,18 @@ export class GistActionButton extends React.Component< } public render() { - const { isPublishing, gistId } = this.props.appState; - const { isDeleting, isUpdating, actionType } = this.state; + const { gistId, activeGistAction } = this.props.appState; + const { actionType } = this.state; const getTextForButton = () => { let text; if (gistId) { text = actionType; - } else if (isUpdating) { + } else if (activeGistAction === GistActionState.updating) { text = 'Updating...'; - } else if (isPublishing) { + } else if (activeGistAction === GistActionState.publishing) { text = 'Publishing...'; - } else if (isDeleting) { + } else if (activeGistAction === GistActionState.deleting) { text = 'Deleting...'; } else { text = 'Publish'; @@ -283,7 +290,7 @@ export class GistActionButton extends React.Component< } }; - const isPerformingAction = isPublishing || isUpdating || isDeleting; + const isPerformingAction = activeGistAction !== GistActionState.none; return ( <>