@knocklabs/react-core 0.2.29 → 0.3.0-rc-2.0

package/src/modules/feed/context/KnockFeedProvider.tsx

@@ -20,7 +20,7 @@ export interface KnockFeedProviderState {
   colorMode: ColorMode;
 }
 
-const FeedStateContext = React.createContext<
+const KnockFeedContext = React.createContext<
   KnockFeedProviderState | undefined
 >(undefined);
 
@@ -38,12 +38,18 @@ export interface KnockFeedProviderProps {
 export const KnockFeedProvider: React.FC<
   PropsWithChildren<KnockFeedProviderProps>
 > = ({ feedId, children, defaultFeedOptions = {}, colorMode = "light" }) => {
-  const knock = useKnockClient();
+  let knock: Knock;
+  try {
+    knock = useKnockClient();
+  } catch (error) {
+    throw new Error("KnockFeedProvider must be used within a KnockProvider.");
+  }
+
   const feedClient = useNotifications(knock, feedId, defaultFeedOptions);
   const useFeedStore = useCreateNotificationStore(feedClient);
 
   return (
-    <FeedStateContext.Provider
+    <KnockFeedContext.Provider
       key={feedProviderKey(knock.userId, feedId, defaultFeedOptions)}
       value={{
         knock,
@@ -53,13 +59,12 @@ export const KnockFeedProvider: React.FC<
       }}
     >
       {children}
-    </FeedStateContext.Provider>
+    </KnockFeedContext.Provider>
   );
 };
 
 export const useKnockFeed = (): KnockFeedProviderState => {
-  const context = React.useContext(FeedStateContext);
-
+  const context = React.useContext(KnockFeedContext);
   if (!context) {
     throw new Error("useKnockFeed must be used within a KnockFeedProvider");
   }

package/src/modules/in-app-messages/context/KnockInAppMessagesChannelProvider.tsx

@@ -0,0 +1,68 @@
+import Knock, {
+  InAppMessagesChannelClient,
+  InAppMessagesClientOptions,
+} from "@knocklabs/client";
+import * as React from "react";
+
+import { useKnockClient, useStableOptions } from "../../core";
+import { ColorMode } from "../../core/constants";
+
+export interface KnockInAppMessagesChannelProviderState {
+  inAppMessagesChannelClient: InAppMessagesChannelClient;
+  colorMode: ColorMode;
+}
+
+export interface KnockInAppMessagesChannelProviderProps {
+  // In-App Message props
+  channelId: string;
+  defaultOptions?: InAppMessagesClientOptions;
+
+  // Extra options
+  colorMode?: ColorMode;
+}
+
+const KnockInAppMessagesContext = React.createContext<
+  KnockInAppMessagesChannelProviderState | undefined
+>(undefined);
+
+export const KnockInAppMessagesChannelProvider: React.FC<
+  React.PropsWithChildren<KnockInAppMessagesChannelProviderProps>
+> = ({ children, channelId, colorMode = "light", defaultOptions }) => {
+  let knock: Knock;
+  try {
+    knock = useKnockClient();
+  } catch (error) {
+    throw new Error(
+      "KnockInAppMessagesChannelProvider must be used within a KnockProvider.",
+    );
+  }
+
+  const stableOptions = useStableOptions(defaultOptions);
+
+  const inAppMessagesChannelClient = React.useMemo(() => {
+    return new InAppMessagesChannelClient(knock, channelId, stableOptions);
+  }, [knock, channelId, stableOptions]);
+
+  return (
+    <KnockInAppMessagesContext.Provider
+      value={{
+        inAppMessagesChannelClient,
+        colorMode,
+      }}
+    >
+      {children}
+    </KnockInAppMessagesContext.Provider>
+  );
+};
+
+export const useInAppMessagesChannel =
+  (): KnockInAppMessagesChannelProviderState => {
+    const context = React.useContext(KnockInAppMessagesContext);
+    if (!context) {
+      throw new Error(
+        "useInAppMessagesChannel must be used within a KnockInAppMessagesChannelProvider",
+      );
+    }
+
+    return context;
+  };

package/src/modules/in-app-messages/context/index.ts

@@ -0,0 +1 @@
+export * from "./KnockInAppMessagesChannelProvider";

package/src/modules/in-app-messages/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useInAppMessages";

package/src/modules/in-app-messages/hooks/useInAppMessages.ts

@@ -0,0 +1,87 @@
+import {
+  InAppMessage,
+  InAppMessagesClient,
+  InAppMessagesClientOptions,
+  NetworkStatus,
+} from "@knocklabs/client";
+import { GenericData } from "@knocklabs/types";
+import { useStore } from "@tanstack/react-store";
+import { useEffect, useMemo } from "react";
+
+import { useStableOptions } from "../../core";
+import { useInAppMessagesChannel } from "../context";
+
+export interface UseInAppMessagesOptions extends InAppMessagesClientOptions {}
+
+export interface UseInAppMessagesResponse<
+  TContent extends GenericData,
+  TData extends GenericData,
+> {
+  messages: InAppMessage<TContent, TData>[];
+  networkStatus: NetworkStatus;
+  loading: boolean;
+  inAppMessagesClient: InAppMessagesClient;
+}
+
+export const useInAppMessages = <
+  TContent extends GenericData = GenericData,
+  TData extends GenericData = GenericData,
+>(
+  messageType: string,
+  options: UseInAppMessagesOptions = {},
+): UseInAppMessagesResponse<TContent, TData> => {
+  const { inAppMessagesChannelClient } = useInAppMessagesChannel();
+
+  const stableOptions = useStableOptions(options);
+
+  const inAppMessagesClient = useMemo(() => {
+    return new InAppMessagesClient(
+      inAppMessagesChannelClient,
+      messageType,
+      stableOptions,
+    );
+  }, [inAppMessagesChannelClient, messageType, stableOptions]);
+
+  const { messages, networkStatus, loading } = useStore(
+    inAppMessagesChannelClient.store,
+    (state) => inAppMessagesClient.getQueryInfoSelector<TContent, TData>(state),
+  );
+
+  useEffect(() => {
+    inAppMessagesClient.subscribe();
+    inAppMessagesClient.fetch();
+
+    return () => {
+      inAppMessagesClient.unsubscribe();
+    };
+  }, [inAppMessagesClient]);
+
+  return { messages, networkStatus, loading, inAppMessagesClient };
+};
+
+export type UseInAppMessageOptions = Omit<UseInAppMessagesOptions, "page_size">;
+
+export interface UseInAppMessageResponse<
+  TContent extends GenericData,
+  TData extends GenericData,
+> extends GenericData {
+  message?: InAppMessage<TContent, TData>;
+  networkStatus: NetworkStatus;
+  loading: boolean;
+  inAppMessagesClient: InAppMessagesClient;
+}
+
+export const useInAppMessage = <
+  TContent extends GenericData = GenericData,
+  TData extends GenericData = GenericData,
+>(
+  messageType: string,
+  options: UseInAppMessageOptions = {},
+): UseInAppMessageResponse<TContent, TData> => {
+  const { messages, ...rest } = useInAppMessages<TContent, TData>(messageType, {
+    ...options,
+    page_size: 1,
+  });
+
+  return { message: messages[0], ...rest };
+};

package/src/modules/in-app-messages/index.ts

@@ -0,0 +1,3 @@
+export * from "./context";
+export * from "./hooks";
+// TODO: Double check exports are exporting only necessary values

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

@@ -87,7 +87,7 @@ function useConnectedSlackChannels({
         data: { connections: channelsToSendToKnock },
       });
       fetchAndSetConnectedChannels();
-    } catch (_error) {
+    } catch (error) {
       setError(t("slackChannelSetError") || "");
     }
     setIsUpdating(false);

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

@@ -45,7 +45,7 @@ function useSlackAuth(
       } else {
         setConnectionStatus("error");
       }
-    } catch (_error) {
+    } catch (error) {
       setConnectionStatus("error");
     }
   }, [

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

@@ -81,7 +81,7 @@ function useSlackConnectionStatus(
         // This is for any Knock errors that would require a reconnect.
 
         setConnectionStatus("error");
-      } catch (_error) {
+      } catch (error) {
         setConnectionStatus("error");
       }
     };