@digigov/ui 0.12.2 → 0.13.0

package/api/useResource.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResource = useResource;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _utils = require("@digigov/ui/api/utils");
+
+var _reactQuery = require("react-query");
+
+var _api = require("@digigov/ui/api");
+
+var _react = require("react");
+
+function useResource(resource, id, query, options, suspense) {
+  var _useAPI = (0, _api.useAPI)(),
+      baseURL = _useAPI.config.baseURL,
+      token = _useAPI.token;
+
+  var _useState = (0, _react.useState)({
+    url: '',
+    dataSet: false
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      _useState2$ = _useState2[0],
+      url = _useState2$.url,
+      dataSet = _useState2$.dataSet,
+      setFetchOpts = _useState2[1];
+
+  function customFetcher(_x, _x2) {
+    return _customFetcher.apply(this, arguments);
+  }
+
+  function _customFetcher() {
+    _customFetcher = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fetchUrl, options) {
+      var response, _yield$processRespons, _data, _error;
+
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setFetchOpts({
+                url: fetchUrl,
+                dataSet: false
+              });
+              _context.next = 3;
+              return fetch(fetchUrl, options);
+
+            case 3:
+              response = _context.sent;
+              _context.prev = 4;
+              _context.next = 7;
+              return (0, _utils.processResponse)(response);
+
+            case 7:
+              _yield$processRespons = _context.sent;
+              _data = _yield$processRespons.data;
+              _error = _yield$processRespons.error;
+
+              if (!_error) {
+                _context.next = 12;
+                break;
+              }
+
+              return _context.abrupt("return", Promise.reject(_error));
+
+            case 12:
+              if (!_data) {
+                _context.next = 14;
+                break;
+              }
+
+              return _context.abrupt("return", Promise.resolve(_data));
+
+            case 14:
+              _context.next = 19;
+              break;
+
+            case 16:
+              _context.prev = 16;
+              _context.t0 = _context["catch"](4);
+              return _context.abrupt("return", Promise.reject(_context.t0.error));
+
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[4, 16]]);
+    }));
+    return _customFetcher.apply(this, arguments);
+  }
+
+  var queryKey = (0, _utils.getQueryKey)(resource, id, query, null, options, 'GET', baseURL, token);
+  var enabled = true;
+  var resolvedQueryKey;
+
+  if (typeof queryKey === 'function') {
+    try {
+      resolvedQueryKey = queryKey();
+    } catch (err) {
+      enabled = false;
+    }
+  }
+
+  var _useQuery = (0, _reactQuery.useQuery)(resolvedQueryKey || queryKey, customFetcher, {
+    enabled: enabled,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    suspense: suspense || false,
+    cacheTime: 300000,
+    staleTime: 20000,
+    retry: false,
+    useErrorBoundary: false // falls back to suspense
+
+  }),
+      status = _useQuery.status,
+      data = _useQuery.data,
+      error = _useQuery.error,
+      isFetching = _useQuery.isFetching,
+      refetch = _useQuery.refetch;
+
+  return {
+    data: data,
+    loading: isFetching,
+    loaded: ['error', 'success'].includes(status),
+    error: error,
+    invalidate: function invalidate() {
+      _reactQuery.queryCache.invalidateQueries(resolvedQueryKey || queryKey);
+    },
+    fetch: refetch,
+    dataSet: dataSet,
+    url: url
+  };
+}

package/api/useResourceAction.d.ts

@@ -0,0 +1,2 @@
+import { RequestResponse } from '@digigov/ui/api/useResource';
+export declare function useResourceAction(resource: string, id?: (string | null | undefined) | number | ((...args: any) => void), method?: string, data?: Record<string, any> | null | ((...args: any) => void), query?: Record<string, any> | null | ((...args: any) => void), options?: RequestInit | null): RequestResponse;

package/api/useResourceAction.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResourceAction = useResourceAction;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _utils = require("@digigov/ui/api/utils");
+
+var _reactQuery = require("react-query");
+
+var _api = require("@digigov/ui/api");
+
+function useResourceAction(resource, id) {
+  var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'POST';
+  var data = arguments.length > 3 ? arguments[3] : undefined;
+  var query = arguments.length > 4 ? arguments[4] : undefined;
+  var options = arguments.length > 5 ? arguments[5] : undefined;
+
+  var _useAPI = (0, _api.useAPI)(),
+      baseURL = _useAPI.config.baseURL,
+      token = _useAPI.token;
+
+  var _useState = (0, _react.useState)({
+    url: '',
+    dataSet: false
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      _useState2$ = _useState2[0],
+      url = _useState2$.url,
+      dataSet = _useState2$.dataSet,
+      setFetchOpts = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      consume = _useState4[0],
+      setConsume = _useState4[1];
+
+  function customFetcher() {
+    return _customFetcher.apply(this, arguments);
+  }
+
+  function _customFetcher() {
+    _customFetcher = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var _ref,
+          _ref2,
+          fetchUrl,
+          options,
+          response,
+          _yield$processRespons,
+          _data2,
+          _args = arguments;
+
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _ref = _args.length <= 0 ? undefined : _args[0], _ref2 = (0, _slicedToArray2["default"])(_ref, 2), fetchUrl = _ref2[0], options = _ref2[1];
+
+              if (options.body) {
+                setFetchOpts({
+                  url: fetchUrl,
+                  dataSet: true
+                });
+              } else {
+                setFetchOpts({
+                  url: fetchUrl,
+                  dataSet: false
+                });
+              }
+
+              _context.next = 4;
+              return fetch(fetchUrl, options);
+
+            case 4:
+              response = _context.sent;
+              _context.prev = 5;
+              _context.next = 8;
+              return (0, _utils.processResponse)(response, true);
+
+            case 8:
+              _yield$processRespons = _context.sent;
+              _data2 = _yield$processRespons.data;
+
+              if (!_data2) {
+                _context.next = 12;
+                break;
+              }
+
+              return _context.abrupt("return", Promise.resolve(_data2));
+
+            case 12:
+              _context.next = 17;
+              break;
+
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](5);
+              return _context.abrupt("return", Promise.reject(_context.t0.error));
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[5, 14]]);
+    }));
+    return _customFetcher.apply(this, arguments);
+  }
+
+  var _useMutation = (0, _reactQuery.useMutation)(customFetcher, {}),
+      _useMutation2 = (0, _slicedToArray2["default"])(_useMutation, 2),
+      mutate = _useMutation2[0],
+      _useMutation2$ = _useMutation2[1],
+      status = _useMutation2$.status,
+      _data = _useMutation2$.data,
+      error = _useMutation2$.error,
+      reset = _useMutation2$.reset;
+
+  (0, _react.useEffect)(function () {
+    if (consume) {
+      var queryKey = (0, _utils.getQueryKey)(resource, id, query, data, options, method, baseURL, token);
+
+      if (typeof queryKey === 'function') {
+        mutate(queryKey());
+      } else {
+        mutate(queryKey);
+      }
+
+      setConsume(false);
+    }
+  }, [consume]);
+  return {
+    data: _data,
+    loading: status === 'loading',
+    loaded: ['success', 'error'].includes(status),
+    error: error,
+    invalidate: function invalidate() {
+      reset();
+    },
+    fetch: function fetch() {
+      setConsume(true);
+    },
+    dataSet: dataSet,
+    url: url
+  };
+}

package/api/useResourceQuery.d.ts

@@ -0,0 +1,18 @@
+export declare function useResourceManyBase(resource: string, query?: Record<string, any> | null | ((...args: any) => any), options?: RequestInit | null): any;
+export declare type UseResourceManyResponse = {
+    data?: any;
+    meta?: {
+        total?: number;
+        count?: number;
+    };
+    page: number;
+    limit: number;
+    totalPages: number;
+    total: number;
+    limitOptions: number[];
+    setPage: (page: number) => void;
+    setLimit: (limit: number) => void;
+    hasNext: boolean;
+    hasPrevious: boolean;
+};
+export declare function useResourceMany(resource: string, query?: Record<string, any> | null, options?: RequestInit | null): UseResourceManyResponse;

package/api/useResourceQuery.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResourceMany = useResourceMany;
+exports.useResourceManyBase = useResourceManyBase;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _utils = require("@digigov/ui/api/utils");
+
+var _reactQuery = require("react-query");
+
+var _api = require("@digigov/ui/api");
+
+var _excluded = ["data"];
+var DEFAULT_PAGINATION_LIMIT = 30;
+var DEFAULT_LIMIT_OPTIONS = [10, 30, 60, 100];
+
+function useResourceManyBase(resource, query, options) {
+  var _useAPI = (0, _api.useAPI)(),
+      baseURL = _useAPI.config.baseURL,
+      token = _useAPI.token;
+
+  var _useState = (0, _react.useState)({
+    url: '',
+    dataSet: false
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      _useState2$ = _useState2[0],
+      url = _useState2$.url,
+      dataSet = _useState2$.dataSet,
+      setFetchOpts = _useState2[1];
+
+  var customFetcher = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fetchUrl, options) {
+      var response, _yield$processRespons, _data;
+
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setFetchOpts({
+                url: fetchUrl,
+                dataSet: false
+              });
+              _context.next = 3;
+              return fetch(fetchUrl, options);
+
+            case 3:
+              response = _context.sent;
+              _context.prev = 4;
+              _context.next = 7;
+              return (0, _utils.processResponse)(response, true);
+
+            case 7:
+              _yield$processRespons = _context.sent;
+              _data = _yield$processRespons.data;
+
+              if (!_data) {
+                _context.next = 11;
+                break;
+              }
+
+              return _context.abrupt("return", Promise.resolve(_data));
+
+            case 11:
+              _context.next = 16;
+              break;
+
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](4);
+              return _context.abrupt("return", Promise.reject(_context.t0.error));
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[4, 13]]);
+    }));
+
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }(), []);
+  var queryKey = (0, _utils.getQueryKey)(resource, null, query, null, options, 'GET', baseURL, token);
+  var enabled = true;
+  var resolvedQueryKey;
+
+  if (typeof queryKey === 'function') {
+    try {
+      resolvedQueryKey = queryKey();
+    } catch (err) {
+      enabled = false;
+    }
+  }
+
+  var _usePaginatedQuery = (0, _reactQuery.usePaginatedQuery)({
+    queryKey: resolvedQueryKey || queryKey,
+    queryFn: customFetcher,
+    config: {
+      enabled: enabled,
+      suspense: true,
+      cacheTime: 30000,
+      refetchOnMount: false
+    }
+  }),
+      resolvedData = _usePaginatedQuery.resolvedData,
+      data = _usePaginatedQuery.latestData,
+      error = _usePaginatedQuery.error,
+      isFetching = _usePaginatedQuery.isFetching,
+      refetch = _usePaginatedQuery.refetch;
+
+  return {
+    data: data || resolvedData,
+    loading: isFetching,
+    loaded: !!data || !!error,
+    error: error,
+    invalidate: function invalidate() {
+      _reactQuery.queryCache.invalidateQueries(resolvedQueryKey || queryKey);
+    },
+    fetch: refetch,
+    dataSet: dataSet,
+    url: url
+  };
+}
+
+function useResourceMany(resource, query, options) {
+  // allow developer to set a custom limit, fallback to a common value
+  var _useState3 = (0, _react.useState)(query && query.limit || DEFAULT_PAGINATION_LIMIT),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      limit = _useState4[0],
+      setLimit = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({
+    offset: query && query.offset || 0,
+    limit: limit
+  }),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      pageParams = _useState6[0],
+      setPageParams = _useState6[1]; // update options when limit is changed
+
+
+  (0, _react.useEffect)(function () {
+    if (pageParams.limit !== limit) {
+      setPageParams((0, _extends2["default"])({}, pageParams, {
+        limit: limit
+      }));
+    }
+  }, [limit]); // update user provided query with pagination params
+
+  var queryKey = JSON.stringify(query);
+  var pageParamsKey = JSON.stringify(pageParams);
+  var q = (0, _react.useMemo)(function () {
+    return (0, _extends2["default"])({}, pageParams, query);
+  }, [queryKey, pageParamsKey]);
+
+  var _useResourceManyBase = useResourceManyBase(resource, q, options),
+      data = _useResourceManyBase.data,
+      rest = (0, _objectWithoutProperties2["default"])(_useResourceManyBase, _excluded); // extract data/metadata from response
+
+
+  var resp = data ? data.data : data;
+  var meta = data ? data.meta : data;
+  var totalPages = (0, _react.useMemo)(function () {
+    return data && data.meta && data.meta.total || 1;
+  }, [data]);
+  var total = (0, _react.useMemo)(function () {
+    return data && data.meta && data.meta.count || 0;
+  }, [data]);
+  var limitOptions = (0, _react.useMemo)(function () {
+    return DEFAULT_LIMIT_OPTIONS;
+  }, []);
+  var page = (0, _react.useMemo)(function () {
+    var offset = parseInt(pageParams.offset) || 0;
+
+    var _limit = parseInt("".concat(pageParams.limit)) || parseInt("".concat(limit));
+
+    return offset / _limit;
+  }, [pageParams]); // set params to specific page
+
+  var setPage = (0, _react.useCallback)(function (page) {
+    if (page > totalPages) {
+      page = totalPages;
+    }
+
+    if (page <= 0) {
+      page = 0;
+    }
+
+    var _limit = limit || DEFAULT_PAGINATION_LIMIT;
+
+    var offset = _limit * page;
+    setPageParams({
+      offset: offset,
+      limit: limit
+    });
+  }, [setPageParams]);
+  var hasNext = page < totalPages - 1;
+  var hasPrevious = page > 0;
+  return (0, _extends2["default"])({
+    data: resp,
+    meta: meta,
+    page: page,
+    limit: limit,
+    totalPages: totalPages,
+    total: total,
+    limitOptions: limitOptions,
+    setPage: setPage,
+    setLimit: setLimit,
+    hasNext: hasNext,
+    hasPrevious: hasPrevious
+  }, rest);
+}

package/api/utils.d.ts

@@ -0,0 +1,6 @@
+import { ProcessedResponse } from '@digigov/ui/api/fetchAPI';
+import { ArrayQueryKey } from 'react-query/types';
+export declare function parseErrors(response: Response): Promise<string[]>;
+export declare function processResponse(response: any, raiseError?: boolean): Promise<ProcessedResponse>;
+export declare function getArgs(resource: any, id: any, query: any, data: any, options: any, method: any, baseURL: any, token: any): any[];
+export declare function getQueryKey(resource: string, id: string | number | null | undefined | ((...args: any) => void), query: Record<string, any> | null | undefined | ((...args: any) => void), data: Record<string, any> | null | undefined | ((...args: any) => void), options: RequestInit | null | undefined, method: string | null | undefined, baseURL: string, token: string | null | undefined): ArrayQueryKey | ((...args: any) => ArrayQueryKey);