react-stickerpipe/dist/components/sticker-shop.js

React Component for StickerPipe API

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _sticker = require('./sticker');

var _sticker2 = _interopRequireDefault(_sticker);

var _stickerPackPreview = require('./sticker-pack-preview');

var _stickerPackPreview2 = _interopRequireDefault(_stickerPackPreview);

var _parseResponse = require('../parse-response');

var _parseResponse2 = _interopRequireDefault(_parseResponse);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint no-console: ["error", { allow: ["error"] }] */


var StickerShop = function (_Component) {
  _inherits(StickerShop, _Component);

  function StickerShop() {
    _classCallCheck(this, StickerShop);

    var _this = _possibleConstructorReturn(this, (StickerShop.__proto__ || Object.getPrototypeOf(StickerShop)).call(this));

    _this.state = {
      preview: null,
      stickerPacks: []
    };

    _this.previewPack = _this.previewPack.bind(_this);
    _this.onPurchase = _this.onPurchase.bind(_this);
    _this.closePreview = _this.closePreview.bind(_this);
    return _this;
  }

  _createClass(StickerShop, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _this2 = this;

      var client = this.context.client;


      client.getShop(function (err, res) {
        if (err) {
          console.error(err);

          return false;
        }

        var stickerPacks = (0, _parseResponse2.default)(res);

        var filteredPacks = stickerPacks.filter(function (stickerPack) {
          return stickerPack.user_status === 'none';
        });

        _this2.setState({
          stickerPacks: filteredPacks
        });

        return false;
      });
    }
  }, {
    key: 'onPurchase',
    value: function onPurchase() {
      var getMyPacks = this.props.getMyPacks;


      getMyPacks();
      this.setState({
        preview: null
      });
    }
  }, {
    key: 'previewPack',
    value: function previewPack(packName) {
      var _this3 = this;

      var client = this.context.client;


      client.getPackPreview(packName, function (err, res) {
        if (err) {
          console.error(err);

          return false;
        }

        var preview = (0, _parseResponse2.default)(res);

        _this3.setState({
          preview: preview
        });

        return false;
      });
    }
  }, {
    key: 'closePreview',
    value: function closePreview() {
      this.setState({
        preview: null
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _state = this.state,
          preview = _state.preview,
          stickerPacks = _state.stickerPacks;
      var colors = this.props.colors;


      return _react2.default.createElement(
        'section',
        { className: 'sticker-shop' },
        _react2.default.createElement(
          'h1',
          null,
          'Sticker Shop'
        ),
        _react2.default.createElement(
          'section',
          { className: 'stickers' },
          stickerPacks.length > 0 ? stickerPacks.map(function (stickerPack) {
            return _react2.default.createElement(_sticker2.default, {
              key: 'sticker-shop-' + stickerPack.pack_name,
              onClick: function onClick() {
                return _this4.previewPack(stickerPack.pack_name);
              },
              src: stickerPack.main_icon.mdpi
            });
          }) : null
        ),
        preview ? _react2.default.createElement(_stickerPackPreview2.default, {
          preview: preview,
          onPurchase: this.onPurchase,
          closePreview: this.closePreview,
          colors: colors
        }) : null
      );
    }
  }]);

  return StickerShop;
}(_react.Component);

StickerShop.propTypes = {
  getMyPacks: _propTypes2.default.func.isRequired,
  colors: _propTypes2.default.shape({
    primary: _propTypes2.default.string.isRequired,
    secondary: _propTypes2.default.string.isRequired
  }).isRequired
};
StickerShop.contextTypes = {
  client: _propTypes2.default.shape({
    getMyPacks: _propTypes2.default.func.isRequired,
    purchasePack: _propTypes2.default.func.isRequired
  }).isRequired
};
exports.default = StickerShop;
module.exports = exports['default'];