feat(useAsyncActionHandler): add useAsyncActionHandler hook (#1095)

Co-authored-by: kseniyakuzina <[email protected]>

src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useActionHandlers';
+export * from './useAsyncActionHandler';
 export * from './useBodyScrollLock';
 export * from './useFileInput';
 export * from './useFocusWithin';

src/hooks/useAsyncActionHandler/README.md

@@ -0,0 +1,89 @@
+<!--GITHUB_BLOCK-->
+
+# useAsyncActionHandler
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {useAsyncActionHandler} from '@gravity-ui/uikit';
+```
+
+The `useAsyncActionHandler` hook wraps an asynchronous action handler to add a loading state to it.
+Starts the loading process before executing the passed action and terminates the process after executing the action.
+Returns the loading state and the wrapped action handler
+
+## Properties
+
+| Name    | Description    |                      Type                       | Default |
+| :------ | :------------- | :---------------------------------------------: | :-----: |
+| handler | action handler | `(...args: unknown[]) => PromiseLike<unknown>;` |         |
+
+## Result
+
+```ts
+{
+  isLoading: boolean;
+  handler: typeof handler;
+}
+```
+
+Usage:
+
+```tsx
+const action = useCallback(() => Promise.resolve(), []);
+
+const {isLoading, handler: handleAction} = useAsyncActionHandler({handler: action});
+```
+
+### Examples
+
+Button with automatic loading during click handler execution
+
+```tsx
+type ProgressButtonProps = {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => PromiseLike<unknown>;
+} & Exclude<ButtonProps, 'onClick'>;
+
+export const ProgressButton = (props: ProgressButtonProps) => {
+  const {onClick, loading: providedIsLoading} = props;
+
+  const {isLoading, handler: handleClick} = useAsyncActionHandler({handler: onClick});
+
+  return <Button {...props} onClick={handleClick} loading={isLoading || providedIsLoading} />;
+};
+
+export const LoadableList = () => {
+  const [items, setItems] = useState([]);
+
+  const handleLoadItems = useCallback(async () => {
+    try {
+      const loadItems = () =>
+        new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(
+              Array.from(
+                {length: 10},
+                (_item, index) => `Item ${Math.random() * 100 * (index + 1)}`,
+              ),
+            );
+          }, 1000);
+        });
+
+      setItems(await loadItems());
+    } catch (error) {
+      console.error(error);
+    }
+  }, []);
+
+  return (
+    <>
+      <ProgressButton onClick={handleLoadItems}>Load items</ProgressButton>
+      <ul>
+        {items.map((item) => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+    </>
+  );
+};
+```

src/hooks/useAsyncActionHandler/__stories__/ProgressButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {Button, ButtonProps} from '../../../components';
+import {useAsyncActionHandler} from '../useAsyncActionHandler';
+
+export type ProgressButtonProps = {
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => PromiseLike<unknown>;
+} & Exclude<ButtonProps, 'onClick'>;
+
+export const ProgressButton = (props: ProgressButtonProps) => {
+    const {onClick, loading: providedIsLoading} = props;
+
+    const {isLoading, handler: handleClick} = useAsyncActionHandler({handler: onClick});
+
+    return <Button {...props} onClick={handleClick} loading={isLoading || providedIsLoading} />;
+};

src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.classname.ts

@@ -0,0 +1,3 @@
+import {block} from '../../../components/utils/cn';
+
+export const cnUseAsyncActionHandlerDemo = block('async-action-handler-demo');

src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.scss

@@ -0,0 +1,11 @@
+@import '../../../components/variables';
+
+$block: '.#{$ns}async-action-handler-demo';
+
+#{$block} {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 16px;
+}

src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import {ProgressButton} from './ProgressButton';
+import {cnUseAsyncActionHandlerDemo} from './UseAsyncActionHandlerDemo.classname';
+
+import './UseAsyncActionHandlerDemo.scss';
+
+export const UseAsyncActionHandlerDemo = () => {
+    const [items, setItems] = React.useState<string[]>([]);
+
+    const handleLoadItems = React.useCallback(async () => {
+        const loadItems = () =>
+            new Promise<string[]>((resolve) => {
+                setTimeout(() => {
+                    resolve(
+                        Array.from(
+                            {length: 10},
+                            (_item, index) =>
+                                `Item ${Math.round(Math.random() * 100 * (index + 1))}`,
+                        ),
+                    );
+                }, 1000);
+            });
+
+        try {
+            setItems(await loadItems());
+        } catch (error) {
+            console.error(error);
+        }
+    }, []);
+
+    return (
+        <div className={cnUseAsyncActionHandlerDemo()}>
+            <ProgressButton onClick={handleLoadItems}>Load items</ProgressButton>
+            <ul>
+                {items.map((item) => (
+                    <li key={item}>{item}</li>
+                ))}
+            </ul>
+        </div>
+    );
+};

src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerStories.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {UseAsyncActionHandlerDemo} from './UseAsyncActionHandlerDemo';
+
+export default {
+    title: 'Hooks/useAsyncActionHandler',
+} as Meta;
+
+export const Showcase: StoryFn = () => <UseAsyncActionHandlerDemo />;

src/hooks/useAsyncActionHandler/index.ts

@@ -0,0 +1 @@
+export * from './useAsyncActionHandler';

src/hooks/useAsyncActionHandler/useAsyncActionHandler.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+
+type AnyAsyncAction = (...args: any[]) => PromiseLike<any>;
+
+export interface UseAsyncActionHandlerProps<Action extends AnyAsyncAction> {
+    handler: Action;
+}
+
+export interface UseAsyncActionHandlerResult<Action extends AnyAsyncAction> {
+    isLoading: boolean;
+    handler: (...args: Parameters<Action>) => Promise<Awaited<ReturnType<Action>>>;
+}
+
+export function useAsyncActionHandler<Action extends AnyAsyncAction>({
+    handler,
+}: UseAsyncActionHandlerProps<Action>): UseAsyncActionHandlerResult<Action> {
+    const [isLoading, setLoading] = React.useState(false);
+
+    const handleAction = React.useCallback<UseAsyncActionHandlerResult<Action>['handler']>(
+        async (...args) => {
+            setLoading(true);
+
+            try {
+                return await handler(...args);
+            } finally {
+                setLoading(false);
+            }
+        },
+        [handler],
+    );
+
+    return {
+        isLoading,
+        handler: handleAction,
+    };
+}