fix(hooks): add isTransitioning and isPending shorthand statuses …

…to return object (#231) This PR introduces a workaround for the issues described in #227, by adding `isTransitioning` and `isPending` shorthand statuses to the hooks return object. `isTransitioning` is the value returned from the `useTransition` hook that is used under the hood, while `isPending` has the value of `isExecuting || isTransitioning`, for convenience.
TheEdoRan · Aug 14, 2024 · 6e23887 · 6e23887
1 parent 4d8574b
commit 6e23887
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 73 deletions.
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -12,7 +12,7 @@
 	"dependencies": {
 		"@hookform/resolvers": "^3.3.4",
 		"lucide-react": "^0.378.0",
-		"next": "15.0.0-canary.75",
+		"next": "15.0.0-canary.115",
 		"next-safe-action": "workspace:*",
 		"react": "19.0.0-rc-512b09b2-20240718",
 		"react-dom": "19.0.0-rc-512b09b2-20240718",
@@ -26,7 +26,7 @@
 		"@types/react-dom": "18.3.0",
 		"autoprefixer": "10.4.19",
 		"eslint": "^8.57.0",
-		"eslint-config-next": "15.0.0-canary.75",
+		"eslint-config-next": "15.0.0-canary.115",
 		"postcss": "8.4.38",
 		"tailwindcss": "3.4.3",
 		"typescript": "^5.5.4"

diff --git a/apps/playground/src/app/(examples)/hook/page.tsx b/apps/playground/src/app/(examples)/hook/page.tsx
@@ -17,6 +17,8 @@ export default function Hook() {
 		reset,
 		isIdle,
 		isExecuting,
+		isTransitioning,
+		isPending,
 		hasSucceeded,
 		hasErrored,
 	} = useAction(deleteUser, {
@@ -34,7 +36,15 @@ export default function Hook() {
 		},
 	});
 
-	console.dir({ status, isIdle, isExecuting, hasSucceeded, hasErrored });
+	console.dir({
+		status,
+		isIdle,
+		isExecuting,
+		isTransitioning,
+		isPending,
+		hasSucceeded,
+		hasErrored,
+	});
 
 	return (
 		<main className="w-96 max-w-full px-4">

diff --git a/packages/next-safe-action/src/hooks-utils.ts b/packages/next-safe-action/src/hooks-utils.ts
@@ -36,10 +36,18 @@ export const getActionStatus = <
 	}
 };
 
-export const getActionShorthandStatusObject = (status: HookActionStatus) => {
+export const getActionShorthandStatusObject = ({
+	status,
+	isTransitioning,
+}: {
+	status: HookActionStatus;
+	isTransitioning: boolean;
+}) => {
 	return {
 		isIdle: status === "idle",
 		isExecuting: status === "executing",
+		isTransitioning,
+		isPending: status === "executing" || isTransitioning,
 		hasSucceeded: status === "hasSucceeded",
 		hasErrored: status === "hasErrored",
 	};
@@ -102,12 +110,16 @@ export const useActionCallbacks = <
 					await Promise.resolve(onExecute?.({ input }));
 					break;
 				case "hasSucceeded":
-					await Promise.resolve(onSuccess?.({ data: result?.data, input }));
-					await Promise.resolve(onSettled?.({ result, input }));
+					await Promise.all([
+						Promise.resolve(onSuccess?.({ data: result?.data, input })),
+						Promise.resolve(onSettled?.({ result, input })),
+					]);
 					break;
 				case "hasErrored":
-					await Promise.resolve(onError?.({ error: result, input }));
-					await Promise.resolve(onSettled?.({ result, input }));
+					await Promise.all([
+						Promise.resolve(onError?.({ error: result, input })),
+						Promise.resolve(onSettled?.({ result, input })),
+					]);
 					break;
 			}
 		};

diff --git a/packages/next-safe-action/src/hooks.ts b/packages/next-safe-action/src/hooks.ts
@@ -30,7 +30,7 @@ export const useAction = <
 	safeActionFn: HookSafeActionFn<ServerError, S, BAS, CVE, CBAVE, Data>,
 	utils?: HookBaseUtils<S> & HookCallbacks<ServerError, S, BAS, CVE, CBAVE, Data>
 ) => {
-	const [, startTransition] = React.useTransition();
+	const [isTransitioning, startTransition] = React.useTransition();
 	const [result, setResult] = React.useState<HookResult<ServerError, S, BAS, CVE, CBAVE, Data>>({});
 	const [clientInput, setClientInput] = React.useState<S extends Schema ? InferIn<S> : void>();
 	const [isExecuting, setIsExecuting] = React.useState(false);
@@ -128,7 +128,7 @@ export const useAction = <
 		result,
 		reset,
 		status,
-		...getActionShorthandStatusObject(status),
+		...getActionShorthandStatusObject({ status, isTransitioning }),
 	};
 };
 
@@ -155,7 +155,7 @@ export const useOptimisticAction = <
 	} & HookBaseUtils<S> &
 		HookCallbacks<ServerError, S, BAS, CVE, CBAVE, Data>
 ) => {
-	const [, startTransition] = React.useTransition();
+	const [isTransitioning, startTransition] = React.useTransition();
 	const [result, setResult] = React.useState<HookResult<ServerError, S, BAS, CVE, CBAVE, Data>>({});
 	const [clientInput, setClientInput] = React.useState<S extends Schema ? InferIn<S> : void>();
 	const [isExecuting, setIsExecuting] = React.useState(false);
@@ -260,7 +260,7 @@ export const useOptimisticAction = <
 		optimisticState,
 		reset,
 		status,
-		...getActionShorthandStatusObject(status),
+		...getActionShorthandStatusObject({ status, isTransitioning }),
 	};
 };
 

diff --git a/packages/next-safe-action/src/stateful-hooks.ts b/packages/next-safe-action/src/stateful-hooks.ts
@@ -34,7 +34,7 @@ export const useStateAction = <
 		utils?.permalink
 	);
 	const [isIdle, setIsIdle] = React.useState(true);
-	const [, startTransition] = React.useTransition();
+	const [isTransitioning, startTransition] = React.useTransition();
 	const [clientInput, setClientInput] = React.useState<S extends Schema ? InferIn<S> : void>();
 	const status = getActionStatus<ServerError, S, BAS, CVE, CBAVE, Data>({
 		isExecuting,
@@ -78,6 +78,6 @@ export const useStateAction = <
 		input: clientInput,
 		result,
 		status,
-		...getActionShorthandStatusObject(status),
+		...getActionShorthandStatusObject({ status, isTransitioning }),
 	};
 };