@aiszlab/relax 2.1.2 → 2.1.3-beta.0

package/dist/hooks/use-request.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+var _regenerator = require('@babel/runtime/helpers/regenerator');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var useEvent = require('./use-event.cjs');
+var useMounted = require('./use-mounted.cjs');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * wraps an async request function, tracking loading / error / data state.
+ * when `auto` is true the request fires automatically on mount.
+ */
+var useRequest = function useRequest(request) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$auto = _ref.auto,
+    auto = _ref$auto === void 0 ? false : _ref$auto;
+  var _useState = react.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _useState3 = react.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var isMountedRef = react.useRef(false);
+  var _request = useEvent.useEvent(request);
+  var run = react.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var result,
+      _args = arguments;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          setLoading(true);
+          setError(null);
+          _context.n = 1;
+          return _request.apply(void 0, _args)["catch"](function (error) {
+            setError(error);
+            return null;
+          });
+        case 1:
+          result = _context.v;
+          setData(result);
+          setLoading(false);
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  })), []);
+  useMounted.useMounted(function () {
+    if (isMountedRef.current) return;
+    if (!auto) return;
+    isMountedRef.current = true;
+    run();
+  });
+  return {
+    data: data,
+    error: error,
+    loading: loading,
+    run: run
+  };
+};
+
+exports.useRequest = useRequest;

package/dist/hooks/use-request.d.ts

@@ -0,0 +1,38 @@
+type UsingRequest = {
+    /**
+     * @description
+     * auto request when component mounts
+     */
+    auto?: boolean;
+};
+type UsedRequest<T> = {
+    /**
+     * @description
+     * response data
+     */
+    data: T | null;
+    /**
+     * @description
+     * error caught from the request
+     */
+    error: Error | null;
+    /**
+     * @description
+     * whether the request is in progress
+     */
+    loading: boolean;
+    /**
+     * @description
+     * manually trigger the request with the same arguments as the source function
+     */
+    run: (...args: any[]) => Promise<void>;
+};
+/**
+ * @author murukal
+ *
+ * @description
+ * wraps an async request function, tracking loading / error / data state.
+ * when `auto` is true the request fires automatically on mount.
+ */
+export declare const useRequest: <T>(request: (...args: any[]) => Promise<T>, { auto }?: UsingRequest) => UsedRequest<T>;
+export {};

package/dist/hooks/use-request.mjs

@@ -0,0 +1,69 @@
+import _regenerator from '@babel/runtime/helpers/regenerator';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useCallback } from 'react';
+import { useEvent } from './use-event.mjs';
+import { useMounted } from './use-mounted.mjs';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * wraps an async request function, tracking loading / error / data state.
+ * when `auto` is true the request fires automatically on mount.
+ */
+var useRequest = function useRequest(request) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$auto = _ref.auto,
+    auto = _ref$auto === void 0 ? false : _ref$auto;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var isMountedRef = useRef(false);
+  var _request = useEvent(request);
+  var run = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var result,
+      _args = arguments;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          setLoading(true);
+          setError(null);
+          _context.n = 1;
+          return _request.apply(void 0, _args)["catch"](function (error) {
+            setError(error);
+            return null;
+          });
+        case 1:
+          result = _context.v;
+          setData(result);
+          setLoading(false);
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  })), []);
+  useMounted(function () {
+    if (isMountedRef.current) return;
+    if (!auto) return;
+    isMountedRef.current = true;
+    run();
+  });
+  return {
+    data: data,
+    error: error,
+    loading: loading,
+    run: run
+  };
+};
+
+export { useRequest };

package/dist/index.cjs

@@ -22,6 +22,7 @@ var useFocus = require('./hooks/use-focus.cjs');
 var useMemorized = require('./hooks/use-memorized.cjs');
 var useMutateObserver = require('./hooks/use-mutate-observer.cjs');
 var useRaf = require('./hooks/use-raf.cjs');
+var useRequest = require('./hooks/use-request.cjs');
 var useDevicePixelRatio = require('./hooks/use-device-pixel-ratio.cjs');
 var useIdentity = require('./hooks/use-identity.cjs');
 var useMediaQuery = require('./hooks/use-media-query.cjs');
@@ -119,6 +120,7 @@ exports.useFocus = useFocus.useFocus;
 exports.useMemorized = useMemorized.useMemorized;
 exports.useMutateObserver = useMutateObserver.useMutateObserver;
 exports.useRaf = useRaf.useRaf;
+exports.useRequest = useRequest.useRequest;
 exports.useDevicePixelRatio = useDevicePixelRatio.useDevicePixelRatio;
 exports.useIdentity = useIdentity.useIdentity;
 exports.useMediaQuery = useMediaQuery.useMediaQuery;

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { useFocus } from "./hooks/use-focus";
 export { useMemorized } from "./hooks/use-memorized";
 export { useMutateObserver } from "./hooks/use-mutate-observer";
 export { useRaf } from "./hooks/use-raf";
+export { useRequest } from "./hooks/use-request";
 export { useDevicePixelRatio } from "./hooks/use-device-pixel-ratio";
 export { useIdentity } from "./hooks/use-identity";
 export { useMediaQuery } from "./hooks/use-media-query";

package/dist/index.mjs

@@ -20,6 +20,7 @@ export { useFocus } from './hooks/use-focus.mjs';
 export { useMemorized } from './hooks/use-memorized.mjs';
 export { useMutateObserver } from './hooks/use-mutate-observer.mjs';
 export { useRaf } from './hooks/use-raf.mjs';
+export { useRequest } from './hooks/use-request.mjs';
 export { useDevicePixelRatio } from './hooks/use-device-pixel-ratio.mjs';
 export { useIdentity } from './hooks/use-identity.mjs';
 export { useMediaQuery } from './hooks/use-media-query.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "2.1.2",
+  "version": "2.1.3-beta.0",
   "description": "react utils collection",
   "exports": {
     ".": {