@postrun/react 1.0.0 → 1.2.0

package/README.md

@@ -100,9 +100,34 @@ function ConnectX({
 ```
 
 Prefer wiring it yourself? `useConnect({ profileId, platform, onConnected })`
-returns the same `{ state, start, select, reset }` — `<Connect>` is just a thin
-render-prop wrapper over it. The hosted `/connect` page remains available as a
-no-SDK fallback (link to the `hosted_connect_url` from a `POST .../connect`).
+returns the same `{ state, start, prepare, select, reset }` — `<Connect>` is just
+a thin render-prop wrapper over it. The hosted `/connect` page remains available
+as a no-SDK fallback (link to the `hosted_connect_url` from a `POST .../connect`).
+
+A successful connect auto-refetches your `useConnections` list, so the new account
+shows up with no manual refetch. Prefer callbacks to reading `state.phase`? Use
+`onSuccess()` (fires on success — `active` **or** `connected_pending`, ideal for
+"close the dialog"), `onConnected(connection)` (only `active`, hands you the bound
+connection), `onError(reason)`, and `onCancelled()`.
+
+**Multi-platform picker?** A session is pre-minted on mount, which is ideal for a
+dedicated button but would mint one per platform in a "pick a network" list. Set
+`prepareOnMount={false}` and call `prepare()` on the button's intent
+(`onPointerEnter`/`onFocus`) so only the platform the user is about to click mints:
+
+```tsx
+<Connect profileId={id} platform="meta_ads" prepareOnMount={false} onConnected={refetch}>
+  {({ state, start, prepare, select }) =>
+    state.phase === 'picking' ? (
+      <Picker accounts={state.accounts} onPick={select} />
+    ) : (
+      <button onPointerEnter={prepare} onFocus={prepare} onClick={start}>
+        Connect Meta
+      </button>
+    )
+  }
+</Connect>
+```
 
 ## License
 

package/dist/index.cjs

@@ -314,19 +314,31 @@ var POLL_TIMEOUT_MS = 15e3;
 function useConnect({
   profileId,
   platform,
-  onConnected
+  onConnected,
+  onSuccess,
+  onError,
+  onCancelled,
+  prepareOnMount = true
 }) {
-  const { client } = usePostrun();
+  const { client, queryClient } = usePostrun();
   const [state, setState] = react.useState({ phase: "preparing" });
   const [remintNonce, setRemintNonce] = react.useState(0);
   const sessionRef = react.useRef(null);
   const pickRef = react.useRef(null);
   const inFlightRef = react.useRef(false);
   const flowGenRef = react.useRef(0);
+  const preparingRef = react.useRef(false);
+  const prepareGenRef = react.useRef(0);
   const onConnectedRef = react.useRef(onConnected);
+  const onSuccessRef = react.useRef(onSuccess);
+  const onErrorRef = react.useRef(onError);
+  const onCancelledRef = react.useRef(onCancelled);
   react.useEffect(() => {
     onConnectedRef.current = onConnected;
-  }, [onConnected]);
+    onSuccessRef.current = onSuccess;
+    onErrorRef.current = onError;
+    onCancelledRef.current = onCancelled;
+  });
   const abandonFlow = react.useCallback(() => {
     flowGenRef.current += 1;
     inFlightRef.current = false;
@@ -334,12 +346,23 @@ function useConnect({
     pickRef.current = null;
     pick?.reject(new Error("connect flow abandoned"));
   }, []);
-  react.useEffect(() => {
-    let abandoned = false;
+  const prepare = react.useCallback(() => {
+    if (sessionRef.current || preparingRef.current) return;
+    preparingRef.current = true;
+    const gen = prepareGenRef.current;
     setState({ phase: "preparing" });
-    sessionRef.current = null;
+    const failPrepare = () => {
+      preparingRef.current = false;
+      setState({ phase: "error", reason: "prepare_failed" });
+      onErrorRef.current?.("prepare_failed");
+    };
     js.connectionsConnect({ client, path: { id: profileId }, body: { platform } }).then(({ data }) => {
-      if (abandoned || !data) return;
+      if (prepareGenRef.current !== gen) return;
+      if (!data) {
+        failPrepare();
+        return;
+      }
+      preparingRef.current = false;
       sessionRef.current = {
         token: data.connect_session_token,
         providerConfigKey: data.provider_config_key,
@@ -347,16 +370,28 @@ function useConnect({
       };
       setState({ phase: "idle" });
     }).catch(() => {
-      if (!abandoned) setState({ phase: "error", reason: "auth_failed" });
+      if (prepareGenRef.current !== gen) return;
+      failPrepare();
     });
+  }, [client, profileId, platform]);
+  react.useEffect(() => {
+    prepareGenRef.current += 1;
+    preparingRef.current = false;
+    sessionRef.current = null;
+    setState({ phase: "preparing" });
+    if (prepareOnMount) prepare();
     return () => {
-      abandoned = true;
+      prepareGenRef.current += 1;
       abandonFlow();
     };
-  }, [client, profileId, platform, remintNonce, abandonFlow]);
+  }, [profileId, platform, remintNonce, prepareOnMount, prepare, abandonFlow]);
   const start = react.useCallback(() => {
     const session = sessionRef.current;
-    if (!session || inFlightRef.current) return;
+    if (!session) {
+      prepare();
+      return;
+    }
+    if (inFlightRef.current) return;
     inFlightRef.current = true;
     const gen = flowGenRef.current;
     const isCurrent = () => flowGenRef.current === gen;
@@ -421,20 +456,26 @@ function useConnect({
       switch (outcome.status) {
         case "active":
           setState({ phase: "active", connection: outcome.connection });
+          void queryClient.invalidateQueries({ queryKey: connectionKeys.lists() });
           onConnectedRef.current?.(outcome.connection);
+          onSuccessRef.current?.();
           return;
         case "connected_pending":
           setState({ phase: "connected_pending" });
+          void queryClient.invalidateQueries({ queryKey: connectionKeys.lists() });
+          onSuccessRef.current?.();
           return;
         case "cancelled":
           setState({ phase: "cancelled" });
+          onCancelledRef.current?.();
           return;
         case "error":
           setState({ phase: "error", reason: outcome.reason });
+          onErrorRef.current?.(outcome.reason);
           return;
       }
     });
-  }, [client, profileId]);
+  }, [client, profileId, prepare, queryClient]);
   const select = react.useCallback((externalAccountId) => {
     const pick = pickRef.current;
     if (!pick) return;
@@ -445,7 +486,7 @@ function useConnect({
   const reset = react.useCallback(() => {
     setRemintNonce((n) => n + 1);
   }, []);
-  return { state, start, select, reset };
+  return { state, start, prepare, select, reset };
 }
 function useConnections(profileId, filter) {
   const { client, queryClient } = usePostrun();
@@ -517,9 +558,21 @@ function Connect({
   profileId,
   platform,
   onConnected,
+  onSuccess,
+  onError,
+  onCancelled,
+  prepareOnMount,
   children
 }) {
-  const api = useConnect({ profileId, platform, onConnected });
+  const api = useConnect({
+    profileId,
+    platform,
+    onConnected,
+    onSuccess,
+    onError,
+    onCancelled,
+    prepareOnMount
+  });
   return children(api);
 }
 var UploadError = class extends Error {