@knocklabs/react-core 0.3.1 → 0.3.2

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}

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

@@ -1,19 +1,20 @@
-import { ContainerObject, useKnockSlackClient } from "..";
+import { useKnockSlackClient } from "..";
 import { SlackChannelConnection } from "@knocklabs/client";
 import { useCallback, useEffect, useState } from "react";
 
+import { RecipientObject } from "../../..";
 import { useKnockClient } from "../../core";
 import { useTranslations } from "../../i18n";
 
-type UseSlackChannelsProps = {
-  slackChannelsRecipientObject: ContainerObject;
+type UseConnectedSlackChannelsProps = {
+  slackChannelsRecipientObject: RecipientObject;
 };
 
-type UseSlackChannelOutput = {
+type UseConnectedSlackChannelOutput = {
   data: SlackChannelConnection[] | null;
   updateConnectedChannels: (
     connectedChannels: SlackChannelConnection[],
-  ) => void;
+  ) => Promise<void>;
   loading: boolean;
   error: string | null;
   updating: boolean;
@@ -21,7 +22,7 @@ type UseSlackChannelOutput = {
 
 function useConnectedSlackChannels({
   slackChannelsRecipientObject: { objectId, collection },
-}: UseSlackChannelsProps): UseSlackChannelOutput {
+}: UseConnectedSlackChannelsProps): UseConnectedSlackChannelOutput {
   const { t } = useTranslations();
   const knock = useKnockClient();
   const { connectionStatus, knockSlackChannelId } = useKnockSlackClient();

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

@@ -23,7 +23,7 @@ function useSlackAuth(
   additionalScopes?: string[],
 ): UseSlackAuthOutput {
   const knock = useKnockClient();
-  const { setConnectionStatus, knockSlackChannelId, tenant, setActionLabel } =
+  const { setConnectionStatus, knockSlackChannelId, tenantId, setActionLabel } =
     useKnockSlackClient();
 
   const combinedScopes =
@@ -36,7 +36,7 @@ function useSlackAuth(
     setConnectionStatus("disconnecting");
     try {
       const revoke = await knock.slack.revokeAccessToken({
-        tenant,
+        tenant: tenantId,
         knockChannelId: knockSlackChannelId,
       });
 
@@ -51,7 +51,7 @@ function useSlackAuth(
   }, [
     setConnectionStatus,
     knock.slack,
-    tenant,
+    tenantId,
     knockSlackChannelId,
     setActionLabel,
   ]);
@@ -61,7 +61,7 @@ function useSlackAuth(
       state: JSON.stringify({
         redirect_url: redirectUrl,
         access_token_object: {
-          object_id: tenant,
+          object_id: tenantId,
           collection: TENANT_OBJECT_COLLECTION,
         },
         channel_id: knockSlackChannelId,
@@ -74,7 +74,7 @@ function useSlackAuth(
     return `${SLACK_AUTHORIZE_URL}?${new URLSearchParams(rawParams)}`;
   }, [
     redirectUrl,
-    tenant,
+    tenantId,
     knockSlackChannelId,
     knock.apiKey,
     knock.userToken,

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

@@ -45,12 +45,12 @@ function useSlackChannels({
   queryOptions,
 }: UseSlackChannelsProps): UseSlackChannelOutput {
   const knock = useKnockClient();
-  const { knockSlackChannelId, tenant, connectionStatus } =
+  const { knockSlackChannelId, tenantId, connectionStatus } =
     useKnockSlackClient();
 
   const fetchChannels = (queryKey: QueryKey) => {
     return knock.slack.getChannels({
-      tenant,
+      tenant: tenantId,
       knockChannelId: knockSlackChannelId,
       queryOptions: {
         ...queryOptions,

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

@@ -34,7 +34,7 @@ const formatSlackErrorMessage = (errorMessage: string) => {
 function useSlackConnectionStatus(
   knock: Knock,
   knockSlackChannelId: string,
-  tenant: string,
+  tenantId: string,
 ): UseSlackConnectionStatusOutput {
   const { t } = useTranslations();
   const [connectionStatus, setConnectionStatus] =
@@ -48,7 +48,7 @@ function useSlackConnectionStatus(
 
       try {
         const authRes = await knock.slack.authCheck({
-          tenant,
+          tenant: tenantId,
           knockChannelId: knockSlackChannelId,
         });
 
@@ -87,7 +87,7 @@ function useSlackConnectionStatus(
     };
 
     checkAuthStatus();
-  }, [connectionStatus, tenant, knockSlackChannelId, knock.slack, t]);
+  }, [connectionStatus, tenantId, knockSlackChannelId, knock.slack, t]);
 
   return {
     connectionStatus,

package/src/modules/slack/index.ts

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

package/src/modules/slack/{constants.ts → interfaces.ts}

@@ -1,7 +1,6 @@
-export type ContainerObject = {
-  objectId: string;
-  collection: string;
-};
+import type { RecipientObject } from "../../interfaces";
+
+export type ContainerObject = RecipientObject;
 
 export type SlackChannelQueryOptions = {
   maxCount?: number;

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

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/modules/slack/constants.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,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"}