From 66a25b3b1c6241c10fa0db24c19dd9911cb51214 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D1=81=D0=B5=D0=BD=D0=B8=D1=8F?=
 <31247233+kseniya57@users.noreply.github.com>
Date: Tue, 14 Nov 2023 20:30:40 +0300
Subject: [PATCH] feat(useAsyncActionHandler): add useAsyncActionHandler hook
 (#1095)

Co-authored-by: kseniyakuzina <kseniyakuzina@yandex-team.ru>
---
 src/hooks/index.ts                            |  1 +
 src/hooks/useAsyncActionHandler/README.md     | 89 +++++++++++++++++++
 .../__stories__/ProgressButton.tsx            | 16 ++++
 .../UseAsyncActionHandlerDemo.classname.ts    |  3 +
 .../UseAsyncActionHandlerDemo.scss            | 11 +++
 .../__stories__/UseAsyncActionHandlerDemo.tsx | 42 +++++++++
 .../UseAsyncActionHandlerStories.stories.tsx  | 11 +++
 src/hooks/useAsyncActionHandler/index.ts      |  1 +
 .../useAsyncActionHandler.ts                  | 36 ++++++++
 9 files changed, 210 insertions(+)
 create mode 100644 src/hooks/useAsyncActionHandler/README.md
 create mode 100644 src/hooks/useAsyncActionHandler/__stories__/ProgressButton.tsx
 create mode 100644 src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.classname.ts
 create mode 100644 src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.scss
 create mode 100644 src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.tsx
 create mode 100644 src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerStories.stories.tsx
 create mode 100644 src/hooks/useAsyncActionHandler/index.ts
 create mode 100644 src/hooks/useAsyncActionHandler/useAsyncActionHandler.ts

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 9cd1ead75d..8c733a9c24 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,4 +1,5 @@
 export * from './useActionHandlers';
+export * from './useAsyncActionHandler';
 export * from './useBodyScrollLock';
 export * from './useFileInput';
 export * from './useFocusWithin';
diff --git a/src/hooks/useAsyncActionHandler/README.md b/src/hooks/useAsyncActionHandler/README.md
new file mode 100644
index 0000000000..5fcff146df
--- /dev/null
+++ b/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>
+    </>
+  );
+};
+```
diff --git a/src/hooks/useAsyncActionHandler/__stories__/ProgressButton.tsx b/src/hooks/useAsyncActionHandler/__stories__/ProgressButton.tsx
new file mode 100644
index 0000000000..fbbf4f005f
--- /dev/null
+++ b/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} />;
+};
diff --git a/src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.classname.ts b/src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.classname.ts
new file mode 100644
index 0000000000..227f385c4b
--- /dev/null
+++ b/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');
diff --git a/src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.scss b/src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.scss
new file mode 100644
index 0000000000..996ccbba68
--- /dev/null
+++ b/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;
+}
diff --git a/src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.tsx b/src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerDemo.tsx
new file mode 100644
index 0000000000..c3637e6c6a
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerStories.stories.tsx b/src/hooks/useAsyncActionHandler/__stories__/UseAsyncActionHandlerStories.stories.tsx
new file mode 100644
index 0000000000..9230cea837
--- /dev/null
+++ b/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 />;
diff --git a/src/hooks/useAsyncActionHandler/index.ts b/src/hooks/useAsyncActionHandler/index.ts
new file mode 100644
index 0000000000..8436395f03
--- /dev/null
+++ b/src/hooks/useAsyncActionHandler/index.ts
@@ -0,0 +1 @@
+export * from './useAsyncActionHandler';
diff --git a/src/hooks/useAsyncActionHandler/useAsyncActionHandler.ts b/src/hooks/useAsyncActionHandler/useAsyncActionHandler.ts
new file mode 100644
index 0000000000..a3e5ac58f2
--- /dev/null
+++ b/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,
+    };
+}