electron / fiddle / 21847699829

import * as React from 'react';

import { Button, Callout, Checkbox, FormGroup } from '@blueprintjs/core';

import { observer } from 'mobx-react';

export const GitHubSettings = observer(

  class GitHubSettings extends React.Component<GitHubSettingsProps> {

    constructor(props: GitHubSettingsProps) {

      super(props);

      this.signIn = this.signIn.bind(this);

      this.handlePublishGistAsRevisionChange =

        this.handlePublishGistAsRevisionChange.bind(this);

    }

    private static publishGistAsRevisionInstructions = `

    default fiddle gist values.`.trim();

    public renderNotSignedIn(): JSX.Element {

      return (

        <Callout>

          <p>

          </p>

          <Button onClick={this.signIn} icon="log-in" text="Sign in" />

        </Callout>

    }

    public renderSignedIn(): JSX.Element {

      const { gitHubLogin } = this.props.appState;

      const signOut = this.props.appState.signOutGitHub;

      return (

        <Callout>

          <p>

            personal access token you gave us, we logged you into GitHub as{' '}

            <code>{gitHubLogin}</code>.

          </p>

          <Button onClick={signOut} icon="log-out" text="Sign out" />

        </Callout>

    }

    public handlePublishGistAsRevisionChange(

      event: React.FormEvent<HTMLInputElement>,

    ) {

      const { checked } = event.currentTarget;

      this.props.appState.isPublishingGistAsRevision = checked;

    }

    public render() {

      const { gitHubToken } = this.props.appState;

      const { isPublishingGistAsRevision } = this.props.appState;

      const maybeSignedIn = !!gitHubToken

        ? this.renderSignedIn()

        : this.renderNotSignedIn();

      return (

        <div>

          <h4>GitHub</h4>

          {maybeSignedIn}

          <Callout>

            <FormGroup>

              <p>{GitHubSettings.publishGistAsRevisionInstructions}</p>

              <Checkbox

                checked={isPublishingGistAsRevision}

                label="Publish as revision."

                onChange={this.handlePublishGistAsRevisionChange}

              />

            </FormGroup>

          </Callout>

        </div>

    }

    private signIn() {

      this.props.appState.isTokenDialogShowing = true;

    }

  },

);