@knocklabs/react-core 0.3.1 → 0.3.3

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

@@ -3,6 +3,10 @@ import { ConnectionStatus } from '../hooks/useSlackConnectionStatus';
 import * as React from "react";
 export interface KnockSlackProviderState {
     knockSlackChannelId: string;
+    tenantId: string;
+    /**
+     * @deprecated Use `tenantId` instead. This field will be removed in a future release.
+     */
     tenant: string;
     connectionStatus: ConnectionStatus;
     setConnectionStatus: (connectionStatus: ConnectionStatus) => void;
@@ -11,10 +15,16 @@ export interface KnockSlackProviderState {
     actionLabel: string | null;
     setActionLabel: (label: string | null) => void;
 }
-export interface KnockSlackProviderProps {
+export type KnockSlackProviderProps = {
     knockSlackChannelId: string;
+    /**
+     * @deprecated Use `tenantId` instead. This field will be removed in a future release.
+     */
     tenant: string;
-}
+} | {
+    knockSlackChannelId: string;
+    tenantId: string;
+};
 export declare const KnockSlackProvider: React.FC<PropsWithChildren<KnockSlackProviderProps>>;
 export declare const useKnockSlackClient: () => KnockSlackProviderState;
 //# sourceMappingURL=KnockSlackProvider.d.ts.map

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":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1C,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;CAChB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,iBAAiB,CAAC,uBAAuB,CAAC,CAmC3C,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;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,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,MAAM,uBAAuB,GAC/B;IACE,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,GACD;IACE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEN,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,iBAAiB,CAAC,uBAAuB,CAAC,CAwC3C,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAAO,uBAUtC,CAAC"}

package/dist/types/modules/slack/hooks/useConnectedSlackChannels.d.ts

@@ -1,15 +1,15 @@
-import { ContainerObject } from '..';
 import { SlackChannelConnection } from '@knocklabs/client';
-type UseSlackChannelsProps = {
-    slackChannelsRecipientObject: ContainerObject;
+import { RecipientObject } from '../../..';
+type UseConnectedSlackChannelsProps = {
+    slackChannelsRecipientObject: RecipientObject;
 };
-type UseSlackChannelOutput = {
+type UseConnectedSlackChannelsOutput = {
     data: SlackChannelConnection[] | null;
-    updateConnectedChannels: (connectedChannels: SlackChannelConnection[]) => void;
+    updateConnectedChannels: (connectedChannels: SlackChannelConnection[]) => Promise<void>;
     loading: boolean;
     error: string | null;
     updating: boolean;
 };
-declare function useConnectedSlackChannels({ slackChannelsRecipientObject: { objectId, collection }, }: UseSlackChannelsProps): UseSlackChannelOutput;
+declare function useConnectedSlackChannels({ slackChannelsRecipientObject: { objectId, collection }, }: UseConnectedSlackChannelsProps): UseConnectedSlackChannelsOutput;
 export default useConnectedSlackChannels;
 //# sourceMappingURL=useConnectedSlackChannels.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useConnectedSlackChannels.d.ts","sourceRoot":"","sources":["../../../../../src/modules/slack/hooks/useConnectedSlackChannels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAuB,MAAM,IAAI,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAM3D,KAAK,qBAAqB,GAAG;IAC3B,4BAA4B,EAAE,eAAe,CAAC;CAC/C,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAC;IACtC,uBAAuB,EAAE,CACvB,iBAAiB,EAAE,sBAAsB,EAAE,KACxC,IAAI,CAAC;IACV,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,EACjC,4BAA4B,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GACvD,EAAE,qBAAqB,GAAG,qBAAqB,CA+E/C;AAED,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"useConnectedSlackChannels.d.ts","sourceRoot":"","sources":["../../../../../src/modules/slack/hooks/useConnectedSlackChannels.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAK3D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAM3C,KAAK,8BAA8B,GAAG;IACpC,4BAA4B,EAAE,eAAe,CAAC;CAC/C,CAAC;AAEF,KAAK,+BAA+B,GAAG;IACrC,IAAI,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAC;IACtC,uBAAuB,EAAE,CACvB,iBAAiB,EAAE,sBAAsB,EAAE,KACxC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,EACjC,4BAA4B,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GACvD,EAAE,8BAA8B,GAAG,+BAA+B,CAqElE;AAED,eAAe,yBAAyB,CAAC"}

package/dist/types/modules/slack/hooks/useSlackConnectionStatus.d.ts

@@ -8,6 +8,6 @@ type UseSlackConnectionStatusOutput = {
     actionLabel: string | null;
     setActionLabel: (actionLabel: string | null) => void;
 };
-declare function useSlackConnectionStatus(knock: Knock, knockSlackChannelId: string, tenant: string): UseSlackConnectionStatusOutput;
+declare function useSlackConnectionStatus(knock: Knock, knockSlackChannelId: string, tenantId: string): UseSlackConnectionStatusOutput;
 export default useSlackConnectionStatus;
 //# sourceMappingURL=useSlackConnectionStatus.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useSlackConnectionStatus.d.ts","sourceRoot":"","sources":["../../../../../src/modules/slack/hooks/useSlackConnectionStatus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAKtC,MAAM,MAAM,gBAAgB,GACxB,YAAY,GACZ,WAAW,GACX,cAAc,GACd,OAAO,GACP,eAAe,CAAC;AAEpB,KAAK,8BAA8B,GAAG;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,mBAAmB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD,CAAC;AAcF,iBAAS,wBAAwB,CAC/B,KAAK,EAAE,KAAK,EACZ,mBAAmB,EAAE,MAAM,EAC3B,MAAM,EAAE,MAAM,GACb,8BAA8B,CA8DhC;AAED,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"useSlackConnectionStatus.d.ts","sourceRoot":"","sources":["../../../../../src/modules/slack/hooks/useSlackConnectionStatus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAKtC,MAAM,MAAM,gBAAgB,GACxB,YAAY,GACZ,WAAW,GACX,cAAc,GACd,OAAO,GACP,eAAe,CAAC;AAEpB,KAAK,8BAA8B,GAAG;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,mBAAmB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD,CAAC;AAcF,iBAAS,wBAAwB,CAC/B,KAAK,EAAE,KAAK,EACZ,mBAAmB,EAAE,MAAM,EAC3B,QAAQ,EAAE,MAAM,GACf,8BAA8B,CA8DhC;AAED,eAAe,wBAAwB,CAAC"}

package/dist/types/modules/slack/index.d.ts

@@ -1,4 +1,4 @@
 export * from './context';
 export * from './hooks';
-export * from './constants';
+export * from './interfaces';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/modules/slack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/slack/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/slack/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/types/modules/slack/{constants.d.ts → interfaces.d.ts}

@@ -1,7 +1,5 @@
-export type ContainerObject = {
-    objectId: string;
-    collection: string;
-};
+import { RecipientObject } from '../../interfaces';
+export type ContainerObject = RecipientObject;
 export type SlackChannelQueryOptions = {
     maxCount?: number;
     limitPerPage?: number;
@@ -9,4 +7,4 @@ export type SlackChannelQueryOptions = {
     types?: string;
     teamId?: string;
 };
-//# sourceMappingURL=constants.d.ts.map
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/types/modules/slack/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/modules/slack/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;AAE9C,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,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.3.1",
+  "version": "0.3.3",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.mjs",
@@ -49,7 +49,7 @@
     "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@knocklabs/client": "^0.11.1",
+    "@knocklabs/client": "^0.11.3",
     "date-fns": "^4.0.0",
     "swr": "^2.2.5",
     "zustand": "^3.7.2"
@@ -70,7 +70,7 @@
     "rollup-plugin-execute": "^1.1.1",
     "typescript": "^5.7.3",
     "vite": "^5.0.0",
-    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-dts": "^4.5.0",
     "vite-plugin-no-bundle": "^4.0.0",
     "vitest": "^2.1.8"
   }

package/src/index.ts

@@ -3,3 +3,4 @@ export * from "./modules/feed";
 export * from "./modules/ms-teams";
 export * from "./modules/slack";
 export * from "./modules/i18n";
+export * from "./interfaces";

package/src/interfaces.ts

@@ -0,0 +1,4 @@
+export type RecipientObject = {
+  objectId: string;
+  collection: string;
+};

package/src/modules/core/utils.ts

@@ -61,16 +61,16 @@ export function feedProviderKey(
 */
 export function slackProviderKey({
   knockSlackChannelId,
-  tenant,
+  tenantId,
   connectionStatus,
   errorLabel,
 }: {
   knockSlackChannelId: string;
-  tenant: string;
+  tenantId: string;
   connectionStatus: string;
   errorLabel: string | null;
 }) {
-  return [knockSlackChannelId, tenant, connectionStatus, errorLabel]
+  return [knockSlackChannelId, tenantId, connectionStatus, errorLabel]
     .filter((f) => f !== null && f !== undefined)
     .join("-");
 }

package/src/modules/i18n/languages/en.ts

@@ -12,9 +12,14 @@ const en: I18nContent = {
     unread: "Unread",
     read: "Read",
     unseen: "Unseen",
+    msTeamsChannelSetError: "Error setting channel.",
     msTeamsConnect: "Connect to Microsoft Teams",
     msTeamsConnected: "Connected",
     msTeamsConnecting: "Connecting to Microsoft Teams…",
+    msTeamsConnectionErrorExists:
+      "Try reconnecting to Microsoft Teams to find and select channels from your teams.",
+    msTeamsConnectionErrorOccurred:
+      "There was an error connecting to Microsoft Teams. Try reconnecting to find and select channels from your teams.",
     msTeamsConnectContainerDescription:
       "Connect to get notifications in Microsoft Teams",
     msTeamsDisconnect: "Disconnect",

package/src/modules/i18n/languages/index.ts

@@ -13,9 +13,12 @@ export interface Translations {
   readonly unread: string;
   readonly read: string;
   readonly unseen: string;
+  readonly msTeamsChannelSetError: string;
   readonly msTeamsConnect: string;
   readonly msTeamsConnected: string;
   readonly msTeamsConnecting: string;
+  readonly msTeamsConnectionErrorExists: string;
+  readonly msTeamsConnectionErrorOccurred: string;
   readonly msTeamsConnectContainerDescription: string;
   readonly msTeamsDisconnect: string;
   readonly msTeamsDisconnecting: string;

package/src/modules/ms-teams/hooks/index.ts

@@ -1,2 +1,5 @@
 export { default as useMsTeamsConnectionStatus } from "./useMsTeamsConnectionStatus";
 export { default as useMsTeamsAuth } from "./useMsTeamsAuth";
+export { default as useMsTeamsTeams } from "./useMsTeamsTeams";
+export { default as useMsTeamsChannels } from "./useMsTeamsChannels";
+export { default as useConnectedMsTeamsChannels } from "./useConnectedMsTeamsChannels";

package/src/modules/ms-teams/hooks/useConnectedMsTeamsChannels.ts

@@ -0,0 +1,100 @@
+import { useKnockMsTeamsClient } from "..";
+import { MsTeamsChannelConnection } from "@knocklabs/client";
+import { GenericData } from "@knocklabs/types";
+import { useState } from "react";
+import useSWR from "swr";
+
+import { RecipientObject } from "../../..";
+import { useKnockClient } from "../../core";
+import { useTranslations } from "../../i18n";
+
+const QUERY_KEY = "MS_TEAMS_CONNECTED_CHANNELS";
+
+type UseConnectedMsTeamsChannelsProps = {
+  msTeamsChannelsRecipientObject: RecipientObject;
+};
+
+type UseConnectedMsTeamsChannelsOutput = {
+  data: MsTeamsChannelConnection[] | null;
+  updateConnectedChannels: (
+    connectedChannels: MsTeamsChannelConnection[],
+  ) => Promise<void>;
+  loading: boolean;
+  error: string | null;
+  updating: boolean;
+};
+
+function useConnectedMsTeamsChannels({
+  msTeamsChannelsRecipientObject: { objectId, collection },
+}: UseConnectedMsTeamsChannelsProps): UseConnectedMsTeamsChannelsOutput {
+  const { t } = useTranslations();
+  const knock = useKnockClient();
+  const { connectionStatus, knockMsTeamsChannelId } = useKnockMsTeamsClient();
+
+  const [error, setError] = useState<string | null>(null);
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const {
+    data: connectedChannels,
+    mutate,
+    isValidating,
+    isLoading,
+  } = useSWR<MsTeamsChannelConnection[]>(
+    // Only fetch when Microsoft Teams is connected
+    connectionStatus === "connected"
+      ? [QUERY_KEY, knockMsTeamsChannelId, collection, objectId]
+      : null,
+    async () => {
+      return knock.objects
+        .getChannelData({
+          collection,
+          objectId,
+          channelId: knockMsTeamsChannelId,
+        })
+        .then((res) => res.data?.connections ?? [])
+        .catch(() => []);
+    },
+    {
+      onSuccess: () => {
+        setError(null);
+      },
+    },
+  );
+
+  const updateConnectedChannels = async (
+    channelsToSendToKnock: MsTeamsChannelConnection[],
+  ) => {
+    setIsUpdating(true);
+    try {
+      await mutate(
+        () =>
+          knock.objects
+            .setChannelData({
+              objectId,
+              collection,
+              channelId: knockMsTeamsChannelId,
+              data: { connections: channelsToSendToKnock },
+            })
+            .then((res) => (res as GenericData).data?.connections ?? []),
+        {
+          populateCache: true,
+          revalidate: false,
+          optimisticData: channelsToSendToKnock,
+        },
+      );
+    } catch (_error) {
+      setError(t("msTeamsChannelSetError") || "");
+    }
+    setIsUpdating(false);
+  };
+
+  return {
+    data: connectedChannels ?? null,
+    updateConnectedChannels,
+    updating: isUpdating,
+    loading: isLoading || isValidating,
+    error,
+  };
+}
+
+export default useConnectedMsTeamsChannels;

package/src/modules/ms-teams/hooks/useMsTeamsChannels.ts

@@ -0,0 +1,53 @@
+import { GetMsTeamsChannelsResponse, MsTeamsChannel } from "@knocklabs/client";
+import useSWR from "swr";
+
+import { useKnockClient } from "../../core";
+import { useKnockMsTeamsClient } from "../context";
+import { MsTeamsChannelQueryOptions } from "../interfaces";
+
+const QUERY_KEY = "MS_TEAMS_CHANNELS";
+
+type UseMsTeamsChannelsProps = {
+  teamId?: string;
+  queryOptions?: MsTeamsChannelQueryOptions;
+};
+
+type UseMsTeamsChannelsOutput = {
+  data: MsTeamsChannel[];
+  isLoading: boolean;
+  refetch: () => void;
+};
+
+function useMsTeamsChannels({
+  teamId,
+  queryOptions,
+}: UseMsTeamsChannelsProps): UseMsTeamsChannelsOutput {
+  const knock = useKnockClient();
+  const { knockMsTeamsChannelId, tenantId } = useKnockMsTeamsClient();
+
+  const fetchChannels = () =>
+    knock.msTeams.getChannels({
+      knockChannelId: knockMsTeamsChannelId,
+      tenant: tenantId,
+      teamId: teamId!,
+      queryOptions: {
+        $filter: queryOptions?.filter,
+        $select: queryOptions?.select,
+      },
+    });
+
+  const { data, isLoading, isValidating, mutate } =
+    useSWR<GetMsTeamsChannelsResponse>(
+      teamId ? [QUERY_KEY, teamId] : null,
+      fetchChannels,
+      { revalidateOnFocus: false },
+    );
+
+  return {
+    data: data?.ms_teams_channels ?? [],
+    isLoading: isLoading || isValidating,
+    refetch: () => mutate(),
+  };
+}
+
+export default useMsTeamsChannels;

package/src/modules/ms-teams/hooks/useMsTeamsTeams.ts

@@ -0,0 +1,112 @@
+import { GetMsTeamsTeamsResponse, MsTeamsTeam } from "@knocklabs/client";
+import { useEffect, useMemo } from "react";
+import useSWRInfinite from "swr/infinite";
+
+import { useKnockClient } from "../../core";
+import { useKnockMsTeamsClient } from "../context";
+import { MsTeamsTeamQueryOptions } from "../interfaces";
+
+const MAX_COUNT = 1000;
+
+const QUERY_KEY = "MS_TEAMS_TEAMS";
+
+type UseMsTeamsTeamsProps = {
+  queryOptions?: MsTeamsTeamQueryOptions;
+};
+
+type UseMsTeamsTeamsOutput = {
+  data: MsTeamsTeam[];
+  isLoading: boolean;
+  refetch: () => void;
+};
+
+type QueryKey = [key: string, skiptoken: string] | null;
+
+function getQueryKey(
+  pageIndex: number,
+  previousPageData: GetMsTeamsTeamsResponse,
+): QueryKey {
+  // First page so just pass empty
+  if (pageIndex === 0) {
+    return [QUERY_KEY, ""];
+  }
+
+  // If there's no more data then return an empty next skiptoken
+  if (previousPageData && ["", null].includes(previousPageData.skip_token)) {
+    return null;
+  }
+
+  // Next skiptoken exists so pass it
+  return [QUERY_KEY, previousPageData.skip_token ?? ""];
+}
+
+function useMsTeamsTeams({
+  queryOptions = {},
+}: UseMsTeamsTeamsProps): UseMsTeamsTeamsOutput {
+  const knock = useKnockClient();
+  const { knockMsTeamsChannelId, tenantId, connectionStatus } =
+    useKnockMsTeamsClient();
+
+  const fetchTeams = (queryKey: QueryKey) =>
+    knock.msTeams.getTeams({
+      knockChannelId: knockMsTeamsChannelId,
+      tenant: tenantId,
+      queryOptions: {
+        $skiptoken: queryKey?.[1],
+        $top: queryOptions?.limitPerPage,
+        $filter: queryOptions?.filter,
+        $select: queryOptions?.select,
+      },
+    });
+
+  const { data, error, isLoading, isValidating, setSize, mutate } =
+    useSWRInfinite<GetMsTeamsTeamsResponse>(getQueryKey, fetchTeams, {
+      initialSize: 0,
+      revalidateOnFocus: false,
+    });
+
+  const lastPage = data?.at(-1);
+  const hasNextPage = lastPage === undefined || !!lastPage.skip_token;
+
+  const teams = useMemo(
+    () =>
+      (data ?? [])
+        .flatMap((page) => page?.ms_teams_teams)
+        .filter((team) => !!team),
+    [data],
+  );
+
+  const maxCount = queryOptions?.maxCount || MAX_COUNT;
+
+  useEffect(() => {
+    if (
+      connectionStatus === "connected" &&
+      !error &&
+      hasNextPage &&
+      !isLoading &&
+      !isValidating &&
+      teams.length < maxCount
+    ) {
+      // Fetch a page at a time until we have nothing else left to fetch
+      // or we've already hit the max amount of teams to fetch
+      setSize((size) => size + 1);
+    }
+  }, [
+    teams.length,
+    setSize,
+    hasNextPage,
+    isLoading,
+    isValidating,
+    maxCount,
+    error,
+    connectionStatus,
+  ]);
+
+  return {
+    data: teams,
+    isLoading: isLoading || isValidating,
+    refetch: () => mutate(),
+  };
+}
+
+export default useMsTeamsTeams;

package/src/modules/ms-teams/index.ts

@@ -1,2 +1,3 @@
 export * from "./context";
 export * from "./hooks";
+export * from "./interfaces";

package/src/modules/ms-teams/interfaces.ts

@@ -0,0 +1,11 @@
+export type MsTeamsTeamQueryOptions = {
+  maxCount?: number;
+  limitPerPage?: number;
+  filter?: string;
+  select?: string;
+};
+
+export type MsTeamsChannelQueryOptions = {
+  filter?: string;
+  select?: string;
+};

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

@@ -8,6 +8,10 @@ import { ConnectionStatus } from "../hooks/useSlackConnectionStatus";
 
 export interface KnockSlackProviderState {
   knockSlackChannelId: string;
+  tenantId: string;
+  /**
+   * @deprecated Use `tenantId` instead. This field will be removed in a future release.
+   */
   tenant: string;
   connectionStatus: ConnectionStatus;
   setConnectionStatus: (connectionStatus: ConnectionStatus) => void;
@@ -20,14 +24,25 @@ export interface KnockSlackProviderState {
 const SlackProviderStateContext =
   React.createContext<KnockSlackProviderState | null>(null);
 
-export interface KnockSlackProviderProps {
-  knockSlackChannelId: string;
-  tenant: string;
-}
+export type KnockSlackProviderProps =
+  | {
+      knockSlackChannelId: string;
+      /**
+       * @deprecated Use `tenantId` instead. This field will be removed in a future release.
+       */
+      tenant: string;
+    }
+  | {
+      knockSlackChannelId: string;
+      tenantId: string;
+    };
 
 export const KnockSlackProvider: React.FC<
   PropsWithChildren<KnockSlackProviderProps>
-> = ({ knockSlackChannelId, tenant, children }) => {
+> = (props) => {
+  const { knockSlackChannelId, children } = props;
+  const tenantId = "tenantId" in props ? props.tenantId : props.tenant;
+
   const knock = useKnockClient();
 
   const {
@@ -37,13 +52,13 @@ export const KnockSlackProvider: React.FC<
     setErrorLabel,
     actionLabel,
     setActionLabel,
-  } = useSlackConnectionStatus(knock, knockSlackChannelId, tenant);
+  } = useSlackConnectionStatus(knock, knockSlackChannelId, tenantId);
 
   return (
     <SlackProviderStateContext.Provider
       key={slackProviderKey({
         knockSlackChannelId,
-        tenant,
+        tenantId,
         connectionStatus,
         errorLabel,
       })}
@@ -55,7 +70,9 @@ export const KnockSlackProvider: React.FC<
         actionLabel,
         setActionLabel,
         knockSlackChannelId,
-        tenant,
+        // Assign the same value to both tenant and tenantId for backwards compatibility
+        tenant: tenantId,
+        tenantId,
       }}
     >
       {children}