From 48e558fa148bc29978cf317033050548ed717eef Mon Sep 17 00:00:00 2001
From: Truong Hoang Dung <A238410@dekra.org>
Date: Sat, 11 May 2024 16:36:08 +0700
Subject: [PATCH] [release] Enable async handler

---
 README.md                     |  6 +---
 package.json                  |  2 +-
 src/CONTRIBUTING.md           |  9 +++++
 src/examples/Async.tsx        | 63 +++++++++++++++++++++++++++++++++++
 src/hooks/use-state/hook.ts   |  2 +-
 src/stories/Async.stories.tsx | 18 ++++++++++
 6 files changed, 93 insertions(+), 7 deletions(-)
 create mode 100644 src/CONTRIBUTING.md
 create mode 100644 src/examples/Async.tsx
 create mode 100644 src/stories/Async.stories.tsx

diff --git a/README.md b/README.md
index 71cfb6b..b549e6c 100644
--- a/README.md
+++ b/README.md
@@ -234,10 +234,6 @@ export function TodoApp(props: TodoAppProps) {
     },
   ]);
 
-  const handleToggleTodo = (id: number) => {
-    dispatch('ToggleTodo', { id });
-  };
-
   return (
     <div>
       <h2>Todo List:</h2>
@@ -246,7 +242,7 @@ export function TodoApp(props: TodoAppProps) {
           <li
             key={todo.id}
             style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
-            onClick={() => handleToggleTodo(todo.id)}
+            onClick={() => dispatch('ToggleTodo', { id })}
           >
             {todo.text}
           </li>
diff --git a/package.json b/package.json
index fd987c8..03621b0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@revskill10/use-state",
   "description": "",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "author": "",
   "license": "MIT",
   "keywords": [],
diff --git a/src/CONTRIBUTING.md b/src/CONTRIBUTING.md
new file mode 100644
index 0000000..4475342
--- /dev/null
+++ b/src/CONTRIBUTING.md
@@ -0,0 +1,9 @@
+# How to contribute
+
+## Develop locally with storybook
+
+```js
+pnpm dev
+```
+
+## Create pull request
diff --git a/src/examples/Async.tsx b/src/examples/Async.tsx
new file mode 100644
index 0000000..4c4475d
--- /dev/null
+++ b/src/examples/Async.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { state$ } from '../hooks';
+
+export type ExampleProps = {
+  text?: String;
+};
+interface Message {
+  Decrement: {
+    amount: number;
+  };
+  Increment: {};
+}
+interface AppState {
+  loading?: boolean;
+  value: number;
+}
+export function AsyncExample(props: ExampleProps) {
+  const [count, dispatch] = state$<AppState, Message>({ value: 0 }, [
+    {
+      messages: ['Increment'],
+      handler: async (c) => {
+        c.loading.set(true);
+        await new Promise((resolve) => {
+          setTimeout(resolve, 1000);
+        });
+        c.loading.set(false);
+        c.value.set(c.value.get() + 1);
+      },
+      onChange: (c) => {
+        // eslint-disable-next-line no-console
+        console.log(`current count is ${c.get()}`);
+      },
+    },
+    {
+      messages: ['Decrement'],
+      handler: (c, payload) => {
+        if ('amount' in payload) {
+          c.value.set(c.value.get() - payload.amount ?? 1);
+        }
+      },
+    },
+  ]);
+  return (
+    <>
+      {`${props.text} ${count.value}`}
+      <button
+        onClick={() => dispatch('Increment', {})}
+        type="button"
+        id="increment-button"
+        disabled={count.loading}
+      >
+        Increment
+      </button>
+      <button
+        onClick={() => dispatch('Decrement', { amount: 3 })}
+        type="button"
+        id="decrement-button"
+      >
+        Decrement
+      </button>
+    </>
+  );
+}
diff --git a/src/hooks/use-state/hook.ts b/src/hooks/use-state/hook.ts
index a164615..bccb754 100644
--- a/src/hooks/use-state/hook.ts
+++ b/src/hooks/use-state/hook.ts
@@ -9,7 +9,7 @@ type HandlerCreator<State, T> = (
   state: Observable<State>,
   message: T[keyof T],
   bus?: EventBus<T>
-) => void;
+) => void | Promise<void>;
 type Listener = {
   unsubscribe: () => void;
 };
diff --git a/src/stories/Async.stories.tsx b/src/stories/Async.stories.tsx
new file mode 100644
index 0000000..8bf5e54
--- /dev/null
+++ b/src/stories/Async.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { AsyncExample as Example } from '../examples/Async';
+
+export default {
+  title: 'AsyncExample',
+  component: Example,
+  argTypes: {},
+} as Meta<typeof Example>;
+
+const Template: StoryFn<typeof Example> = (args) => <Example {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  text: 'Clicked this many times:',
+};