@postrun/react 0.1.0 → 1.0.0

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);
 
@@ -98,7 +102,8 @@ var profileKeys = {
   list: (query) => [...profileKeys.lists(), query ?? {}],
   // Nested under lists() so a create/update/delete invalidating lists() also
   // refreshes the infinite cache; distinct tail so the two cache shapes (a
-  // single Page vs accumulated pages) never collide on one key.
+  // single Page vs accumulated pages) never collide on one key. The filter omits
+  // limit/offset — the infinite hook owns pagination, so they never key the cache.
   infinite: (query) => [...profileKeys.lists(), "infinite", query ?? {}],
   details: () => [...profileKeys.all, "detail"],
   detail: (id) => [...profileKeys.details(), id]
@@ -109,20 +114,28 @@ var postKeys = {
   list: (query) => [...postKeys.lists(), query ?? {}],
   // Nested under lists() so a create/update/delete invalidating lists() also
   // refreshes the infinite cache; distinct tail so the two cache shapes (a
-  // single Page vs accumulated pages) never collide on one key.
+  // single Page vs accumulated pages) never collide on one key. The filter omits
+  // limit/offset — the infinite hook owns pagination, so they never key the cache.
   infinite: (query) => [...postKeys.lists(), "infinite", query ?? {}],
   details: () => [...postKeys.all, "detail"],
   detail: (id) => [...postKeys.details(), id]
 };
 var mediaKeys = {
   all: [ROOT, "media"],
+  lists: () => [...mediaKeys.all, "list"],
+  list: (query) => [...mediaKeys.lists(), query ?? {}],
+  // Nested under lists() so an upload/update/delete invalidating lists() also
+  // refreshes the infinite cache; distinct tail so the two cache shapes (a
+  // single Page vs accumulated pages) never collide on one key. The filter omits
+  // limit/offset — the infinite hook owns pagination, so they never key the cache.
+  infinite: (query) => [...mediaKeys.lists(), "infinite", query ?? {}],
   details: () => [...mediaKeys.all, "detail"],
   detail: (id) => [...mediaKeys.details(), id]
 };
 var connectionKeys = {
   all: [ROOT, "connections"],
   lists: () => [...connectionKeys.all, "list"],
-  list: (profileId) => [...connectionKeys.lists(), profileId],
+  list: (profileId, filter) => [...connectionKeys.lists(), profileId, filter ?? {}],
   details: () => [...connectionKeys.all, "detail"],
   detail: (id) => [...connectionKeys.details(), id],
   accounts: (id) => [...connectionKeys.all, "accounts", id]
@@ -194,36 +207,256 @@ 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.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) {
+function useConnections(profileId, filter) {
   const { client, queryClient } = usePostrun();
   return reactQuery.useQuery(
     {
-      queryKey: connectionKeys.list(profileId),
-      queryFn: async () => (await js.connectionsListByProfile({ client, path: { id: profileId } })).data,
+      queryKey: connectionKeys.list(profileId, filter),
+      queryFn: async () => (await js.connectionsListByProfile({
+        client,
+        path: { id: profileId },
+        query: filter
+      })).data,
       enabled: Boolean(profileId)
     },
     queryClient
@@ -278,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) {
@@ -318,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 () => {
@@ -336,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 }
@@ -345,92 +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);
-        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();
@@ -447,12 +724,33 @@ function useMedia(id) {
     queryClient
   );
 }
+function useMediaList(query) {
+  const { client, queryClient } = usePostrun();
+  return reactQuery.useQuery(
+    {
+      queryKey: mediaKeys.list(query),
+      queryFn: async () => (await js.mediaList({ client, query })).data
+    },
+    queryClient
+  );
+}
+function useMediaInfinite(filters, options) {
+  const { client } = usePostrun();
+  return useInfiniteList({
+    queryKey: mediaKeys.infinite(filters),
+    limit: options?.pageSize,
+    fetchPage: async ({ limit, offset }) => (await js.mediaList({ client, query: { ...filters, limit, offset } })).data
+  });
+}
 function useUpdateMedia() {
   const { client, queryClient } = usePostrun();
   return reactQuery.useMutation(
     {
       mutationFn: async ({ id, ...body }) => (await js.mediaUpdate({ client, path: { id }, body })).data,
-      onSuccess: (result, { id }) => queryClient.setQueryData(mediaKeys.detail(id), result)
+      onSuccess: (result, { id }) => {
+        queryClient.setQueryData(mediaKeys.detail(id), result);
+        void queryClient.invalidateQueries({ queryKey: mediaKeys.lists() });
+      }
     },
     queryClient
   );
@@ -462,7 +760,10 @@ function useDeleteMedia() {
   return reactQuery.useMutation(
     {
       mutationFn: async (id) => (await js.mediaDelete({ client, path: { id } })).data,
-      onSuccess: (_result, id) => queryClient.removeQueries({ queryKey: mediaKeys.detail(id) })
+      onSuccess: (_result, id) => {
+        queryClient.removeQueries({ queryKey: mediaKeys.detail(id) });
+        void queryClient.invalidateQueries({ queryKey: mediaKeys.lists() });
+      }
     },
     queryClient
   );
@@ -1288,6 +1589,7 @@ function LinkedInPostPreviewImpl({
 }
 var LinkedInPostPreview = react.memo(LinkedInPostPreviewImpl);
 
+exports.Connect = Connect;
 exports.LinkedInPostPreview = LinkedInPostPreview;
 exports.PostrunProvider = PostrunProvider;
 exports.UploadError = UploadError;
@@ -1309,6 +1611,8 @@ exports.useDisconnect = useDisconnect;
 exports.useDiscoverableAccounts = useDiscoverableAccounts;
 exports.useInfiniteList = useInfiniteList;
 exports.useMedia = useMedia;
+exports.useMediaInfinite = useMediaInfinite;
+exports.useMediaList = useMediaList;
 exports.useMediaUpload = useMediaUpload;
 exports.usePost = usePost;
 exports.usePostrun = usePostrun;