feeles-ide/lib/jsx/LaunchDialog.js

The hackable and serializable IDE to make learning material

import _Promise from 'babel-runtime/core-js/promise';
import _regeneratorRuntime from 'babel-runtime/regenerator';
import _asyncToGenerator from 'babel-runtime/helpers/asyncToGenerator';
import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Dialog from 'material-ui/Dialog';
import CircularProgress from 'material-ui/CircularProgress';
import RaisedButton from 'material-ui/RaisedButton';
import { brown50 } from 'material-ui/styles/colors';

import { personalDB, updateProject } from '../database/';
import { ProjectCard } from '../Menu/CloneDialog';

var LaunchDialog = function (_PureComponent) {
  _inherits(LaunchDialog, _PureComponent);

  function LaunchDialog() {
    var _ref,
        _this2 = this;

    var _temp, _this, _ret;

    _classCallCheck(this, LaunchDialog);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = LaunchDialog.__proto__ || _Object$getPrototypeOf(LaunchDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      projects: null
    }, _this.handleTitleChange = function () {
      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(project, title) {
        var localization;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                localization = _this.props.localization;
                _context.prev = 1;
                _context.next = 4;
                return updateProject(project.id, { title: title });

              case 4:
                _context.next = 6;
                return _this.refreshState();

              case 6:
                _context.next = 11;
                break;

              case 8:
                _context.prev = 8;
                _context.t0 = _context['catch'](1);

                if (typeof _context.t0 === 'string') {
                  alert(localization.cloneDialog[_context.t0]);
                }

              case 11:
              case 'end':
                return _context.stop();
            }
          }
        }, _callee, _this2, [[1, 8]]);
      }));

      return function (_x, _x2) {
        return _ref2.apply(this, arguments);
      };
    }(), _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(LaunchDialog, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      if (this.props.open) {
        this.refreshState();
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (!this.props.open && nextProps.open) {
        this.refreshState();
      }
    }
  }, {
    key: 'refreshState',
    value: function () {
      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        var _this3 = this;

        var url, projects;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                url = location.origin + location.pathname;
                _context2.next = 3;
                return personalDB.projects.filter(function (item) {
                  return item.url === url;
                }).toArray();

              case 3:
                projects = _context2.sent;

                if (projects.length) {
                  _context2.next = 9;
                  break;
                }

                this.props.fallback();
                this.props.onRequestClose();
                _context2.next = 12;
                break;

              case 9:
                projects.sort(function (a, b) {
                  return b.updated - a.updated;
                });
                _context2.next = 12;
                return new _Promise(function (resolve) {
                  _this3.setState({ projects: projects }, resolve);
                });

              case 12:
              case 'end':
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

      function refreshState() {
        return _ref3.apply(this, arguments);
      }

      return refreshState;
    }()
  }, {
    key: 'launchIDE',
    value: function () {
      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(project) {
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                _context3.prev = 0;
                _context3.next = 3;
                return this.props.launchIDE(project);

              case 3:
                this.props.onRequestClose();
                _context3.next = 9;
                break;

              case 6:
                _context3.prev = 6;
                _context3.t0 = _context3['catch'](0);

                alert(_context3.t0.message || _context3.t0);

              case 9:
              case 'end':
                return _context3.stop();
            }
          }
        }, _callee3, this, [[0, 6]]);
      }));

      function launchIDE(_x3) {
        return _ref4.apply(this, arguments);
      }

      return launchIDE;
    }()
  }, {
    key: 'renderLoading',
    value: function renderLoading() {
      return React.createElement(
        Dialog,
        { modal: true, open: this.props.open, style: { textAlign: 'center' } },
        React.createElement(CircularProgress, { size: 120 })
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      if (!this.state.projects) {
        return this.renderLoading();
      }

      var localization = this.props.localization;


      var styles = {
        container: {
          margin: 16,
          padding: 8,
          paddingBottom: 16,
          height: '20rem',
          overflow: 'scroll',
          backgroundColor: brown50,
          overflowX: 'auto',
          overflowY: 'scroll'
        },
        button: {
          marginLeft: 8
        },
        card: {
          marginTop: 16
        },
        label: {
          fontWeight: 600,
          marginRight: '1rem'
        }
      };

      return React.createElement(
        Dialog,
        {
          modal: true,
          open: this.props.open,
          title: localization.launchDialog.title
        },
        React.createElement(
          'div',
          { style: { textAlign: 'center' } },
          React.createElement(RaisedButton, {
            primary: true,
            label: localization.launchDialog.startNew,
            style: styles.button,
            onClick: this.props.fallback
          }),
          localization.common.or
        ),
        React.createElement(
          'div',
          { style: styles.container },
          this.state.projects.map(function (item) {
            return React.createElement(ProjectCard, {
              key: item.id,
              project: item,
              launchIDE: _this4.props.launchIDE,
              requestTitleChange: _this4.handleTitleChange,
              onProcessEnd: function onProcessEnd() {
                return _this4.refreshState();
              },
              localization: localization
            });
          })
        )
      );
    }
  }]);

  return LaunchDialog;
}(PureComponent);

LaunchDialog.propTypes = {
  open: PropTypes.bool.isRequired,
  localization: PropTypes.object.isRequired,
  launchIDE: PropTypes.func.isRequired,
  fallback: PropTypes.func.isRequired,
  onRequestClose: PropTypes.func.isRequired
};
LaunchDialog.defaultProps = {
  fallback: function fallback() {}
};
export default LaunchDialog;