redux-devtools-bubbles-monitor/lib/index.js

Toastr notifications of redux actions

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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; }; })();

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 _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; }

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _toastr = require('toastr');

var _toastr2 = _interopRequireDefault(_toastr);

var _fluxStandardAction = require('flux-standard-action');

_toastr2['default'].options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": true,
  "progressBar": false,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "4000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};

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

  function BubbleMonitor(props) {
    var _this = this;

    _classCallCheck(this, BubbleMonitor);

    _Component.call(this, props);

    this.handleKeypress = function (e) {
      var keys = {
        h: 8
      };
      if (e.ctrlKey && e.which === keys.h) {
        _this.toggleNotifications();
      }
    };

    this.toggleNotifications = function () {
      var notificationState = _this.state.notificationState;

      if (notificationState) {
        _toastr2['default'].info('Redux action notifications have been disabled, press ctrl-h to enable.');
        _this.setState({ notificationState: false });
      } else {
        _toastr2['default'].success('Redux action notifications have been enabled, press ctrl-h to disable. This last action dispatched will be displayed.');
        _this.setState({ notificationState: true });
      }
    };

    this.state = {
      notificationState: this.props.visibleOnLoad
    };
  }

  // ({ index })

  BubbleMonitor.prototype.getNotificationTypeForAction = function getNotificationTypeForAction(action) {
    if (action.error) {
      return _toastr2['default'].error;
    } else if (action.type.startsWith('@@')) {
      return _toastr2['default'].info;
    } else {
      return _toastr2['default'].success;
    }
  };

  BubbleMonitor.prototype.getNotificationBodyForAction = function getNotificationBodyForAction(action) {
    var payload = _extends({}, action);
    var keys = Object.keys(payload).filter(function (key) {
      return key !== 'type' && key !== 'error';
    });
    var items = keys.map(function (key) {
      var item = payload[key];
      if (item instanceof Error) {
        return key + ': ' + item;
      } else if (item !== null && typeof item === 'object') {
        return key + ' (object keys): ' + Object.keys(item).join(', ');
      } else {
        return key + ': ' + item;
      }
    });
    return items.join('<br/>');
  };

  BubbleMonitor.prototype.componentDidMount = function componentDidMount() {
    if (this.state.notificationState) {
      _toastr2['default'].success('Redux action notifications have been enabled by default, press ctrl-h to disable.');
    } else {
      _toastr2['default'].info('Redux action notifications have been disabled by default, press ctrl-h to enable.');
    }
    window.addEventListener('keypress', this.handleKeypress, false);
  };

  BubbleMonitor.prototype.componentWillMount = function componentWillMount() {
    window.removeEventListener('keypress', this.handleKeypress, false);
  };

  BubbleMonitor.prototype.render = function render() {
    if (!this.state.notificationState) {
      return null;
    }
    var stagedActions = this.props.stagedActions;

    var action = stagedActions[stagedActions.length - 1];
    var bubble = this.getNotificationTypeForAction(action);
    var body = this.getNotificationBodyForAction(action);
    bubble(body, action.type);

    if (!_fluxStandardAction.isFSA(action)) {
      _toastr2['default'].warning(action.type + ' is not a flux standard action.');
    }
    return null;
  };

  _createClass(BubbleMonitor, null, [{
    key: 'propTypes',
    value: {
      // Stuff you can use
      computedStates: _react.PropTypes.array.isRequired,
      currentStateIndex: _react.PropTypes.number.isRequired,
      stagedActions: _react.PropTypes.array.isRequired,
      skippedActions: _react.PropTypes.object.isRequired,

      // Stuff you can do
      reset: _react.PropTypes.func.isRequired,
      commit: _react.PropTypes.func.isRequired,
      rollback: _react.PropTypes.func.isRequired,
      sweep: _react.PropTypes.func.isRequired,
      toggleAction: _react.PropTypes.func.isRequired, // ({ index })
      jumpToState: _react.PropTypes.func.isRequired },
    enumerable: true
  }]);

  return BubbleMonitor;
})(_react.Component);

exports['default'] = BubbleMonitor;
module.exports = exports['default'];