@compositor/kit/dist/Fetch.js

Components for development environments, style guides, and demos

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactLive = require('react-live');

var _isomorphicFetch = require('isomorphic-fetch');

var _isomorphicFetch2 = _interopRequireDefault(_isomorphicFetch);

var _ui = require('./ui');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var FetchEditor = function FetchEditor(_ref) {
  var onDataChange = _ref.onDataChange,
      onFetchStateChange = _ref.onFetchStateChange,
      fetchState = _ref.fetchState,
      _ref$data = _ref.data,
      data = _ref$data === undefined ? {} : _ref$data;

  var fetchStates = ['loading', 'fetched', 'error'];
  var code = (0, _stringify2.default)(data, null, 2);

  return _react2.default.createElement(
    _react.Fragment,
    null,
    _react2.default.createElement(_ui.Divider, null),
    _react2.default.createElement(
      _ui.Box,
      { p: 3 },
      _react2.default.createElement(
        _ui.Label,
        null,
        'Fetch State'
      ),
      _react2.default.createElement(_ui.Select, {
        mt: 1,
        value: fetchState,
        onChange: onFetchStateChange,
        children: fetchStates.map(function (state) {
          return _react2.default.createElement('option', {
            key: state,
            value: state,
            children: state
          });
        })
      })
    ),
    _react2.default.createElement(_ui.Divider, null),
    _react2.default.createElement(_reactLive.Editor, {
      code: code,
      onChange: onDataChange,
      lang: 'jsx'
    })
  );
};

var Fetch = function (_Component) {
  (0, _inherits3.default)(Fetch, _Component);

  function Fetch() {
    var _this2 = this;

    (0, _classCallCheck3.default)(this, Fetch);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Fetch.__proto__ || (0, _getPrototypeOf2.default)(Fetch)).call(this));

    _this.fetchData = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
      var url, res, data;
      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              url = _this.props.url;
              _context.prev = 1;
              _context.next = 4;
              return (0, _isomorphicFetch2.default)(url);

            case 4:
              res = _context.sent;
              _context.next = 7;
              return res.json();

            case 7:
              data = _context.sent;


              _this.setState({
                fetchState: 'fetched',
                // this might be duplicative state?
                code: (0, _stringify2.default)(data, null, 2),
                data: data
              });
              _context.next = 14;
              break;

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

              _this.setState({
                error: _context.t0,
                fetchState: 'error'
              });

            case 14:

              _this.setState({
                loading: false,
                fetching: false,
                fetched: true
              });

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

    _this.handleDataChange = function (value) {
      if (_this.state.fetching) {
        return;
      }

      try {
        var data = JSON.parse(value);
        _this.setState({ data: data });
      } catch (e) {
        _this.setState({ code: value });
      }
    };

    _this.handleFetchStateChange = function (e) {
      if (_this.state.fetching) {
        return;
      }

      var value = e.target.value;


      _this.setState({
        fetchState: value,
        loading: value === 'loading',
        error: value === 'error'
      });
    };

    _this.render = function () {
      return _react2.default.createElement(
        _react.Fragment,
        null,
        _this.props.children(_this.state),
        _this.props.renderEditor((0, _extends3.default)({
          onDataChange: _this.handleDataChange,
          onFetchStateChange: _this.handleFetchStateChange
        }, _this.state))
      );
    };

    _this.state = {
      fetchState: 'loading',
      data: null,
      error: null,
      loading: true,
      fetching: true,
      fetched: false
    };
    return _this;
  }

  (0, _createClass3.default)(Fetch, [{
    key: 'componentDidMount',
    value: function () {
      var _ref3 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee2() {
        return _regenerator2.default.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                this.fetchData();

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

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

      return componentDidMount;
    }()
  }]);
  return Fetch;
}(_react.Component);

Fetch.defaultProps = {
  renderEditor: FetchEditor
};
exports.default = Fetch;