react-url-query/lib/redux/urlAction.js

A library for managing state through query parameters in the URL in React. Works well with or without Redux and React Router.

'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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

exports.default = urlAction;
exports.urlUpdateAction = urlUpdateAction;
exports.urlReplaceAction = urlReplaceAction;
exports.urlPushAction = urlPushAction;
exports.urlMultiReplaceInAction = urlMultiReplaceInAction;
exports.urlMultiPushInAction = urlMultiPushInAction;
exports.urlUpdateInAction = urlUpdateInAction;
exports.urlReplaceInAction = urlReplaceInAction;
exports.urlPushInAction = urlPushInAction;

var _serialize = require('../serialize');

var _UrlUpdateTypes = require('../UrlUpdateTypes');

var _UrlUpdateTypes2 = _interopRequireDefault(_UrlUpdateTypes);

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

function urlAction(actionType) {
  var payload = arguments.length <= 1 || arguments[1] === undefined ? function (d) {
    return d;
  } : arguments[1];
  var meta = arguments.length <= 2 || arguments[2] === undefined ? function () {} : arguments[2];

  return function urlActionCreator() {
    var metaFromAction = meta.apply(undefined, arguments);
    if (metaFromAction == null) {
      metaFromAction = {};

      // we need meta to be an object so it merges in with the urlQuery meta property.
    } else if ((typeof metaFromAction === 'undefined' ? 'undefined' : _typeof(metaFromAction)) !== 'object') {
      metaFromAction = { value: metaFromAction };
    }

    return {
      type: actionType,
      meta: _extends({}, metaFromAction, {
        // we need urlQuery set so the middleware knows to read this action
        urlQuery: true
      }),
      payload: payload.apply(undefined, arguments)
    };
  };
}

/**
 * Helper function for creating URL action creators
 *
 * For example in your actions.js file:
 *
 * export const changeFoo = urlUpdateAction(
 *   'CHANGE_MANY',
 *   (newQuery) => ({
 *     fooInUrl: encode(UrlQueryParamTypes.number, newQuery.foo),
 *     bar: 'par',
 *     arr: encode(UrlQueryParamTypes.array, ['T', 'Y']),
 *   }),
 *   'replace');
 *
 * The second parameter should be an encoder function that takes a decodedQuery
 * and returns an encodedQuery,
 * encoding each value in the decodedQuery object.
 * You need this because when using Redux Actions,
 * urlPropsQueryConfig is only used for decoding;
 * you have to implement the encoding here.
 * Also see changeMany [in the examples](https://github.com/pbeshai/react-url-query/tree/master/examples/redux-with-actions/src/state/actions.js).
 */
function urlUpdateAction(actionType) {
  var encodeQuery = arguments.length <= 1 || arguments[1] === undefined ? function (d) {
    return d;
  } : arguments[1];
  var updateType = arguments.length <= 2 || arguments[2] === undefined ? _UrlUpdateTypes2.default.replace : arguments[2];

  return urlAction(actionType, function (decodedQuery) {
    return {
      encodedQuery: encodeQuery(decodedQuery),
      decodedQuery: decodedQuery
    };
  }, function () {
    return { updateType: updateType };
  });
}

function urlReplaceAction(actionType, encodeQuery) {
  return urlUpdateAction(actionType, encodeQuery, _UrlUpdateTypes2.default.replace);
}

function urlPushAction(actionType, encodeQuery) {
  return urlUpdateAction(actionType, encodeQuery, _UrlUpdateTypes2.default.push);
}

function urlMultiReplaceInAction(actionType, encodeQuery) {
  return urlUpdateAction(actionType, encodeQuery, _UrlUpdateTypes2.default.multiReplaceIn);
}

function urlMultiPushInAction(actionType, encodeQuery) {
  return urlUpdateAction(actionType, encodeQuery, _UrlUpdateTypes2.default.multiPushIn);
}

/**
 * Helper function for creating URL action creators
 *
 * For example in your actions.js file:
 * export const changeFoo = urlUpdateInAction('CHANGE_FOO', 'foo', 'number', 'replaceIn');
 *
 */
function urlUpdateInAction(actionType, queryParam, valueType, updateType) {
  return urlAction(actionType, function (decodedValue) {
    return {
      queryParam: queryParam,
      encodedValue: (0, _serialize.encode)(valueType, decodedValue),
      decodedValue: decodedValue,
      type: valueType
    };
  }, function () {
    return { updateType: updateType };
  });
}

function urlReplaceInAction(actionType, queryParam, valueType) {
  return urlUpdateInAction(actionType, queryParam, valueType, _UrlUpdateTypes2.default.replaceIn);
}

function urlPushInAction(actionType, queryParam, valueType) {
  return urlUpdateInAction(actionType, queryParam, valueType, _UrlUpdateTypes2.default.pushIn);
}