@etsoo/react 1.5.96 → 1.5.98

package/__tests__/States.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { useAsyncState } from '../src/uses/useAsyncState';
+import { act } from 'react-dom/test-utils';
+
+function App(props: { callback: (state: number) => void }) {
+    const { callback } = props;
+    const [state, setState] = useAsyncState(0);
+    const click = async () => {
+        const currentState = await setState((prev) => prev + 1);
+        callback(currentState + 1);
+    };
+    callback(state);
+    return <button onClick={click}>State: {state}</button>;
+}
+
+test('Tests for useAsyncState', (done) => {
+    const callback = jest.fn();
+    render(<App callback={callback} />);
+    const button = screen.getByRole<HTMLButtonElement>('button');
+    expect(button.innerHTML).toBe('State: 0');
+    act(() => {
+        button.click();
+    });
+
+    expect(button.innerHTML).toBe('State: 1');
+
+    setTimeout(function () {
+        // Expect to happen
+        expect(callback).lastCalledWith(2);
+
+        // Notify jest to complete
+        done();
+    }, 100);
+});

package/lib/index.d.ts

@@ -16,6 +16,7 @@ export * from './states/IState';
 export * from './states/PageState';
 export * from './states/State';
 export * from './states/UserState';
+export * from './uses/useAsyncState';
 export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';

package/lib/index.js

@@ -21,6 +21,7 @@ export * from './states/PageState';
 export * from './states/State';
 export * from './states/UserState';
 // uses
+export * from './uses/useAsyncState';
 export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';

package/lib/uses/useAsyncState.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Returns a stateful value, and a async function to update it.
+ * @param initialState initial stat
+ * @returns Current state and update action
+ */
+export declare function useAsyncState<S>(initialState: S | (() => S)): [S, (newState: React.SetStateAction<S>) => Promise<S>];

package/lib/uses/useAsyncState.js

@@ -0,0 +1,33 @@
+import React from 'react';
+/**
+ * Returns a stateful value, and a async function to update it.
+ * @param initialState initial stat
+ * @returns Current state and update action
+ */
+export function useAsyncState(initialState) {
+    // State
+    const [state, setState] = React.useState(initialState);
+    // Resolve sate
+    const resolveState = React.useRef();
+    // Is mounted or not
+    const isMounted = React.useRef(false);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    // When state update
+    React.useEffect(() => {
+        if (resolveState.current) {
+            resolveState.current(state);
+        }
+    }, [state]);
+    const setAsyncState = React.useCallback((newState) => new Promise((resolve) => {
+        if (isMounted.current) {
+            resolveState.current = resolve;
+            setState(newState);
+        }
+    }), []);
+    return [state, setAsyncState];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.96",
+    "version": "1.5.98",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -70,8 +70,8 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@types/jest": "^29.0.3",
-        "@typescript-eslint/eslint-plugin": "^5.37.0",
-        "@typescript-eslint/parser": "^5.37.0",
+        "@typescript-eslint/eslint-plugin": "^5.38.0",
+        "@typescript-eslint/parser": "^5.38.0",
         "eslint": "^8.23.1",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './states/State';
 export * from './states/UserState';
 
 // uses
+export * from './uses/useAsyncState';
 export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';

package/src/uses/useAsyncState.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+
+/**
+ * Returns a stateful value, and a async function to update it.
+ * @param initialState initial stat
+ * @returns Current state and update action
+ */
+export function useAsyncState<S>(
+    initialState: S | (() => S)
+): [S, (newState: React.SetStateAction<S>) => Promise<S>] {
+    // State
+    const [state, setState] = React.useState(initialState);
+
+    // Resolve sate
+    const resolveState = React.useRef<(value: S | PromiseLike<S>) => void>();
+
+    // Is mounted or not
+    const isMounted = React.useRef(false);
+    React.useEffect(() => {
+        isMounted.current = true;
+
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
+    // When state update
+    React.useEffect(() => {
+        if (resolveState.current) {
+            resolveState.current(state);
+        }
+    }, [state]);
+
+    const setAsyncState = React.useCallback(
+        (newState: React.SetStateAction<S>) =>
+            new Promise<S>((resolve) => {
+                if (isMounted.current) {
+                    resolveState.current = resolve;
+                    setState(newState);
+                }
+            }),
+        []
+    );
+
+    return [state, setAsyncState];
+}