atom/packages/about/lib/components/update-view.js

const etch = require('etch');
const EtchComponent = require('../etch-component');
const UpdateManager = require('../update-manager');

const $ = etch.dom;

module.exports = class UpdateView extends EtchComponent {
  constructor(props) {
    super(props);

    if (
      this.props.updateManager.getAutoUpdatesEnabled() &&
      this.props.updateManager.getState() === UpdateManager.State.Idle
    ) {
      this.props.updateManager.checkForUpdate();
    }
  }

  handleAutoUpdateCheckbox(e) {
    atom.config.set('core.automaticallyUpdate', e.target.checked);
  }

  shouldUpdateActionButtonBeDisabled() {
    let { state } = this.props.updateManager;
    return (
      state === UpdateManager.State.CheckingForUpdate ||
      state === UpdateManager.State.DownloadingUpdate
    );
  }

  executeUpdateAction() {
    if (
      this.props.updateManager.state ===
      UpdateManager.State.UpdateAvailableToInstall
    ) {
      this.props.updateManager.restartAndInstallUpdate();
    } else {
      this.props.updateManager.checkForUpdate();
    }
  }

  renderUpdateStatus() {
    let updateStatus = '';

    switch (this.props.updateManager.state) {
      case UpdateManager.State.Idle:
        updateStatus = $.div(
          {
            className:
              'about-updates-item is-shown about-default-update-message'
          },
          this.props.updateManager.getAutoUpdatesEnabled()
            ? 'Atom will check for updates automatically'
            : 'Automatic updates are disabled please check manually'
        );
        break;
      case UpdateManager.State.CheckingForUpdate:
        updateStatus = $.div(
          { className: 'about-updates-item app-checking-for-updates' },
          $.span(
            { className: 'about-updates-label icon icon-search' },
            'Checking for updates...'
          )
        );
        break;
      case UpdateManager.State.DownloadingUpdate:
        updateStatus = $.div(
          { className: 'about-updates-item app-downloading-update' },
          $.span({ className: 'loading loading-spinner-tiny inline-block' }),
          $.span({ className: 'about-updates-label' }, 'Downloading update')
        );
        break;
      case UpdateManager.State.UpdateAvailableToInstall:
        updateStatus = $.div(
          { className: 'about-updates-item app-update-available-to-install' },
          $.span(
            { className: 'about-updates-label icon icon-squirrel' },
            'New update'
          ),
          $.span(
            { className: 'about-updates-version' },
            this.props.availableVersion
          ),
          $.a(
            {
              className: 'about-updates-release-notes',
              onclick: this.props.viewUpdateReleaseNotes
            },
            'Release Notes'
          )
        );
        break;
      case UpdateManager.State.UpToDate:
        updateStatus = $.div(
          { className: 'about-updates-item app-up-to-date' },
          $.span({ className: 'icon icon-check' }),
          $.span(
            { className: 'about-updates-label is-strong' },
            'Atom is up to date!'
          )
        );
        break;
      case UpdateManager.State.Unsupported:
        updateStatus = $.div(
          { className: 'about-updates-item app-unsupported' },
          $.span(
            { className: 'about-updates-label is-strong' },
            'Your system does not support automatic updates'
          ),
          $.a(
            {
              className: 'about-updates-instructions',
              onclick: this.props.viewUpdateInstructions
            },
            'How to update'
          )
        );
        break;
      case UpdateManager.State.Error:
        updateStatus = $.div(
          { className: 'about-updates-item app-update-error' },
          $.span({ className: 'icon icon-x' }),
          $.span(
            { className: 'about-updates-label app-error-message is-strong' },
            this.props.updateManager.getErrorMessage()
          )
        );
        break;
    }

    return updateStatus;
  }

  render() {
    return $.div(
      { className: 'about-updates group-start' },
      $.div(
        { className: 'about-updates-box' },
        $.div({ className: 'about-updates-status' }, this.renderUpdateStatus()),
        $.button(
          {
            className: 'btn about-update-action-button',
            disabled: this.shouldUpdateActionButtonBeDisabled(),
            onclick: this.executeUpdateAction.bind(this),
            style: {
              display:
                this.props.updateManager.state ===
                UpdateManager.State.Unsupported
                  ? 'none'
                  : 'block'
            }
          },
          this.props.updateManager.state === 'update-available'
            ? 'Restart and install'
            : 'Check now'
        )
      ),
      $.div(
        {
          className: 'about-auto-updates',
          style: {
            display:
              this.props.updateManager.state === UpdateManager.State.Unsupported
                ? 'none'
                : 'block'
          }
        },
        $.label(
          {},
          $.input({
            className: 'input-checkbox',
            type: 'checkbox',
            checked: this.props.updateManager.getAutoUpdatesEnabled(),
            onchange: this.handleAutoUpdateCheckbox.bind(this)
          }),
          $.span({}, 'Automatically download updates')
        )
      )
    );
  }
};