@paprika/seducer/lib/useSeducerWithContext.js

Seducer (simple reducer) is a wrapper on top of React.useReducer, making it easier to use

"use strict";

var _Object$keys = require("@babel/runtime-corejs2/core-js/object/keys");

var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs2/core-js/object/get-own-property-symbols");

var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs2/core-js/object/get-own-property-descriptor");

var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs2/core-js/object/get-own-property-descriptors");

var _Object$defineProperties = require("@babel/runtime-corejs2/core-js/object/define-properties");

var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.Provider = Provider;
exports.useSeducerWithContext = exports.contextDispatch = exports.contextState = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/slicedToArray"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reducer = _interopRequireDefault(require("./reducer"));

var _getTypes = _interopRequireDefault(require("./getTypes"));

function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

var contextState = /*#__PURE__*/_react["default"].createContext(null);

exports.contextState = contextState;

var contextDispatch = /*#__PURE__*/_react["default"].createContext(null);

exports.contextDispatch = contextDispatch;

var useSeducerWithContext = function useSeducerWithContext() {
  var _useDispatch = useDispatch(),
      _useDispatch2 = (0, _slicedToArray2["default"])(_useDispatch, 2),
      dispatch = _useDispatch2[0],
      types = _useDispatch2[1];

  return [useState(), dispatch, types];
};

exports.useSeducerWithContext = useSeducerWithContext;
var propTypes = {
  actions: _propTypes["default"].shape({}),
  children: _propTypes["default"].node.isRequired,
  displayName: _propTypes["default"].string,
  hasLogger: _propTypes["default"].bool,
  initialState: _propTypes["default"].shape({}),
  initializer: _propTypes["default"].func,
  interceptors: _propTypes["default"].shape({})
};
var defaultProps = {
  actions: {},
  displayName: null,
  hasLogger: false,
  initialState: {},
  initializer: undefined,
  interceptors: {}
};

function Provider(_ref) {
  var actions = _ref.actions,
      children = _ref.children,
      _ref$displayName = _ref.displayName,
      displayName = _ref$displayName === void 0 ? null : _ref$displayName,
      _ref$hasLogger = _ref.hasLogger,
      hasLogger = _ref$hasLogger === void 0 ? false : _ref$hasLogger,
      _ref$initialState = _ref.initialState,
      initialState = _ref$initialState === void 0 ? {} : _ref$initialState,
      _ref$initializer = _ref.initializer,
      initializer = _ref$initializer === void 0 ? undefined : _ref$initializer,
      _ref$interceptors = _ref.interceptors,
      interceptors = _ref$interceptors === void 0 ? {} : _ref$interceptors;

  if (!actions) {
    throw new Error("Actions are required for useSeducerWithContext, is an object with their actions as their properties");
  }

  if (typeof initializer !== "undefined" && typeof initializer !== "function") throw new Error("the initializer prop must be a function");

  var reducerMemo = _react["default"].useMemo(function () {
    return (0, _reducer["default"])(actions, hasLogger, interceptors);
  }, [actions, hasLogger, interceptors]);

  var _React$useReducer = _react["default"].useReducer(reducerMemo, initialState, initializer),
      _React$useReducer2 = (0, _slicedToArray2["default"])(_React$useReducer, 2),
      state = _React$useReducer2[0],
      dispatch = _React$useReducer2[1];

  var types = _react["default"].useMemo(function () {
    return (0, _getTypes["default"])(_objectSpread(_objectSpread({}, interceptors), actions));
  }, [actions, interceptors]);

  setContextDisplayName(contextState, displayName);
  /**
   * This is a helper that allowed to change the regular dispatch signature which is
   * dispatch({ type: "action", payload: value })
   * to
   * dispatch(types.type, value) which IMO is more versatile, shorter and pleasant to look at it.
   */

  var memoCustomDispatch = _react["default"].useCallback(function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    var type = args[0],
        payload = args[1];
    dispatch({
      type: type,
      payload: payload
    });
  }, []);

  return /*#__PURE__*/_react["default"].createElement(contextState.Provider, {
    value: state
  }, /*#__PURE__*/_react["default"].createElement(contextDispatch.Provider, {
    value: [memoCustomDispatch, types]
  }, children));
}

var useState = function useState() {
  var state = _react["default"].useContext(contextState);

  if (state === undefined) {
    throw new Error("useState must be used with a Provider \n\nNormally this means that your component its not wrapped by a provider.\nEither move your component inside the <Provider /> component or \nimported it: import { Provider } and wrap your component within it. \n    ");
  }

  return state;
};

var useDispatch = function useDispatch() {
  var _React$useContext = _react["default"].useContext(contextDispatch),
      _React$useContext2 = (0, _slicedToArray2["default"])(_React$useContext, 2),
      dispatch = _React$useContext2[0],
      types = _React$useContext2[1];

  if (dispatch === undefined || types === undefined) {
    throw new Error("useDispatch must be used with a Provider \n\nNormally this means that your component its not wrapped by a provider.\nEither move your component inside the <Provider /> component or \nimported it: import { Provider } and wrap your component within it.\n    ");
  }

  return [dispatch, types];
};

function setContextDisplayName(contextState, displayName) {
  contextState.displayName = displayName ? "".concat(displayName, "State") : "ContextSimpleReducerState";
  contextDispatch.displayName = displayName ? "".concat(displayName, "Dispatch") : "ContextSimpleReducerDispatch";
}

Provider.propTypes = propTypes;
Provider.defaultProps = defaultProps;
//# sourceMappingURL=useSeducerWithContext.js.map