feat(js,react,nextjs): subscription component

Author: LetItRock

packages/js/src/cache/subscriptions-cache.ts

@@ -269,7 +269,7 @@ export class SubscriptionsCache {
     }
   }
 
-  clear(): void {
+  clearAll(): void {
     this.#cache.clear();
     this.#itemCache.clear();
   }

packages/js/src/novu.ts

@@ -107,6 +107,16 @@ export class Novu implements Pick<NovuEventEmitter, 'on'> {
     };
   }
 
+  private clearCache(): void {
+    this.notifications.cache.clearAll();
+    this.preferences.cache.clearAll();
+    this.preferences.scheduleCache.clearAll();
+    this.subscriptions.cache.clearAll();
+  }
+
+  /**
+   * @deprecated
+   */
   public async changeSubscriber(options: { subscriber: Subscriber; subscriberHash?: string }): Promise<void> {
     await this.#session.initialize({
       applicationIdentifier: this.#session.applicationIdentifier || '',
@@ -118,7 +128,7 @@ export class Novu implements Pick<NovuEventEmitter, 'on'> {
     });
 
     // Clear cache and reconnect socket with new token
-    this.notifications.cache.clearAll();
+    this.clearCache();
 
     // Disconnect and reconnect socket to use new JWT token
     const disconnectResult = await this.socket.disconnect();
@@ -127,6 +137,9 @@ export class Novu implements Pick<NovuEventEmitter, 'on'> {
     }
   }
 
+  /**
+   * @deprecated
+   */
   public async changeContext(options: { context: Context; contextHash?: string }): Promise<void> {
     const currentSubscriber = this.#session.subscriber;
     if (!currentSubscriber) {
@@ -143,7 +156,7 @@ export class Novu implements Pick<NovuEventEmitter, 'on'> {
     });
 
     // Clear cache and reconnect socket with new token
-    this.notifications.cache.clearAll();
+    this.clearCache();
 
     // Disconnect and reconnect socket to use new JWT token
     const disconnectResult = await this.socket.disconnect();

packages/js/src/ui/api/hooks/useArchiveAll.ts

@@ -2,7 +2,7 @@ import type { NotificationFilter } from '../../../types';
 import { useNovu } from '../../context';
 
 export const useArchiveAll = (props?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
 
   const archiveAll = async ({
     tags,
@@ -12,7 +12,7 @@ export const useArchiveAll = (props?: { onSuccess?: () => void; onError?: (err:
     data?: Record<string, unknown>;
   } = {}) => {
     try {
-      await novu.notifications.archiveAll({ tags, data });
+      await novuAccessor().notifications.archiveAll({ tags, data });
       props?.onSuccess?.();
     } catch (error) {
       props?.onError?.(error);

packages/js/src/ui/api/hooks/useArchiveAllRead.ts

@@ -2,7 +2,7 @@ import type { NotificationFilter } from '../../../types';
 import { useNovu } from '../../context';
 
 export const useArchiveAllRead = (props?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
 
   const archiveAllRead = async ({
     tags,
@@ -12,7 +12,7 @@ export const useArchiveAllRead = (props?: { onSuccess?: () => void; onError?: (e
     data?: NotificationFilter['data'];
   } = {}) => {
     try {
-      await novu.notifications.archiveAllRead({ tags, data });
+      await novuAccessor().notifications.archiveAllRead({ tags, data });
       props?.onSuccess?.();
     } catch (error) {
       props?.onError?.(error);

packages/js/src/ui/api/hooks/useDeleteAll.ts

@@ -2,7 +2,7 @@ import type { NotificationFilter } from '../../../types';
 import { useNovu } from '../../context';
 
 export const useDeleteAll = (props?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
 
   const deleteAll = async ({
     tags,
@@ -12,7 +12,7 @@ export const useDeleteAll = (props?: { onSuccess?: () => void; onError?: (err: u
     data?: Record<string, unknown>;
   } = {}) => {
     try {
-      await novu.notifications.deleteAll({ tags, data });
+      await novuAccessor().notifications.deleteAll({ tags, data });
       props?.onSuccess?.();
     } catch (error) {
       props?.onError?.(error);

packages/js/src/ui/api/hooks/useNotifications.ts

@@ -1,4 +1,4 @@
-import { Accessor, createEffect, onCleanup, onMount } from 'solid-js';
+import { Accessor, createEffect, onCleanup } from 'solid-js';
 import { ListNotificationsArgs, ListNotificationsResponse } from '../../../notifications';
 import type { NotificationFilter } from '../../../types';
 import { isSameFilter } from '../../../utils/notification-utils';
@@ -10,21 +10,22 @@ type UseNotificationsInfiniteScrollProps = {
 };
 
 export const useNotificationsInfiniteScroll = (props: UseNotificationsInfiniteScrollProps) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
   let filter = { ...props.options() };
 
   const [data, { initialLoading, setEl, end, mutate, reset }] = createInfiniteScroll(
     async (after) => {
-      const { data } = await novu.notifications.list({ ...(props.options() || {}), after });
+      const { data } = await novuAccessor().notifications.list({ ...(props.options() || {}), after });
 
       return { data: data?.notifications ?? [], hasMore: data?.hasMore ?? false };
     },
     {
       paginationField: 'id',
+      dependency: novuAccessor,
     }
   );
 
-  onMount(() => {
+  createEffect(() => {
     const listener = ({ data }: { data: ListNotificationsResponse }) => {
       if (!data || !isSameFilter(filter, data.filter)) {
         return;
@@ -33,7 +34,7 @@ export const useNotificationsInfiniteScroll = (props: UseNotificationsInfiniteSc
       mutate({ data: data.notifications, hasMore: data.hasMore });
     };
 
-    const cleanup = novu.on('notifications.list.updated', listener);
+    const cleanup = novuAccessor().on('notifications.list.updated', listener);
 
     onCleanup(() => cleanup());
   });
@@ -44,13 +45,13 @@ export const useNotificationsInfiniteScroll = (props: UseNotificationsInfiniteSc
       return;
     }
 
-    novu.notifications.clearCache();
+    novuAccessor().notifications.clearCache();
     await reset();
     filter = newFilter;
   });
 
   const refetch = async ({ filter }: { filter?: NotificationFilter }) => {
-    novu.notifications.clearCache({ filter });
+    novuAccessor().notifications.clearCache({ filter });
     await reset();
   };
 

packages/js/src/ui/api/hooks/usePreferences.ts

@@ -1,24 +1,27 @@
-import { createEffect, createResource, createSignal, onCleanup, onMount } from 'solid-js';
+import { createEffect, createResource, createSignal, onCleanup } from 'solid-js';
 import { Preference } from '../../../preferences/preference';
 import { FetchPreferencesArgs } from '../../../preferences/types';
 import { useNovu } from '../../context';
 
 export const usePreferences = (options?: FetchPreferencesArgs) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
 
   const [loading, setLoading] = createSignal(true);
-  const [preferences, { mutate, refetch }] = createResource(options || {}, async ({ tags, severity, criticality }) => {
-    try {
-      const response = await novu.preferences.list({ tags, severity, criticality });
-
-      return response.data;
-    } catch (error) {
-      console.error('Error fetching preferences:', error);
-      throw error;
+  const [preferences, { mutate, refetch }] = createResource(
+    () => ({ ...options, dependency: novuAccessor() }),
+    async ({ tags, severity, criticality }) => {
+      try {
+        const response = await novuAccessor().preferences.list({ tags, severity, criticality });
+
+        return response.data;
+      } catch (error) {
+        console.error('Error fetching preferences:', error);
+        throw error;
+      }
     }
-  });
+  );
 
-  onMount(() => {
+  createEffect(() => {
     const listener = ({ data }: { data: Preference[] }) => {
       if (!data) {
         return;
@@ -27,7 +30,7 @@ export const usePreferences = (options?: FetchPreferencesArgs) => {
       mutate(data);
     };
 
-    const cleanup = novu.on('preferences.list.updated', listener);
+    const cleanup = novuAccessor().on('preferences.list.updated', listener);
 
     onCleanup(() => cleanup());
   });

packages/js/src/ui/api/hooks/useReadAll.ts

@@ -2,7 +2,7 @@ import type { NotificationFilter } from '../../../types';
 import { useNovu } from '../../context';
 
 export const useReadAll = (props?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => {
-  const novu = useNovu();
+  const novuAccessor = useNovu();
 
   const readAll = async ({
     tags,
@@ -12,7 +12,7 @@ export const useReadAll = (props?: { onSuccess?: () => void; onError?: (err: unk
     data?: Record<string, unknown>;
   } = {}) => {
     try {
-      await novu.notifications.readAll({ tags, data });
+      await novuAccessor().notifications.readAll({ tags, data });
       props?.onSuccess?.();
     } catch (error) {
       props?.onError?.(error);

packages/js/src/ui/api/hooks/useSubscription.ts

@@ -0,0 +1,90 @@
+import { createEffect, createResource, createSignal, onCleanup, onMount } from 'solid-js';
+import {
+  CreateSubscriptionArgs,
+  DeleteSubscriptionArgs,
+  GetSubscriptionArgs,
+  TopicSubscription,
+} from '../../../subscriptions';
+import { useNovu } from '../../context';
+
+export const useSubscription = (options: GetSubscriptionArgs) => {
+  const novuAccessor = useNovu();
+
+  const [loading, setLoading] = createSignal(true);
+  const [subscription, { mutate, refetch }] = createResource(options || {}, async ({ topicKey, identifier }) => {
+    try {
+      const response = await novuAccessor().subscriptions.get({ topicKey, identifier });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching subscription:', error);
+      throw error;
+    }
+  });
+
+  const create = async (args: CreateSubscriptionArgs) => {
+    try {
+      setLoading(true);
+      const response = await novuAccessor().subscriptions.create(args);
+
+      if (response.data) {
+        mutate(response.data);
+      }
+
+      return response;
+    } catch (error) {
+      console.error('Error creating subscription:', error);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const remove = async (args: DeleteSubscriptionArgs) => {
+    try {
+      setLoading(true);
+      const response =
+        'subscription' in args
+          ? await novuAccessor().subscriptions.delete({ subscription: args.subscription })
+          : await novuAccessor().subscriptions.delete({ subscriptionId: args.subscriptionId });
+
+      mutate(null);
+
+      return response;
+    } catch (error) {
+      console.error('Error deleting subscription:', error);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  onMount(() => {
+    const listener = ({ data }: { data?: TopicSubscription }) => {
+      if (!data || data.topicKey !== options.topicKey || data.identifier !== options.identifier) {
+        return;
+      }
+
+      mutate(data);
+    };
+
+    const currentNovu = novuAccessor();
+    const cleanupCreate = currentNovu.on('subscription.create.resolved', listener);
+    const cleanupUpdate = currentNovu.on('subscription.update.resolved', listener);
+    const cleanupDelete = currentNovu.on('subscription.delete.resolved', () => {
+      mutate(null);
+    });
+
+    onCleanup(() => {
+      cleanupCreate();
+      cleanupUpdate();
+      cleanupDelete();
+    });
+  });
+
+  createEffect(() => {
+    setLoading(subscription.loading);
+  });
+
+  return { subscription, loading, mutate, refetch, create, remove };
+};