@postrun/react 0.2.0 → 1.0.0

package/README.md

@@ -3,8 +3,8 @@
 React provider and hooks for the [Postrun API](https://postrun.ai).
 
 Wrap your app once, then build your UI from hooks that handle the data fetching,
-caching, and orchestration for you — the hosted OAuth connect flow, the media
-upload pipeline, live status polling, and pagination.
+caching, and orchestration for you — the embedded one-click OAuth connect flow,
+the media upload pipeline, live status polling, and pagination.
 
 ```tsx
 import { PostrunProvider } from '@postrun/react';
@@ -32,9 +32,9 @@ calls `getToken` to supply it. The secret key never touches the browser.
 **Profiles** — `useProfiles` · `useProfilesInfinite` · `useProfile` ·
 `useCreateProfile` · `useUpdateProfile` · `useDeleteProfile`
 
-**Connections** — `useConnect` (hosted OAuth) · `useConnections` ·
-`useConnection` · `useDiscoverableAccounts` · `useSelectAccount` ·
-`useDisconnect`
+**Connections** — `useConnect` (embedded one-click OAuth) · `Connect` (drop-in) ·
+`useConnections` · `useConnection` · `useDiscoverableAccounts` ·
+`useSelectAccount` · `useDisconnect`
 
 **Media** — `useMediaUpload` (signed upload → bytes → poll until ready) ·
 `useMedia` · `useUpdateMedia` · `useDeleteMedia`
@@ -50,6 +50,60 @@ settles, so a scheduled post visibly transitions with no manual refetch.
 Composite, opinionated UI (a post composer, a calendar grid) is **deliberately
 not shipped** — that's your product and your taste. Build it from the hooks above.
 
+## One-click connect
+
+Connect a platform from **your own button**, in your own app — no redirect, no
+second click. `<Connect>` runs the OAuth popup in-page and, for multi-account
+platforms (Meta Ads, Facebook Pages), hands you the discoverable accounts to draw
+your own picker. It's headless: you render every pixel.
+
+```tsx
+import { Connect } from '@postrun/react';
+
+function ConnectX({
+  profileId,
+  onConnected,
+}: {
+  profileId: string;
+  onConnected: () => void; // e.g. refetch your connections list
+}) {
+  return (
+    <Connect profileId={profileId} platform="x" onConnected={onConnected}>
+      {({ state, start, select, reset }) => {
+        if (state.phase === 'picking') {
+          return (
+            <ul>
+              {state.accounts.map((a) => (
+                <li key={a.external_account_id}>
+                  <button onClick={() => select(a.external_account_id)}>
+                    {a.name ?? a.external_account_id}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          );
+        }
+        if (state.phase === 'error') {
+          return <button onClick={reset}>Try again</button>;
+        }
+        return (
+          // `start` MUST be called directly in the click — it opens the popup
+          // synchronously, so the browser keeps it inside the user gesture.
+          <button onClick={start} disabled={state.phase !== 'idle'}>
+            {state.phase === 'active' ? 'Connected ✓' : 'Connect X'}
+          </button>
+        );
+      }}
+    </Connect>
+  );
+}
+```
+
+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`).
+
 ## License
 
 [Apache-2.0](../../LICENSE) — use it freely in your product, with an explicit

package/dist/index.cjs

@@ -4,8 +4,10 @@
 var react = require('react');
 var reactQuery = require('@tanstack/react-query');
 var js = require('@postrun/js');
-var pRetry = require('p-retry');
+var Nango = require('@nangohq/frontend');
 var pWaitFor = require('p-wait-for');
+var pLimit = require('p-limit');
+var pRetry = require('p-retry');
 var axios = require('axios');
 var reactTweet = require('react-tweet');
 var fi = require('react-icons/fi');
@@ -15,8 +17,10 @@ var lu = require('react-icons/lu');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var pRetry__default = /*#__PURE__*/_interopDefault(pRetry);
+var Nango__default = /*#__PURE__*/_interopDefault(Nango);
 var pWaitFor__default = /*#__PURE__*/_interopDefault(pWaitFor);
+var pLimit__default = /*#__PURE__*/_interopDefault(pLimit);
+var pRetry__default = /*#__PURE__*/_interopDefault(pRetry);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 var twitterText__default = /*#__PURE__*/_interopDefault(twitterText);
 
@@ -203,29 +207,245 @@ function useDeleteProfile() {
     queryClient
   );
 }
-
-// src/navigate.ts
-function navigate(url) {
-  window.location.assign(url);
+var PENDING = { status: "connected_pending" };
+var CANCELLED = { status: "cancelled" };
+var active = (connection) => ({
+  status: "active",
+  connection
+});
+var failed = (reason) => ({
+  status: "error",
+  reason
+});
+function outcomeForAuthError(error) {
+  switch (error.type) {
+    case "window_closed":
+      return CANCELLED;
+    case "blocked_by_browser":
+      return failed("popup_blocked");
+    case "missing_auth_token":
+    case "invalid_host_url":
+    case "missing_credentials":
+    case "connection_test_failed":
+    case "missing_connect_session_token":
+    case "connection_validation_failed":
+    case "resource_capped":
+    case "unknown_error":
+      return failed("auth_failed");
+  }
+}
+async function grant(authorize) {
+  try {
+    return { ok: true, connectionId: await authorize() };
+  } catch (error) {
+    if (error instanceof Nango.AuthError) {
+      return { ok: false, outcome: outcomeForAuthError(error) };
+    }
+    return { ok: false, outcome: failed("auth_failed") };
+  }
+}
+async function awaitGrantedConnection(deps, nangoConnectionId) {
+  try {
+    return await pWaitFor__default.default(
+      async () => {
+        const rows = await deps.listByNangoConnectionId(nangoConnectionId);
+        const match = rows[0];
+        return match ? pWaitFor__default.default.resolveWith(match) : false;
+      },
+      { interval: deps.pollIntervalMs, timeout: deps.pollTimeoutMs }
+    );
+  } catch (error) {
+    if (error instanceof pWaitFor.TimeoutError) {
+      return null;
+    }
+    throw error;
+  }
+}
+async function bindPendingConnection(deps, connection) {
+  let accounts;
+  try {
+    accounts = await deps.discoverAccounts(connection.id);
+  } catch (error) {
+    if (error instanceof js.PostrunError && error.code === "not_implemented") {
+      return PENDING;
+    }
+    throw error;
+  }
+  if (accounts.length === 0) {
+    return PENDING;
+  }
+  const chosen = await deps.chooseAccount(accounts);
+  try {
+    return active(await deps.selectAccount(connection.id, chosen));
+  } catch (error) {
+    if (error instanceof js.PostrunError) {
+      return error.code === "connection_reauth_required" ? failed("reauth_required") : failed("select_failed");
+    }
+    throw error;
+  }
+}
+async function runEmbeddedConnect(deps) {
+  const granted = await grant(deps.authorize);
+  if (!granted.ok) {
+    return granted.outcome;
+  }
+  let connection;
+  try {
+    connection = await awaitGrantedConnection(deps, granted.connectionId);
+  } catch {
+    return failed("connection_not_found");
+  }
+  if (connection === null) {
+    return PENDING;
+  }
+  if (connection.external_account_id !== null) {
+    return active(connection);
+  }
+  try {
+    return await bindPendingConnection(deps, connection);
+  } catch {
+    return failed("select_failed");
+  }
 }
 
 // src/connections.ts
-function useConnect() {
-  const { client, queryClient } = usePostrun();
-  return reactQuery.useMutation(
-    {
-      mutationFn: async ({ profileId, platform }) => {
-        const session = (await js.connectionsConnect({
+var POLL_INTERVAL_MS = 1500;
+var POLL_TIMEOUT_MS = 15e3;
+function useConnect({
+  profileId,
+  platform,
+  onConnected
+}) {
+  const { client } = 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 onConnectedRef = react.useRef(onConnected);
+  react.useEffect(() => {
+    onConnectedRef.current = onConnected;
+  }, [onConnected]);
+  const abandonFlow = react.useCallback(() => {
+    flowGenRef.current += 1;
+    inFlightRef.current = false;
+    const pick = pickRef.current;
+    pickRef.current = null;
+    pick?.reject(new Error("connect flow abandoned"));
+  }, []);
+  react.useEffect(() => {
+    let abandoned = false;
+    setState({ phase: "preparing" });
+    sessionRef.current = null;
+    js.connectionsConnect({ client, path: { id: profileId }, body: { platform } }).then(({ data }) => {
+      if (abandoned || !data) return;
+      sessionRef.current = {
+        token: data.connect_session_token,
+        providerConfigKey: data.provider_config_key,
+        host: data.nango_host
+      };
+      setState({ phase: "idle" });
+    }).catch(() => {
+      if (!abandoned) setState({ phase: "error", reason: "auth_failed" });
+    });
+    return () => {
+      abandoned = true;
+      abandonFlow();
+    };
+  }, [client, profileId, platform, remintNonce, abandonFlow]);
+  const start = react.useCallback(() => {
+    const session = sessionRef.current;
+    if (!session || inFlightRef.current) return;
+    inFlightRef.current = true;
+    const gen = flowGenRef.current;
+    const isCurrent = () => flowGenRef.current === gen;
+    setState({ phase: "connecting" });
+    void runEmbeddedConnect({
+      // Nango lives INSIDE `authorize` so a SYNCHRONOUS throw (invalid host /
+      // missing token — the Nango SDK throws `AuthError` synchronously) becomes a
+      // promise rejection that `grant()` maps to `auth_failed`, never an uncaught
+      // throw escaping the click and wedging `inFlightRef`. Gesture timing still
+      // holds: `authorize()` is invoked SYNCHRONOUSLY down the
+      // start → runEmbeddedConnect → grant chain (each `await`'s operand is
+      // evaluated before it suspends), so `nango.auth()`'s `window.open` fires
+      // inside the user gesture, with no `await` before it.
+      authorize: async () => {
+        const nango = new Nango__default.default({
+          host: session.host,
+          connectSessionToken: session.token
+        });
+        const result = await nango.auth(session.providerConfigKey, {
+          detectClosedAuthWindow: true
+        });
+        return result.connectionId;
+      },
+      chooseAccount: (accounts) => new Promise((resolve, reject) => {
+        if (!isCurrent()) {
+          reject(new Error("connect flow abandoned"));
+          return;
+        }
+        pickRef.current = { resolve, reject };
+        setState({ phase: "picking", accounts });
+      }),
+      listByNangoConnectionId: async (nangoConnectionId) => {
+        const { data } = await js.connectionsListByProfile({
           client,
           path: { id: profileId },
-          body: { platform }
-        })).data;
-        navigate(session.hosted_connect_url);
-        return session;
+          query: { nango_connection_id: nangoConnectionId }
+        });
+        return data?.data ?? [];
+      },
+      discoverAccounts: async (connectionId) => {
+        const { data } = await js.connectionsListAccounts({
+          client,
+          path: { id: connectionId }
+        });
+        return data?.data ?? [];
+      },
+      selectAccount: async (connectionId, externalAccountId) => {
+        const { data } = await js.connectionsSelect({
+          client,
+          path: { id: connectionId },
+          body: { external_account_id: externalAccountId }
+        });
+        if (!data) throw new Error("select returned no connection");
+        return data;
+      },
+      pollIntervalMs: POLL_INTERVAL_MS,
+      pollTimeoutMs: POLL_TIMEOUT_MS
+    }).then((outcome) => {
+      if (!isCurrent()) return;
+      inFlightRef.current = false;
+      pickRef.current = null;
+      switch (outcome.status) {
+        case "active":
+          setState({ phase: "active", connection: outcome.connection });
+          onConnectedRef.current?.(outcome.connection);
+          return;
+        case "connected_pending":
+          setState({ phase: "connected_pending" });
+          return;
+        case "cancelled":
+          setState({ phase: "cancelled" });
+          return;
+        case "error":
+          setState({ phase: "error", reason: outcome.reason });
+          return;
       }
-    },
-    queryClient
-  );
+    });
+  }, [client, profileId]);
+  const select = react.useCallback((externalAccountId) => {
+    const pick = pickRef.current;
+    if (!pick) return;
+    pickRef.current = null;
+    setState({ phase: "connecting" });
+    pick.resolve(externalAccountId);
+  }, []);
+  const reset = react.useCallback(() => {
+    setRemintNonce((n) => n + 1);
+  }, []);
+  return { state, start, select, reset };
 }
 function useConnections(profileId, filter) {
   const { client, queryClient } = usePostrun();
@@ -291,6 +511,17 @@ function useDisconnect() {
     queryClient
   );
 }
+
+// src/Connect.tsx
+function Connect({
+  profileId,
+  platform,
+  onConnected,
+  children
+}) {
+  const api = useConnect({ profileId, platform, onConnected });
+  return children(api);
+}
 var UploadError = class extends Error {
   status;
   constructor(status, message) {
@@ -331,17 +562,7 @@ async function uploadBytes(target, file, options = {}) {
 }
 
 // src/media.ts
-var DOCUMENT_MIME = /^application\/(pdf|msword|vnd\.(openxmlformats-officedocument\.(wordprocessingml\.document|presentationml\.presentation)|ms-powerpoint))$/;
-function inferKind(contentType) {
-  if (contentType === "image/gif") return "gif";
-  if (contentType.startsWith("image/")) return "image";
-  if (contentType.startsWith("video/")) return "video";
-  if (DOCUMENT_MIME.test(contentType)) return "document";
-  throw new Error(
-    `Could not infer media kind from "${contentType}". Pass { kind } explicitly.`
-  );
-}
-async function pollUntilSettled(client, id, signal) {
+async function pollUntilSettled(client, id, signal, onTick) {
   let latest;
   await pWaitFor__default.default(
     async () => {
@@ -349,6 +570,7 @@ async function pollUntilSettled(client, id, signal) {
         throw new DOMException("Upload aborted", "AbortError");
       }
       latest = (await js.mediaGet({ client, path: { id } })).data;
+      onTick?.(latest);
       return latest.status === "ready" || latest.status === "failed";
     },
     { interval: 1500, timeout: 3e5 }
@@ -358,93 +580,134 @@ async function pollUntilSettled(client, id, signal) {
   }
   return latest;
 }
-function useMediaUpload() {
-  const { client, queryClient } = usePostrun();
-  const [status, setStatus] = react.useState("idle");
-  const [progress, setProgress] = react.useState(0);
-  const [media, setMedia] = react.useState(null);
-  const [error, setError] = react.useState(null);
-  const abortRef = react.useRef(null);
-  const upload = react.useCallback(
-    async (file, options) => {
-      const contentType = options.contentType || file.type;
-      if (!contentType) {
-        throw new Error(
-          "Could not determine the file's content type. Pass { contentType } explicitly."
-        );
-      }
-      const kind = options.kind ?? inferKind(contentType);
-      abortRef.current?.abort();
-      const controller = new AbortController();
-      abortRef.current = controller;
-      setStatus("uploading");
-      setProgress(0);
-      setMedia(null);
-      setError(null);
-      try {
-        const created = (await js.mediaCreate({
-          client,
-          body: {
-            profile_id: options.profileId,
-            kind,
-            content_type: contentType,
-            targets: options.targets,
-            raw: options.raw,
-            alt_text: options.altText,
-            external_id: options.externalId,
-            metadata: options.metadata
+async function runUpload(client, file, options, signal, callbacks) {
+  const created = (await js.mediaCreate({
+    client,
+    body: {
+      profile_id: options.profileId,
+      kind: options.kind,
+      content_type: options.contentType,
+      targets: options.targets,
+      raw: options.raw,
+      alt_text: options.altText,
+      external_id: options.externalId,
+      metadata: options.metadata
+    }
+  })).data;
+  if (created.upload) {
+    const target = created.upload;
+    await pRetry__default.default(
+      async () => {
+        try {
+          await uploadBytes(target, file, {
+            onProgress: callbacks.onProgress,
+            signal
+          });
+        } catch (uploadError) {
+          if (uploadError instanceof UploadError && uploadError.status >= 400 && uploadError.status < 500) {
+            throw new pRetry.AbortError(uploadError);
           }
-        })).data;
-        if (created.upload) {
-          const target = created.upload;
-          await pRetry__default.default(
-            async () => {
-              try {
-                await uploadBytes(target, file, {
-                  onProgress: setProgress,
-                  signal: controller.signal
-                });
-              } catch (uploadError) {
-                if (uploadError instanceof UploadError && uploadError.status >= 400 && uploadError.status < 500) {
-                  throw new pRetry.AbortError(uploadError);
-                }
-                throw uploadError;
-              }
-            },
-            { retries: 3, signal: controller.signal }
-          );
-        }
-        setStatus("processing");
-        const settled = await pollUntilSettled(
-          client,
-          created.id,
-          controller.signal
-        );
-        queryClient.setQueryData(mediaKeys.detail(created.id), settled);
-        void queryClient.invalidateQueries({ queryKey: mediaKeys.lists() });
-        setMedia(settled);
-        setStatus(settled.status === "failed" ? "failed" : "ready");
-        return settled;
-      } catch (caught) {
-        setError(caught);
-        setStatus("failed");
-        throw caught;
-      } finally {
-        if (abortRef.current === controller) {
-          abortRef.current = null;
+          throw uploadError;
         }
+      },
+      { retries: 3, signal }
+    );
+  }
+  callbacks.onProcessing();
+  return pollUntilSettled(client, created.id, signal, callbacks.onPoll);
+}
+function toFileArray(files) {
+  if (files instanceof File) return [files];
+  return Array.from(files);
+}
+function useMediaUpload(options) {
+  const { client, queryClient } = usePostrun();
+  const [items, setItems] = react.useState([]);
+  const controllers = react.useRef(/* @__PURE__ */ new Map());
+  const limitRef = react.useRef(null);
+  if (!limitRef.current) {
+    limitRef.current = pLimit__default.default(options?.concurrency ?? 3);
+  }
+  const patch = react.useCallback(
+    (id, changes) => {
+      setItems(
+        (current) => current.map(
+          (item) => item.id === id ? { ...item, ...changes } : item
+        )
+      );
+    },
+    []
+  );
+  const add = react.useCallback(
+    (files, uploadOptions) => {
+      const queued = toFileArray(files).map((file) => ({
+        id: crypto.randomUUID(),
+        file,
+        status: "uploading",
+        progress: 0,
+        media: null,
+        error: null
+      }));
+      setItems((current) => [...current, ...queued]);
+      const limit = limitRef.current;
+      if (!limit) {
+        return Promise.resolve([]);
       }
+      const settlements = queued.map((item) => {
+        const controller = new AbortController();
+        controllers.current.set(item.id, controller);
+        return limit(() => {
+          if (controller.signal.aborted) {
+            throw new DOMException("Upload aborted", "AbortError");
+          }
+          return runUpload(client, item.file, uploadOptions, controller.signal, {
+            onProgress: (progress) => patch(item.id, { progress }),
+            onProcessing: () => patch(item.id, { status: "processing" }),
+            // Live server progress (stage + percent) each poll tick.
+            onPoll: (media) => patch(item.id, { media })
+          });
+        }).then((settled) => {
+          patch(item.id, {
+            status: settled.status === "failed" ? "failed" : "ready",
+            media: settled,
+            progress: 1
+          });
+          queryClient.setQueryData(mediaKeys.detail(settled.id), settled);
+          void queryClient.invalidateQueries({ queryKey: mediaKeys.lists() });
+          return settled;
+        }).catch((error) => {
+          if (controller.signal.aborted) {
+            return null;
+          }
+          patch(item.id, { status: "failed", error });
+          return null;
+        }).finally(() => {
+          controllers.current.delete(item.id);
+        });
+      });
+      return Promise.all(settlements).then(
+        (results) => results.filter((result) => result !== null)
+      );
     },
-    [client, queryClient]
+    [client, queryClient, patch]
   );
-  const cancel = react.useCallback(() => abortRef.current?.abort(), []);
+  const remove = react.useCallback((id) => {
+    controllers.current.get(id)?.abort();
+    controllers.current.delete(id);
+    setItems((current) => current.filter((item) => item.id !== id));
+  }, []);
   const reset = react.useCallback(() => {
-    setStatus("idle");
-    setProgress(0);
-    setMedia(null);
-    setError(null);
+    controllers.current.forEach((controller) => controller.abort());
+    controllers.current.clear();
+    setItems([]);
   }, []);
-  return { upload, cancel, reset, status, progress, media, error };
+  const ready = items.flatMap(
+    (item) => item.status === "ready" && item.media ? [item.media] : []
+  );
+  const isUploading = items.some(
+    (item) => item.status === "uploading" || item.status === "processing"
+  );
+  return { items, ready, isUploading, add, remove, reset };
 }
 function useMedia(id) {
   const { client, queryClient } = usePostrun();
@@ -1326,6 +1589,7 @@ function LinkedInPostPreviewImpl({
 }
 var LinkedInPostPreview = react.memo(LinkedInPostPreviewImpl);
 
+exports.Connect = Connect;
 exports.LinkedInPostPreview = LinkedInPostPreview;
 exports.PostrunProvider = PostrunProvider;
 exports.UploadError = UploadError;