redux-ab-test/dist/components/experiment2/loaded-component.js

A/B testing React components with Redux and debug tools. Isomorphic with a simple, universal interface. Well documented and lightweight. Tested in popular browsers and Node.js. Includes helpers for React, Redux, and Segment.io

'use strict';

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

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRedux = require('react-redux');

var _redux = require('redux');

var _reactImmutableProptypes = require('react-immutable-proptypes');

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _module = require('../../module');

var _logger = require('./logger');

var _selectors = require('./selectors');

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

var LoadedComponent = function (_React$Component) {
  (0, _inherits3['default'])(LoadedComponent, _React$Component);

  function LoadedComponent() {
    (0, _classCallCheck3['default'])(this, LoadedComponent);
    return (0, _possibleConstructorReturn3['default'])(this, (LoadedComponent.__proto__ || (0, _getPrototypeOf2['default'])(LoadedComponent)).apply(this, arguments));
  }

  (0, _createClass3['default'])(LoadedComponent, [{
    key: 'render',
    value: function () {
      function render() {
        var _props = this.props,
            experimentName = _props.experimentName,
            variationName = _props.variationName,
            children = _props.children;

        (0, _logger.logger)(__filename + ': Rendering Experiment experimentName=\'' + experimentName + '\', variationName=\'' + variationName + '\'');

        // Group the children by name
        var childrenByName = (0, _selectors.groupChildrenByName)(children);
        (0, _logger.logger)(__filename + ': Experiment experimentName=\'' + experimentName + '\', variationName=\'' + variationName + '\' has children with names=\'' + (0, _keys2['default'])(childrenByName) + '\'');

        // Find the Variation with the matching name
        var child = childrenByName[variationName] || null;
        if (!child) {
          throw new Error('variationName=' + variationName + ' not found');
        }

        // Return the Variation
        (0, _logger.logger)(__filename + ': Rendered Experiment experimentName=\'' + experimentName + '\', variationName=\'' + variationName + '\'');
        return child;
      }

      return render;
    }()

    //
    // Component Lifecycle
    //

    // Record the experiment will be mounted

  }, {
    key: 'componentWillMount',
    value: function () {
      function componentWillMount() {
        var _props2 = this.props,
            experimentName = _props2.experimentName,
            variationName = _props2.variationName,
            experiment = _props2.experiment,
            variation = _props2.variation,
            play = _props2.play;

        (0, _logger.logger)(__filename + ': componentWillMount: Experiment experimentName=\'' + experimentName + '\', variationName=\'' + variationName + '\'');
        if (play && experiment && variation) {
          play({ experiment: experiment, variation: variation });
        }
      }

      return componentWillMount;
    }()

    // Record we mounted the experiment

  }, {
    key: 'componentDidMount',
    value: function () {
      function componentDidMount() {
        var _props3 = this.props,
            experimentName = _props3.experimentName,
            variationName = _props3.variationName,
            experiment = _props3.experiment,
            activate = _props3.activate;

        (0, _logger.logger)(__filename + ': componentDidMount: Experiment experimentName=\'' + experimentName + '\', variationName=\'' + variationName + '\'');
        if (activate && experiment) {
          activate({ experiment: experiment });
        }
      }

      return componentDidMount;
    }()

    // Record we un-mounted the experiment

  }, {
    key: 'componentWillUnmount',
    value: function () {
      function componentWillUnmount() {
        var _props4 = this.props,
            experimentName = _props4.experimentName,
            variationName = _props4.variationName,
            experiment = _props4.experiment,
            deactivate = _props4.deactivate;

        (0, _logger.logger)(__filename + ': componentWillUnmount: Experiment experimentName=\'' + experimentName + '\', variationName=\'' + variationName + '\'');
        if (deactivate && experiment) {
          deactivate({ experiment: experiment });
        }
      }

      return componentWillUnmount;
    }()
  }]);
  return LoadedComponent;
}(_react2['default'].Component);

LoadedComponent.propTypes = {
  // Name of the experiment
  experimentName: _react2['default'].PropTypes.string.isRequired,
  variationName: _react2['default'].PropTypes.string.isRequired,
  // Experiment and Variation objects passed to the play / activate / deactivate action-creators:
  experiment: _reactImmutableProptypes2['default'].map,
  variation: _reactImmutableProptypes2['default'].map,
  // React element to render:
  children: _selectors.requireChildrenAreVariations,
  // Bound Action Creators
  play: _react2['default'].PropTypes.func.isRequired,
  activate: _react2['default'].PropTypes.func.isRequired,
  deactivate: _react2['default'].PropTypes.func.isRequired
};


var mapDispatchToProps = function () {
  function mapDispatchToProps(dispatch) {
    return (0, _redux.bindActionCreators)({ play: _module.play, activate: _module.activate, deactivate: _module.deactivate }, dispatch);
  }

  return mapDispatchToProps;
}();
exports['default'] = (0, _reactRedux.connect)(null, mapDispatchToProps)(LoadedComponent);
module.exports = exports['default'];