@aiszlab/relax 2.1.2 → 2.1.3-beta.1

package/dist/hooks/use-request.cjs

@@ -0,0 +1,83 @@
+'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,
+    thenCallback = _ref.then,
+    catchCallback = _ref["catch"],
+    finallyCallback = _ref["finally"];
+  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 _then = useEvent.useEvent(function (_data) {
+    thenCallback === null || thenCallback === void 0 || thenCallback(_data);
+    return _data;
+  });
+  var _catch = useEvent.useEvent(function (error) {
+    catchCallback === null || catchCallback === void 0 || catchCallback(error);
+    setError(error);
+    return null;
+  });
+  var _finally = useEvent.useEvent(function () {
+    finallyCallback === null || finallyCallback === void 0 || finallyCallback();
+  });
+  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).then(_then)["catch"](_catch)["finally"](_finally);
+        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,53 @@
+type UsingRequest<T> = {
+    /**
+     * @description
+     * auto request when component mounts
+     */
+    auto?: boolean;
+    /**
+     * @description
+     * called when the request succeeds, like Promise.then
+     */
+    then?: (data: T) => void;
+    /**
+     * @description
+     * called when the request fails, like Promise.catch
+     */
+    catch?: (error: Error) => void;
+    /**
+     * @description
+     * called when the request completes (success or failure), like Promise.finally
+     */
+    finally?: () => void;
+};
+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, then: thenCallback, catch: catchCallback, finally: finallyCallback, }?: UsingRequest<T>) => UsedRequest<T>;
+export {};

package/dist/hooks/use-request.mjs

@@ -0,0 +1,81 @@
+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,
+    thenCallback = _ref.then,
+    catchCallback = _ref["catch"],
+    finallyCallback = _ref["finally"];
+  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 _then = useEvent(function (_data) {
+    thenCallback === null || thenCallback === void 0 || thenCallback(_data);
+    return _data;
+  });
+  var _catch = useEvent(function (error) {
+    catchCallback === null || catchCallback === void 0 || catchCallback(error);
+    setError(error);
+    return null;
+  });
+  var _finally = useEvent(function () {
+    finallyCallback === null || finallyCallback === void 0 || finallyCallback();
+  });
+  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).then(_then)["catch"](_catch)["finally"](_finally);
+        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.1",
   "description": "react utils collection",
   "exports": {
     ".": {