@knocklabs/react-core 0.3.1 → 0.3.3

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

@@ -1,19 +1,24 @@
-import { ContainerObject, useKnockSlackClient } from "..";
+import { useKnockSlackClient } from "..";
 import { SlackChannelConnection } from "@knocklabs/client";
-import { useCallback, useEffect, useState } from "react";
+import { GenericData } from "@knocklabs/types";
+import { useState } from "react";
+import useSWR from "swr";
 
+import { RecipientObject } from "../../..";
 import { useKnockClient } from "../../core";
 import { useTranslations } from "../../i18n";
 
-type UseSlackChannelsProps = {
-  slackChannelsRecipientObject: ContainerObject;
+const QUERY_KEY = "SLACK_CONNECTED_CHANNELS";
+
+type UseConnectedSlackChannelsProps = {
+  slackChannelsRecipientObject: RecipientObject;
 };
 
-type UseSlackChannelOutput = {
+type UseConnectedSlackChannelsOutput = {
   data: SlackChannelConnection[] | null;
   updateConnectedChannels: (
     connectedChannels: SlackChannelConnection[],
-  ) => void;
+  ) => Promise<void>;
   loading: boolean;
   error: string | null;
   updating: boolean;
@@ -21,72 +26,62 @@ type UseSlackChannelOutput = {
 
 function useConnectedSlackChannels({
   slackChannelsRecipientObject: { objectId, collection },
-}: UseSlackChannelsProps): UseSlackChannelOutput {
+}: UseConnectedSlackChannelsProps): UseConnectedSlackChannelsOutput {
   const { t } = useTranslations();
   const knock = useKnockClient();
   const { connectionStatus, knockSlackChannelId } = useKnockSlackClient();
-  const [connectedChannels, setConnectedChannels] = useState<
-    null | SlackChannelConnection[]
-  >(null);
+
   const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
 
-  const fetchAndSetConnectedChannels = useCallback(() => {
-    setIsLoading(true);
-    const getConnectedChannels = async () =>
-      await knock.objects.getChannelData({
-        collection,
-        objectId,
-        channelId: knockSlackChannelId,
-      });
-
-    getConnectedChannels()
-      .then((res) => {
-        if (res?.data?.connections) {
-          setConnectedChannels(res?.data?.connections);
-        } else {
-          setConnectedChannels([]);
-        }
-        setError(null);
-        setIsLoading(false);
-      })
-      .catch(() => {
-        setConnectedChannels([]);
-        setError(null);
-        setIsLoading(false);
-      });
-  }, [collection, knock.objects, knockSlackChannelId, objectId]);
-
-  useEffect(() => {
-    if (
-      connectionStatus === "connected" &&
-      !connectedChannels &&
-      !error &&
-      !isLoading
-    ) {
-      fetchAndSetConnectedChannels();
-    }
-  }, [
-    connectedChannels,
-    fetchAndSetConnectedChannels,
+  const {
+    data: connectedChannels,
+    mutate,
+    isValidating,
     isLoading,
-    error,
-    connectionStatus,
-  ]);
+  } = useSWR<SlackChannelConnection[]>(
+    // Only fetch when Slack is connected
+    connectionStatus === "connected"
+      ? [QUERY_KEY, knockSlackChannelId, collection, objectId]
+      : null,
+    async () => {
+      return knock.objects
+        .getChannelData({
+          collection,
+          objectId,
+          channelId: knockSlackChannelId,
+        })
+        .then((res) => res.data?.connections ?? [])
+        .catch(() => []);
+    },
+    {
+      onSuccess: () => {
+        setError(null);
+      },
+    },
+  );
 
   const updateConnectedChannels = async (
     channelsToSendToKnock: SlackChannelConnection[],
   ) => {
     setIsUpdating(true);
     try {
-      await knock.objects.setChannelData({
-        objectId,
-        collection,
-        channelId: knockSlackChannelId,
-        data: { connections: channelsToSendToKnock },
-      });
-      fetchAndSetConnectedChannels();
+      await mutate(
+        () =>
+          knock.objects
+            .setChannelData({
+              objectId,
+              collection,
+              channelId: knockSlackChannelId,
+              data: { connections: channelsToSendToKnock },
+            })
+            .then((res) => (res as GenericData).data?.connections ?? []),
+        {
+          populateCache: true,
+          revalidate: false,
+          optimisticData: channelsToSendToKnock,
+        },
+      );
     } catch (_error) {
       setError(t("slackChannelSetError") || "");
     }
@@ -94,10 +89,10 @@ function useConnectedSlackChannels({
   };
 
   return {
-    data: connectedChannels,
+    data: connectedChannels ?? null,
     updateConnectedChannels,
     updating: isUpdating,
-    loading: isLoading,
+    loading: isLoading || isValidating,
     error,
   };
 }

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"}