@knocklabs/react-core 0.2.7 → 0.2.9

package/dist/esm/modules/slack/hooks/useSlackChannels.mjs

@@ -1,51 +1,49 @@
-import { useKnockSlackClient as s } from "../context/KnockSlackProvider.mjs";
-import { useMemo as N, useEffect as E } from "react";
+import { useKnockSlackClient as L } from "../context/KnockSlackProvider.mjs";
+import { useMemo as N, useEffect as g } from "react";
 import "../../i18n/context/KnockI18nProvider.mjs";
-import { useInfiniteQuery as I } from "@tanstack/react-query";
-import { useKnockClient as S } from "../../core/context/KnockProvider.mjs";
+import A from "swr/infinite";
+import { useKnockClient as I } from "../../core/context/KnockProvider.mjs";
 import "@knocklabs/client";
 import "date-fns";
-const M = 1e3, d = 200, A = "private_channel,public_channel";
+const P = 1e3, K = 200, M = "private_channel,public_channel", u = "SLACK_CHANNELS";
+function z(n, e) {
+  return n === 0 ? [u, ""] : e && ["", null].includes(e.next_cursor) ? null : [u, e.next_cursor];
+}
 function G({
-  queryOptions: c
+  queryOptions: n
 }) {
-  const k = S(), { knockSlackChannelId: C, tenant: _, connectionStatus: r } = s(), u = ({ pageParam: n }) => k.slack.getChannels({
-    tenant: _,
-    knockChannelId: C,
+  var C, _;
+  const e = I(), {
+    knockSlackChannelId: S,
+    tenant: d,
+    connectionStatus: a
+  } = L(), x = (c) => e.slack.getChannels({
+    tenant: d,
+    knockChannelId: S,
     queryOptions: {
-      ...c,
-      cursor: n,
-      limit: (c == null ? void 0 : c.limitPerPage) || d,
-      types: (c == null ? void 0 : c.types) || A
+      ...n,
+      cursor: c ? c[1] : "",
+      limit: (n == null ? void 0 : n.limitPerPage) || K,
+      types: (n == null ? void 0 : n.types) || M
     }
   }), {
     data: t,
-    isLoading: x,
-    isFetching: m,
-    fetchNextPage: f,
-    hasNextPage: i,
-    refetch: a,
-    error: h
-  } = I({
-    queryKey: ["slackChannels"],
-    queryFn: u,
-    initialPageParam: "",
-    getNextPageParam: (n) => (n == null ? void 0 : n.next_cursor) === "" ? null : n == null ? void 0 : n.next_cursor
-  }), e = N(() => {
-    var n;
-    return ((n = t == null ? void 0 : t.pages) == null ? void 0 : n.flatMap((o) => o == null ? void 0 : o.slack_channels).filter((o) => !!o)) || [];
-  }, [t == null ? void 0 : t.pages]), l = (c == null ? void 0 : c.maxCount) || M;
-  return E(() => {
-    r === "connected" && !h && i && !m && (e == null ? void 0 : e.length) < l && f();
-  }, [
-    e == null ? void 0 : e.length,
-    f,
-    i,
-    m,
-    l,
-    h,
-    r
-  ]), { data: e, isLoading: x, refetch: a };
+    error: i,
+    isLoading: l,
+    isValidating: o,
+    size: f,
+    setSize: m,
+    mutate: E
+  } = A(z, x, {
+    initialSize: 0
+  }), s = (t == null ? void 0 : t.length) || 0, h = s === 0 || t && ((C = t[s]) == null ? void 0 : C.next_cursor) && ((_ = t[s]) == null ? void 0 : _.next_cursor) !== "", r = N(() => (t ?? []).flatMap((c) => c == null ? void 0 : c.slack_channels).filter((c) => !!c), [t]), k = (n == null ? void 0 : n.maxCount) || P;
+  return g(() => {
+    a === "connected" && !i && h && !l && !o && r.length < k && m(f + 1);
+  }, [r.length, m, f, h, l, o, k, i, a]), {
+    data: r,
+    isLoading: l || o,
+    refetch: () => E()
+  };
 }
 export {
   G as default

package/dist/esm/modules/slack/hooks/useSlackChannels.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSlackChannels.mjs","sources":["../../../../../src/modules/slack/hooks/useSlackChannels.ts"],"sourcesContent":["import { SlackChannelQueryOptions, useKnockSlackClient } from \"..\";\nimport { SlackChannel } from \"@knocklabs/client\";\nimport { useInfiniteQuery } from \"@tanstack/react-query\";\nimport { useEffect, useMemo } from \"react\";\n\nimport { useKnockClient } from \"../../core\";\n\nconst MAX_COUNT = 1000;\nconst LIMIT_PER_PAGE = 200;\nconst CHANNEL_TYPES = \"private_channel,public_channel\";\n\ntype UseSlackChannelsProps = {\n  queryOptions?: SlackChannelQueryOptions;\n};\n\ntype UseSlackChannelOutput = {\n  data: SlackChannel[];\n  isLoading: boolean;\n  refetch: () => void;\n};\n\nfunction useSlackChannels({\n  queryOptions,\n}: UseSlackChannelsProps): UseSlackChannelOutput {\n  const knock = useKnockClient();\n  const { knockSlackChannelId, tenant, connectionStatus } =\n    useKnockSlackClient();\n\n  const fetchChannels = ({ pageParam }: { pageParam: string }) => {\n    return knock.slack.getChannels({\n      tenant,\n      knockChannelId: knockSlackChannelId,\n      queryOptions: {\n        ...queryOptions,\n        cursor: pageParam,\n        limit: queryOptions?.limitPerPage || LIMIT_PER_PAGE,\n        types: queryOptions?.types || CHANNEL_TYPES,\n      },\n    });\n  };\n\n  const {\n    data,\n    isLoading,\n    isFetching,\n    fetchNextPage,\n    hasNextPage,\n    refetch,\n    error,\n  } = useInfiniteQuery({\n    queryKey: [\"slackChannels\"],\n    queryFn: fetchChannels,\n    initialPageParam: \"\",\n    getNextPageParam: (lastPage) =>\n      lastPage?.next_cursor === \"\" ? null : lastPage?.next_cursor,\n  });\n\n  const slackChannels = useMemo(() => {\n    return (\n      data?.pages\n        ?.flatMap((page) => page?.slack_channels)\n        .filter((channel) => !!channel) || []\n    );\n  }, [data?.pages]);\n\n  const maxCount = queryOptions?.maxCount || MAX_COUNT;\n\n  useEffect(() => {\n    if (\n      connectionStatus === \"connected\" &&\n      !error &&\n      hasNextPage &&\n      !isFetching &&\n      slackChannels?.length < maxCount\n    ) {\n      fetchNextPage();\n    }\n  }, [\n    slackChannels?.length,\n    fetchNextPage,\n    hasNextPage,\n    isFetching,\n    maxCount,\n    error,\n    connectionStatus,\n  ]);\n\n  return { data: slackChannels, isLoading, refetch };\n}\n\nexport default useSlackChannels;\n"],"names":["MAX_COUNT","LIMIT_PER_PAGE","CHANNEL_TYPES","useSlackChannels","queryOptions","knock","useKnockClient","knockSlackChannelId","tenant","connectionStatus","useKnockSlackClient","fetchChannels","pageParam","data","isLoading","isFetching","fetchNextPage","hasNextPage","refetch","error","useInfiniteQuery","lastPage","slackChannels","useMemo","_a","page","channel","maxCount","useEffect"],"mappings":";;;;;;;AAOA,MAAMA,IAAY,KACZC,IAAiB,KACjBC,IAAgB;AAYtB,SAASC,EAAiB;AAAA,EACxB,cAAAC;AACF,GAAiD;AAC/C,QAAMC,IAAQC,KACR,EAAE,qBAAAC,GAAqB,QAAAC,GAAQ,kBAAAC,MACnCC,EAAoB,GAEhBC,IAAgB,CAAC,EAAE,WAAAC,QAChBP,EAAM,MAAM,YAAY;AAAA,IAC7B,QAAAG;AAAA,IACA,gBAAgBD;AAAA,IAChB,cAAc;AAAA,MACZ,GAAGH;AAAA,MACH,QAAQQ;AAAA,MACR,QAAOR,KAAA,gBAAAA,EAAc,iBAAgBH;AAAA,MACrC,QAAOG,KAAA,gBAAAA,EAAc,UAASF;AAAA,IAChC;AAAA,EAAA,CACD,GAGG;AAAA,IACJ,MAAAW;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,MACEC,EAAiB;AAAA,IACnB,UAAU,CAAC,eAAe;AAAA,IAC1B,SAAST;AAAA,IACT,kBAAkB;AAAA,IAClB,kBAAkB,CAACU,OACjBA,KAAA,gBAAAA,EAAU,iBAAgB,KAAK,OAAOA,KAAA,gBAAAA,EAAU;AAAA,EAAA,CACnD,GAEKC,IAAgBC,EAAQ,MAAM;;AAClC,aACEC,IAAAX,KAAA,gBAAAA,EAAM,UAAN,gBAAAW,EACI,QAAQ,CAACC,MAASA,KAAA,gBAAAA,EAAM,gBACzB,OAAO,CAACC,MAAY,CAAC,CAACA,OAAY,CAAA;AAAA,EAAC,GAEvC,CAACb,KAAA,gBAAAA,EAAM,KAAK,CAAC,GAEVc,KAAWvB,KAAA,gBAAAA,EAAc,aAAYJ;AAE3C,SAAA4B,EAAU,MAAM;AAEZ,IAAAnB,MAAqB,eACrB,CAACU,KACDF,KACA,CAACF,MACDO,KAAA,gBAAAA,EAAe,UAASK,KAEVX;EAChB,GACC;AAAA,IACDM,KAAA,gBAAAA,EAAe;AAAA,IACfN;AAAA,IACAC;AAAA,IACAF;AAAA,IACAY;AAAA,IACAR;AAAA,IACAV;AAAA,EAAA,CACD,GAEM,EAAE,MAAMa,GAAe,WAAAR,GAAW,SAAAI,EAAQ;AACnD;"}
+{"version":3,"file":"useSlackChannels.mjs","sources":["../../../../../src/modules/slack/hooks/useSlackChannels.ts"],"sourcesContent":["import { SlackChannelQueryOptions, useKnockSlackClient } from \"..\";\nimport { GetSlackChannelsResponse, SlackChannel } from \"@knocklabs/client\";\nimport { useEffect, useMemo } from \"react\";\nimport useSWRInfinite from \"swr/infinite\";\n\nimport { useKnockClient } from \"../../core\";\n\nconst MAX_COUNT = 1000;\nconst LIMIT_PER_PAGE = 200;\nconst CHANNEL_TYPES = \"private_channel,public_channel\";\n\nconst QUERY_KEY = \"SLACK_CHANNELS\";\n\ntype UseSlackChannelsProps = {\n  queryOptions?: SlackChannelQueryOptions;\n};\n\ntype UseSlackChannelOutput = {\n  data: SlackChannel[];\n  isLoading: boolean;\n  refetch: () => void;\n};\n\ntype QueryKey = [key: string, cursor: string] | null;\n\nfunction getQueryKey(\n  pageIndex: number,\n  previousPageData: GetSlackChannelsResponse,\n): QueryKey {\n  // First page so just pass empty\n  if (pageIndex === 0) {\n    return [QUERY_KEY, \"\"];\n  }\n\n  // If there's no more data then return an empty next cursor\n  if (previousPageData && [\"\", null].includes(previousPageData.next_cursor)) {\n    return null;\n  }\n\n  // Next cursor exists so pass it\n  return [QUERY_KEY, previousPageData.next_cursor];\n}\n\nfunction useSlackChannels({\n  queryOptions,\n}: UseSlackChannelsProps): UseSlackChannelOutput {\n  const knock = useKnockClient();\n  const { knockSlackChannelId, tenant, connectionStatus } =\n    useKnockSlackClient();\n\n  const fetchChannels = (queryKey: QueryKey) => {\n    return knock.slack.getChannels({\n      tenant,\n      knockChannelId: knockSlackChannelId,\n      queryOptions: {\n        ...queryOptions,\n        cursor: queryKey ? queryKey[1] : \"\",\n        limit: queryOptions?.limitPerPage || LIMIT_PER_PAGE,\n        types: queryOptions?.types || CHANNEL_TYPES,\n      },\n    });\n  };\n\n  const { data, error, isLoading, isValidating, size, setSize, mutate } =\n    useSWRInfinite<GetSlackChannelsResponse>(getQueryKey, fetchChannels, {\n      initialSize: 0,\n    });\n\n  const currentPage = data?.length || 0;\n\n  const hasNextPage =\n    currentPage === 0 ||\n    (data &&\n      data[currentPage]?.next_cursor &&\n      data[currentPage]?.next_cursor !== \"\");\n\n  const slackChannels: SlackChannel[] = useMemo(\n    () =>\n      (data ?? [])\n        .flatMap((page) => page?.slack_channels)\n        .filter((channel) => !!channel),\n    [data],\n  );\n\n  const maxCount = queryOptions?.maxCount || MAX_COUNT;\n\n  useEffect(() => {\n    if (\n      connectionStatus === \"connected\" &&\n      !error &&\n      hasNextPage &&\n      !isLoading &&\n      !isValidating &&\n      slackChannels.length < maxCount\n    ) {\n      // Fetch a page at a time until we have nothing else left to fetch\n      // or we've already hit the max amount of channels to fetch\n      setSize(size + 1);\n    }\n  }, [\n    slackChannels.length,\n    setSize,\n    size,\n    hasNextPage,\n    isLoading,\n    isValidating,\n    maxCount,\n    error,\n    connectionStatus,\n  ]);\n\n  return {\n    data: slackChannels,\n    isLoading: isLoading || isValidating,\n    refetch: () => mutate(),\n  };\n}\n\nexport default useSlackChannels;\n"],"names":["MAX_COUNT","LIMIT_PER_PAGE","CHANNEL_TYPES","QUERY_KEY","getQueryKey","pageIndex","previousPageData","includes","next_cursor","useSlackChannels","queryOptions","knock","useKnockClient","knockSlackChannelId","tenant","connectionStatus","useKnockSlackClient","fetchChannels","queryKey","slack","getChannels","knockChannelId","cursor","limit","limitPerPage","types","data","error","isLoading","isValidating","size","setSize","mutate","useSWRInfinite","initialSize","currentPage","length","hasNextPage","slackChannels","useMemo","flatMap","page","slack_channels","filter","channel","maxCount","useEffect","refetch"],"mappings":";;;;;;;AAOA,MAAMA,IAAY,KACZC,IAAiB,KACjBC,IAAgB,kCAEhBC,IAAY;AAclB,SAASC,EACPC,GACAC,GACU;AAEV,SAAID,MAAc,IACT,CAACF,GAAW,EAAE,IAInBG,KAAoB,CAAC,IAAI,IAAI,EAAEC,SAASD,EAAiBE,WAAW,IAC/D,OAIF,CAACL,GAAWG,EAAiBE,WAAW;AACjD;AAEA,SAASC,EAAiB;AAAA,EACxBC,cAAAA;AACqB,GAA0B;;AAC/C,QAAMC,IAAQC,KACR;AAAA,IAAEC,qBAAAA;AAAAA,IAAqBC,QAAAA;AAAAA,IAAQC,kBAAAA;AAAAA,MACnCC,EAAoB,GAEhBC,IAAgBA,CAACC,MACdP,EAAMQ,MAAMC,YAAY;AAAA,IAC7BN,QAAAA;AAAAA,IACAO,gBAAgBR;AAAAA,IAChBH,cAAc;AAAA,MACZ,GAAGA;AAAAA,MACHY,QAAQJ,IAAWA,EAAS,CAAC,IAAI;AAAA,MACjCK,QAAOb,KAAAA,gBAAAA,EAAcc,iBAAgBvB;AAAAA,MACrCwB,QAAOf,KAAAA,gBAAAA,EAAce,UAASvB;AAAAA,IAChC;AAAA,EAAA,CACD,GAGG;AAAA,IAAEwB,MAAAA;AAAAA,IAAMC,OAAAA;AAAAA,IAAOC,WAAAA;AAAAA,IAAWC,cAAAA;AAAAA,IAAcC,MAAAA;AAAAA,IAAMC,SAAAA;AAAAA,IAASC,QAAAA;AAAAA,EAAAA,IAC3DC,EAAyC7B,GAAaa,GAAe;AAAA,IACnEiB,aAAa;AAAA,EAAA,CACd,GAEGC,KAAcT,KAAAA,gBAAAA,EAAMU,WAAU,GAE9BC,IACJF,MAAgB,KACfT,OACCA,IAAAA,EAAKS,CAAW,MAAhBT,gBAAAA,EAAmBlB,kBACnBkB,IAAAA,EAAKS,CAAW,MAAhBT,gBAAAA,EAAmBlB,iBAAgB,IAEjC8B,IAAgCC,EACpC,OACGb,KAAQ,IACNc,QAASC,CAASA,MAAAA,KAAAA,gBAAAA,EAAMC,cAAc,EACtCC,OAAQC,OAAY,CAAC,CAACA,CAAO,GAClC,CAAClB,CAAI,CACP,GAEMmB,KAAWnC,KAAAA,gBAAAA,EAAcmC,aAAY7C;AAE3C8C,SAAAA,EAAU,MAAM;AAEZ/B,IAAAA,MAAqB,eACrB,CAACY,KACDU,KACA,CAACT,KACD,CAACC,KACDS,EAAcF,SAASS,KAIvBd,EAAQD,IAAO,CAAC;AAAA,EAEjB,GAAA,CACDQ,EAAcF,QACdL,GACAD,GACAO,GACAT,GACAC,GACAgB,GACAlB,GACAZ,CAAgB,CACjB,GAEM;AAAA,IACLW,MAAMY;AAAAA,IACNV,WAAWA,KAAaC;AAAAA,IACxBkB,SAASA,MAAMf,EAAO;AAAA,EAAA;AAE1B;"}

package/dist/esm/modules/slack/hooks/useSlackConnectionStatus.mjs

@@ -6,7 +6,9 @@ const C = (o) => {
   return e == null ? void 0 : e.concat(c).replace("_", " ");
 };
 function y(o, e, c) {
-  const { t: a } = A(), [r, n] = s("connecting"), [p, i] = s(null), [b, m] = s(null);
+  const {
+    t: a
+  } = A(), [r, n] = s("connecting"), [p, i] = s(null), [b, m] = s(null);
   return g(() => {
     (async () => {
       var u, l, f, k, S, d, h;

package/dist/esm/modules/slack/hooks/useSlackConnectionStatus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSlackConnectionStatus.mjs","sources":["../../../../../src/modules/slack/hooks/useSlackConnectionStatus.ts"],"sourcesContent":["import Knock from \"@knocklabs/client\";\nimport { useEffect, useState } from \"react\";\n\nimport { useTranslations } from \"../../i18n\";\n\nexport type ConnectionStatus =\n  | \"connecting\"\n  | \"connected\"\n  | \"disconnected\"\n  | \"error\"\n  | \"disconnecting\";\n\ntype UseSlackConnectionStatusOutput = {\n  connectionStatus: ConnectionStatus;\n  setConnectionStatus: (status: ConnectionStatus) => void;\n  errorLabel: string | null;\n  setErrorLabel: (errorLabel: string) => void;\n  actionLabel: string | null;\n  setActionLabel: (actionLabel: string | null) => void;\n};\n\n/**\n * Transforms a slack error message into\n * a formatted one. Slack error messages: https://api.slack.com/methods/auth.test#errors\n *\n * Ex.: \"account_inactive\" -> \"Account inactive\"\n */\nconst formatSlackErrorMessage = (errorMessage: string) => {\n  const firstLetter = errorMessage.substring(0, 1).toUpperCase();\n  const rest = errorMessage.substring(1);\n  return firstLetter?.concat(rest).replace(\"_\", \" \");\n};\n\nfunction useSlackConnectionStatus(\n  knock: Knock,\n  knockSlackChannelId: string,\n  tenant: string,\n): UseSlackConnectionStatusOutput {\n  const { t } = useTranslations();\n  const [connectionStatus, setConnectionStatus] =\n    useState<ConnectionStatus>(\"connecting\");\n  const [errorLabel, setErrorLabel] = useState<string | null>(null);\n  const [actionLabel, setActionLabel] = useState<string | null>(null);\n\n  useEffect(() => {\n    const checkAuthStatus = async () => {\n      if (connectionStatus !== \"connecting\") return;\n\n      try {\n        const authRes = await knock.slack.authCheck({\n          tenant,\n          knockChannelId: knockSlackChannelId,\n        });\n\n        if (authRes.connection?.ok) {\n          return setConnectionStatus(\"connected\");\n        }\n\n        if (!authRes.connection?.ok) {\n          return setConnectionStatus(\"disconnected\");\n        }\n\n        // This is a normal response for a tenant that doesn't have an access\n        // token set on it, meaning it's not connected to Slack, so we\n        // give it a \"disconnected\" status instead of an error status.\n        if (\n          authRes.code === \"ERR_BAD_REQUEST\" &&\n          authRes.response?.data?.message === t(\"slackAccessTokenNotSet\")\n        ) {\n          return setConnectionStatus(\"disconnected\");\n        }\n\n        // This is for an error coming directly from Slack.\n        if (!authRes.connection?.ok && authRes.connection?.error) {\n          const errorLabel = formatSlackErrorMessage(authRes.connection?.error);\n          setErrorLabel(errorLabel);\n          setConnectionStatus(\"error\");\n          return;\n        }\n\n        // This is for any Knock errors that would require a reconnect.\n\n        setConnectionStatus(\"error\");\n      } catch (error) {\n        setConnectionStatus(\"error\");\n      }\n    };\n\n    checkAuthStatus();\n  }, [connectionStatus, tenant, knockSlackChannelId, knock.slack, t]);\n\n  return {\n    connectionStatus,\n    setConnectionStatus,\n    errorLabel,\n    setErrorLabel,\n    actionLabel,\n    setActionLabel,\n  };\n}\n\nexport default useSlackConnectionStatus;\n"],"names":["formatSlackErrorMessage","errorMessage","firstLetter","rest","useSlackConnectionStatus","knock","knockSlackChannelId","tenant","t","useTranslations","connectionStatus","setConnectionStatus","useState","errorLabel","setErrorLabel","actionLabel","setActionLabel","useEffect","authRes","_a","_b","_d","_c","_e","_f","_g"],"mappings":";;;AA2BA,MAAMA,IAA0B,CAACC,MAAyB;AACxD,QAAMC,IAAcD,EAAa,UAAU,GAAG,CAAC,EAAE,eAC3CE,IAAOF,EAAa,UAAU,CAAC;AACrC,SAAOC,KAAA,gBAAAA,EAAa,OAAOC,GAAM,QAAQ,KAAK;AAChD;AAEA,SAASC,EACPC,GACAC,GACAC,GACgC;AAC1B,QAAA,EAAE,GAAAC,MAAMC,KACR,CAACC,GAAkBC,CAAmB,IAC1CC,EAA2B,YAAY,GACnC,CAACC,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAC1D,CAACG,GAAaC,CAAc,IAAIJ,EAAwB,IAAI;AAElE,SAAAK,EAAU,MAAM;AA4CE,KA3CQ,YAAY;;AAClC,UAAIP,MAAqB;AAErB,YAAA;AACF,gBAAMQ,IAAU,MAAMb,EAAM,MAAM,UAAU;AAAA,YAC1C,QAAAE;AAAA,YACA,gBAAgBD;AAAA,UAAA,CACjB;AAEG,eAAAa,IAAAD,EAAQ,eAAR,QAAAC,EAAoB;AACtB,mBAAOR,EAAoB,WAAW;AAWtC,cARE,GAACS,IAAAF,EAAQ,eAAR,QAAAE,EAAoB,OAQvBF,EAAQ,SAAS,uBACjBG,KAAAC,IAAAJ,EAAQ,aAAR,gBAAAI,EAAkB,SAAlB,gBAAAD,EAAwB,aAAYb,EAAE,wBAAwB;AAE9D,mBAAOG,EAAoB,cAAc;AAI3C,cAAI,GAACY,IAAAL,EAAQ,eAAR,QAAAK,EAAoB,SAAMC,IAAAN,EAAQ,eAAR,QAAAM,EAAoB,QAAO;AACxD,kBAAMX,IAAab,GAAwByB,IAAAP,EAAQ,eAAR,gBAAAO,EAAoB,KAAK;AACpE,YAAAX,EAAcD,CAAU,GACxBF,EAAoB,OAAO;AAC3B;AAAA,UACF;AAIA,UAAAA,EAAoB,OAAO;AAAA,gBACb;AACd,UAAAA,EAAoB,OAAO;AAAA,QAC7B;AAAA,IAAA;EAGc,GACf,CAACD,GAAkBH,GAAQD,GAAqBD,EAAM,OAAOG,CAAC,CAAC,GAE3D;AAAA,IACL,kBAAAE;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAE;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useSlackConnectionStatus.mjs","sources":["../../../../../src/modules/slack/hooks/useSlackConnectionStatus.ts"],"sourcesContent":["import Knock from \"@knocklabs/client\";\nimport { useEffect, useState } from \"react\";\n\nimport { useTranslations } from \"../../i18n\";\n\nexport type ConnectionStatus =\n  | \"connecting\"\n  | \"connected\"\n  | \"disconnected\"\n  | \"error\"\n  | \"disconnecting\";\n\ntype UseSlackConnectionStatusOutput = {\n  connectionStatus: ConnectionStatus;\n  setConnectionStatus: (status: ConnectionStatus) => void;\n  errorLabel: string | null;\n  setErrorLabel: (errorLabel: string) => void;\n  actionLabel: string | null;\n  setActionLabel: (actionLabel: string | null) => void;\n};\n\n/**\n * Transforms a slack error message into\n * a formatted one. Slack error messages: https://api.slack.com/methods/auth.test#errors\n *\n * Ex.: \"account_inactive\" -> \"Account inactive\"\n */\nconst formatSlackErrorMessage = (errorMessage: string) => {\n  const firstLetter = errorMessage.substring(0, 1).toUpperCase();\n  const rest = errorMessage.substring(1);\n  return firstLetter?.concat(rest).replace(\"_\", \" \");\n};\n\nfunction useSlackConnectionStatus(\n  knock: Knock,\n  knockSlackChannelId: string,\n  tenant: string,\n): UseSlackConnectionStatusOutput {\n  const { t } = useTranslations();\n  const [connectionStatus, setConnectionStatus] =\n    useState<ConnectionStatus>(\"connecting\");\n  const [errorLabel, setErrorLabel] = useState<string | null>(null);\n  const [actionLabel, setActionLabel] = useState<string | null>(null);\n\n  useEffect(() => {\n    const checkAuthStatus = async () => {\n      if (connectionStatus !== \"connecting\") return;\n\n      try {\n        const authRes = await knock.slack.authCheck({\n          tenant,\n          knockChannelId: knockSlackChannelId,\n        });\n\n        if (authRes.connection?.ok) {\n          return setConnectionStatus(\"connected\");\n        }\n\n        if (!authRes.connection?.ok) {\n          return setConnectionStatus(\"disconnected\");\n        }\n\n        // This is a normal response for a tenant that doesn't have an access\n        // token set on it, meaning it's not connected to Slack, so we\n        // give it a \"disconnected\" status instead of an error status.\n        if (\n          authRes.code === \"ERR_BAD_REQUEST\" &&\n          authRes.response?.data?.message === t(\"slackAccessTokenNotSet\")\n        ) {\n          return setConnectionStatus(\"disconnected\");\n        }\n\n        // This is for an error coming directly from Slack.\n        if (!authRes.connection?.ok && authRes.connection?.error) {\n          const errorLabel = formatSlackErrorMessage(authRes.connection?.error);\n          setErrorLabel(errorLabel);\n          setConnectionStatus(\"error\");\n          return;\n        }\n\n        // This is for any Knock errors that would require a reconnect.\n\n        setConnectionStatus(\"error\");\n      } catch (error) {\n        setConnectionStatus(\"error\");\n      }\n    };\n\n    checkAuthStatus();\n  }, [connectionStatus, tenant, knockSlackChannelId, knock.slack, t]);\n\n  return {\n    connectionStatus,\n    setConnectionStatus,\n    errorLabel,\n    setErrorLabel,\n    actionLabel,\n    setActionLabel,\n  };\n}\n\nexport default useSlackConnectionStatus;\n"],"names":["formatSlackErrorMessage","errorMessage","firstLetter","substring","toUpperCase","rest","concat","replace","useSlackConnectionStatus","knock","knockSlackChannelId","tenant","t","useTranslations","connectionStatus","setConnectionStatus","useState","errorLabel","setErrorLabel","actionLabel","setActionLabel","useEffect","authRes","slack","authCheck","knockChannelId","connection","ok","code","response","data","message","error"],"mappings":";;;AA2BA,MAAMA,IAA0BA,CAACC,MAAyB;AACxD,QAAMC,IAAcD,EAAaE,UAAU,GAAG,CAAC,EAAEC,eAC3CC,IAAOJ,EAAaE,UAAU,CAAC;AACrC,SAAOD,KAAAA,gBAAAA,EAAaI,OAAOD,GAAME,QAAQ,KAAK;AAChD;AAEA,SAASC,EACPC,GACAC,GACAC,GACgC;AAC1B,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAgB,GACxB,CAACC,GAAkBC,CAAmB,IAC1CC,EAA2B,YAAY,GACnC,CAACC,GAAYC,CAAa,IAAIF,EAAwB,IAAI,GAC1D,CAACG,GAAaC,CAAc,IAAIJ,EAAwB,IAAI;AAElEK,SAAAA,EAAU,MAAM;AA4CE,KA3CQ,YAAY;;AAClC,UAAIP,MAAqB;AAErB,YAAA;AACF,gBAAMQ,IAAU,MAAMb,EAAMc,MAAMC,UAAU;AAAA,YAC1Cb,QAAAA;AAAAA,YACAc,gBAAgBf;AAAAA,UAAAA,CACjB;AAEGY,eAAAA,IAAAA,EAAQI,eAARJ,QAAAA,EAAoBK;AACtB,mBAAOZ,EAAoB,WAAW;AAWtCO,cARE,GAACA,IAAAA,EAAQI,eAARJ,QAAAA,EAAoBK,OAQvBL,EAAQM,SAAS,uBACjBN,KAAAA,IAAAA,EAAQO,aAARP,gBAAAA,EAAkBQ,SAAlBR,gBAAAA,EAAwBS,aAAYnB,EAAE,wBAAwB;AAE9D,mBAAOG,EAAoB,cAAc;AAI3C,cAAI,GAACO,IAAAA,EAAQI,eAARJ,QAAAA,EAAoBK,SAAML,IAAAA,EAAQI,eAARJ,QAAAA,EAAoBU,QAAO;AACxD,kBAAMf,IAAajB,GAAwBsB,IAAAA,EAAQI,eAARJ,gBAAAA,EAAoBU,KAAK;AACpEd,YAAAA,EAAcD,CAAU,GACxBF,EAAoB,OAAO;AAC3B;AAAA,UACF;AAIAA,UAAAA,EAAoB,OAAO;AAAA,gBACb;AACdA,UAAAA,EAAoB,OAAO;AAAA,QAC7B;AAAA,IAAA;EAGc,GACf,CAACD,GAAkBH,GAAQD,GAAqBD,EAAMc,OAAOX,CAAC,CAAC,GAE3D;AAAA,IACLE,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAE,YAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EAAAA;AAEJ;"}

package/dist/types/modules/slack/context/KnockSlackProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KnockSlackProvider.d.ts","sourceRoot":"","sources":["../../../../../src/modules/slack/context/KnockSlackProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAIrE,MAAM,WAAW,uBAAuB;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAKD,MAAM,WAAW,uBAAuB;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsChE,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAAO,uBAUtC,CAAC"}
+{"version":3,"file":"KnockSlackProvider.d.ts","sourceRoot":"","sources":["../../../../../src/modules/slack/context/KnockSlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAKD,MAAM,WAAW,uBAAuB;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsChE,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAAO,uBAUtC,CAAC"}

package/dist/types/modules/slack/hooks/useSlackChannels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSlackChannels.d.ts","sourceRoot":"","sources":["../../../../../src/modules/slack/hooks/useSlackChannels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAuB,MAAM,IAAI,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUjD,KAAK,qBAAqB,GAAG;IAC3B,YAAY,CAAC,EAAE,wBAAwB,CAAC;CACzC,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,gBAAgB,CAAC,EACxB,YAAY,GACb,EAAE,qBAAqB,GAAG,qBAAqB,CAiE/C;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useSlackChannels.d.ts","sourceRoot":"","sources":["../../../../../src/modules/slack/hooks/useSlackChannels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAuB,MAAM,IAAI,CAAC;AACnE,OAAO,EAA4B,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAY3E,KAAK,qBAAqB,GAAG;IAC3B,YAAY,CAAC,EAAE,wBAAwB,CAAC;CACzC,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAsBF,iBAAS,gBAAgB,CAAC,EACxB,YAAY,GACb,EAAE,qBAAqB,GAAG,qBAAqB,CAuE/C;AAED,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@knocklabs/react-core",
   "description": "A set of React components to build notification experiences powered by Knock",
   "author": "@knocklabs",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.mjs",
@@ -45,12 +45,12 @@
     "url": "https://github.com/knocklabs/javascript/issues"
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@knocklabs/client": "^0.10.0",
-    "@tanstack/react-query": "^5.18.1",
+    "@knocklabs/client": "^0.10.1",
     "date-fns": "^3.3.1",
+    "swr": "^2.2.5",
     "zustand": "^3.7.2"
   },
   "devDependencies": {
@@ -59,6 +59,7 @@
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "^4.2.0",
+    "babel-plugin-react-require": "^4.0.2",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",

package/src/modules/slack/context/KnockSlackProvider.tsx

@@ -1,13 +1,10 @@
 import { useSlackConnectionStatus } from "..";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as React from "react";
 
 import { slackProviderKey } from "../../core";
 import { useKnockClient } from "../../core";
 import { ConnectionStatus } from "../hooks/useSlackConnectionStatus";
 
-const queryClient = new QueryClient();
-
 export interface KnockSlackProviderState {
   knockSlackChannelId: string;
   tenant: string;
@@ -63,7 +60,7 @@ export const KnockSlackProvider: React.FC<KnockSlackProviderProps> = ({
         tenant,
       }}
     >
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      {children}
     </SlackProviderStateContext.Provider>
   );
 };

package/src/modules/slack/hooks/useSlackChannels.ts

@@ -1,7 +1,7 @@
 import { SlackChannelQueryOptions, useKnockSlackClient } from "..";
-import { SlackChannel } from "@knocklabs/client";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { GetSlackChannelsResponse, SlackChannel } from "@knocklabs/client";
 import { useEffect, useMemo } from "react";
+import useSWRInfinite from "swr/infinite";
 
 import { useKnockClient } from "../../core";
 
@@ -9,6 +9,8 @@ const MAX_COUNT = 1000;
 const LIMIT_PER_PAGE = 200;
 const CHANNEL_TYPES = "private_channel,public_channel";
 
+const QUERY_KEY = "SLACK_CHANNELS";
+
 type UseSlackChannelsProps = {
   queryOptions?: SlackChannelQueryOptions;
 };
@@ -19,6 +21,26 @@ type UseSlackChannelOutput = {
   refetch: () => void;
 };
 
+type QueryKey = [key: string, cursor: string] | null;
+
+function getQueryKey(
+  pageIndex: number,
+  previousPageData: GetSlackChannelsResponse,
+): QueryKey {
+  // First page so just pass empty
+  if (pageIndex === 0) {
+    return [QUERY_KEY, ""];
+  }
+
+  // If there's no more data then return an empty next cursor
+  if (previousPageData && ["", null].includes(previousPageData.next_cursor)) {
+    return null;
+  }
+
+  // Next cursor exists so pass it
+  return [QUERY_KEY, previousPageData.next_cursor];
+}
+
 function useSlackChannels({
   queryOptions,
 }: UseSlackChannelsProps): UseSlackChannelOutput {
@@ -26,42 +48,39 @@ function useSlackChannels({
   const { knockSlackChannelId, tenant, connectionStatus } =
     useKnockSlackClient();
 
-  const fetchChannels = ({ pageParam }: { pageParam: string }) => {
+  const fetchChannels = (queryKey: QueryKey) => {
     return knock.slack.getChannels({
       tenant,
       knockChannelId: knockSlackChannelId,
       queryOptions: {
         ...queryOptions,
-        cursor: pageParam,
+        cursor: queryKey ? queryKey[1] : "",
         limit: queryOptions?.limitPerPage || LIMIT_PER_PAGE,
         types: queryOptions?.types || CHANNEL_TYPES,
       },
     });
   };
 
-  const {
-    data,
-    isLoading,
-    isFetching,
-    fetchNextPage,
-    hasNextPage,
-    refetch,
-    error,
-  } = useInfiniteQuery({
-    queryKey: ["slackChannels"],
-    queryFn: fetchChannels,
-    initialPageParam: "",
-    getNextPageParam: (lastPage) =>
-      lastPage?.next_cursor === "" ? null : lastPage?.next_cursor,
-  });
-
-  const slackChannels = useMemo(() => {
-    return (
-      data?.pages
-        ?.flatMap((page) => page?.slack_channels)
-        .filter((channel) => !!channel) || []
-    );
-  }, [data?.pages]);
+  const { data, error, isLoading, isValidating, size, setSize, mutate } =
+    useSWRInfinite<GetSlackChannelsResponse>(getQueryKey, fetchChannels, {
+      initialSize: 0,
+    });
+
+  const currentPage = data?.length || 0;
+
+  const hasNextPage =
+    currentPage === 0 ||
+    (data &&
+      data[currentPage]?.next_cursor &&
+      data[currentPage]?.next_cursor !== "");
+
+  const slackChannels: SlackChannel[] = useMemo(
+    () =>
+      (data ?? [])
+        .flatMap((page) => page?.slack_channels)
+        .filter((channel) => !!channel),
+    [data],
+  );
 
   const maxCount = queryOptions?.maxCount || MAX_COUNT;
 
@@ -70,22 +89,31 @@ function useSlackChannels({
       connectionStatus === "connected" &&
       !error &&
       hasNextPage &&
-      !isFetching &&
-      slackChannels?.length < maxCount
+      !isLoading &&
+      !isValidating &&
+      slackChannels.length < maxCount
     ) {
-      fetchNextPage();
+      // Fetch a page at a time until we have nothing else left to fetch
+      // or we've already hit the max amount of channels to fetch
+      setSize(size + 1);
     }
   }, [
-    slackChannels?.length,
-    fetchNextPage,
+    slackChannels.length,
+    setSize,
+    size,
     hasNextPage,
-    isFetching,
+    isLoading,
+    isValidating,
     maxCount,
     error,
     connectionStatus,
   ]);
 
-  return { data: slackChannels, isLoading, refetch };
+  return {
+    data: slackChannels,
+    isLoading: isLoading || isValidating,
+    refetch: () => mutate(),
+  };
 }
 
 export default useSlackChannels;