Render server action result instead of logging it

src/client-components/buy-button.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import type {buy} from '../server-actions/buy.js';
+import {useEphemeralState} from './use-ephemeral-state.js';
 
 export interface BuyButtonProps {
   readonly buy: typeof buy;
@@ -10,12 +11,12 @@ export interface BuyButtonProps {
 export function BuyButton({buy}: BuyButtonProps): JSX.Element {
   const [quantity, setQuantity] = React.useState(1);
   const [isPending, setIsPending] = React.useState(false);
+  const [result, setResult] = useEphemeralState<string>(undefined, 3000);
 
   const handleClick = async () => {
     setIsPending(true);
-    const result = await buy(quantity);
+    setResult(await buy(quantity));
     setIsPending(false);
-    console.log(result);
   };
 
   return (
@@ -33,6 +34,7 @@ export function BuyButton({buy}: BuyButtonProps): JSX.Element {
       <button onClick={handleClick} disabled={isPending}>
         Buy now
       </button>
+      {result && <p style={{color: `forestgreen`}}>{result}</p>}
     </div>
   );
 }

src/client-components/use-ephemeral-state.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export function useEphemeralState<S>(
+  initialState: S | undefined | (() => S | undefined),
+  lifetimeInMilliseconds: number,
+): [S | undefined, React.Dispatch<React.SetStateAction<S | undefined>>] {
+  const [state, setState] = React.useState(initialState);
+  const timeoutRef = React.useRef<number>();
+
+  const setEphemeralState = React.useCallback<
+    React.Dispatch<React.SetStateAction<S | undefined>>
+  >((value) => {
+    window.clearTimeout(timeoutRef.current);
+
+    timeoutRef.current = window.setTimeout(
+      () => setState(undefined),
+      lifetimeInMilliseconds,
+    );
+
+    setState(value);
+  }, []);
+
+  React.useEffect(() => () => window.clearTimeout(timeoutRef.current), []);
+
+  return [state, setEphemeralState];
+}

src/server-actions/buy.ts

@@ -3,5 +3,5 @@
 export async function buy(quantity: number): Promise<string> {
   await new Promise((resolve) => setTimeout(resolve, 500));
 
-  return `Bought ${quantity} items.`;
+  return `Bought ${quantity} ${quantity === 1 ? `item` : `items`}.`;
 }