feat: in app notifications store

Author: khushal87

examples/SampleApp/src/components/ToastComponent/Toast.tsx

@@ -1,8 +1,7 @@
 import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useToastState } from '../../hooks/useToastState';
 import Animated, { Easing, SlideInDown, SlideOutDown } from 'react-native-reanimated';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from 'stream-chat-react-native';
+import { useInAppNotificationsState, useTheme } from 'stream-chat-react-native';
 import type { Notification } from 'stream-chat';
 
 const { width } = Dimensions.get('window');
@@ -15,7 +14,7 @@ const severityIconMap: Record<Notification['severity'], string> = {
 };
 
 export const Toast = () => {
-  const { closeToast, notifications } = useToastState();
+  const { closeInAppNotification, notifications } = useInAppNotificationsState();
   const { top } = useSafeAreaInsets();
   const {
     theme: {
@@ -40,7 +39,7 @@ export const Toast = () => {
           <View style={styles.content}>
             <Text style={[styles.message, { color: white_smoke }]}>{notification.message}</Text>
           </View>
-          <TouchableOpacity onPress={() => closeToast(notification.id)}>
+          <TouchableOpacity onPress={() => closeInAppNotification(notification.id)}>
             <Text style={[styles.close, { color: white_smoke }]}>✕</Text>
           </TouchableOpacity>
         </Animated.View>

examples/SampleApp/src/hooks/useClientNotificationsToastHandler.ts

@@ -1,8 +1,7 @@
 import type { Notification } from 'stream-chat';
-import { useClientNotifications } from 'stream-chat-react-native';
+import { useClientNotifications, useInAppNotificationsState } from 'stream-chat-react-native';
 
 import { useEffect, useMemo, useRef } from 'react';
-import { useToastState } from './useToastState';
 
 export const usePreviousNotifications = (notifications: Notification[]) => {
   const prevNotifications = useRef<Notification[]>(notifications);
@@ -16,9 +15,7 @@ export const usePreviousNotifications = (notifications: Notification[]) => {
     };
   }, [notifications]);
 
-  useEffect(() => {
-    prevNotifications.current = notifications;
-  }, [notifications]);
+  prevNotifications.current = notifications;
 
   return difference;
 };
@@ -29,11 +26,11 @@ export const usePreviousNotifications = (notifications: Notification[]) => {
  */
 export const useClientNotificationsToastHandler = () => {
   const { notifications } = useClientNotifications();
-  const { openToast, closeToast } = useToastState();
+  const { openInAppNotification, closeInAppNotification } = useInAppNotificationsState();
   const { added, removed } = usePreviousNotifications(notifications);
 
   useEffect(() => {
-    added.forEach(openToast);
-    removed.forEach((notification) => closeToast(notification.id));
-  }, [added, closeToast, openToast, removed]);
+    added.forEach(openInAppNotification);
+    removed.forEach((notification) => closeInAppNotification(notification.id));
+  }, [added, closeInAppNotification, openInAppNotification, removed]);
 };

examples/SampleApp/src/hooks/useToastState.ts

@@ -8,3 +8,4 @@ export * from './useLoadingImage';
 export * from './useMessageReminder';
 export * from './useQueryReminders';
 export * from './useClientNotifications';
+export * from './useInAppNotificationsState';

package/src/hooks/index.ts

@@ -0,0 +1,33 @@
+import { Notification } from 'stream-chat';
+
+import { useStableCallback } from './useStableCallback';
+import { useStateStore } from './useStateStore';
+
+import type { InAppNotificationsState } from '../store/in-app-notifications-store';
+import {
+  closeInAppNotification,
+  inAppNotificationsStore,
+  openInAppNotification,
+} from '../store/in-app-notifications-store';
+
+const selector = ({ notifications }: InAppNotificationsState) => ({
+  notifications,
+});
+
+export const useInAppNotificationsState = () => {
+  const { notifications } = useStateStore(inAppNotificationsStore, selector);
+
+  const openInAppNotificationInternal = useStableCallback((notificationData: Notification) => {
+    openInAppNotification(notificationData);
+  });
+
+  const closeInAppNotificationInternal = useStableCallback((id: string) => {
+    closeInAppNotification(id);
+  });
+
+  return {
+    closeInAppNotification: closeInAppNotificationInternal,
+    notifications,
+    openInAppNotification: openInAppNotificationInternal,
+  };
+};

package/src/hooks/useInAppNotificationsState.ts

@@ -31,6 +31,7 @@ export { default as ptBRTranslations } from './i18n/pt-br.json';
 export { default as ruTranslations } from './i18n/ru.json';
 export { default as trTranslations } from './i18n/tr.json';
 
+export * from './store';
 export { SqliteClient } from './store/SqliteClient';
 export { OfflineDB } from './store/OfflineDB';
 export { version } from './version.json';

package/src/index.ts

@@ -1,40 +1,40 @@
 import { Notification, StateStore } from 'stream-chat';
 
-export type ToastState = {
+export type InAppNotificationsState = {
   notifications: Notification[];
 };
 
-const INITIAL_STATE: ToastState = {
+const INITIAL_STATE: InAppNotificationsState = {
   notifications: [],
 };
 
-export const toastStore = new StateStore<ToastState>(INITIAL_STATE);
+export const inAppNotificationsStore = new StateStore<InAppNotificationsState>(INITIAL_STATE);
 
-export const openToast = (notification: Notification) => {
+export const openInAppNotification = (notification: Notification) => {
   if (!notification.id) {
     console.warn('Notification must have an id to be opened!');
     return;
   }
-  const { notifications } = toastStore.getLatestValue();
+  const { notifications } = inAppNotificationsStore.getLatestValue();
 
   // Prevent duplicate notifications
   if (notifications.some((n) => n.id === notification.id)) {
     console.warn('Notification with the same id already exists!');
     return;
   }
 
-  toastStore.partialNext({
+  inAppNotificationsStore.partialNext({
     notifications: [...notifications, notification],
   });
 };
 
-export const closeToast = (id: string) => {
+export const closeInAppNotification = (id: string) => {
   if (!id) {
     console.warn('Notification id is required to be closed!');
     return;
   }
-  const { notifications } = toastStore.getLatestValue();
-  toastStore.partialNext({
+  const { notifications } = inAppNotificationsStore.getLatestValue();
+  inAppNotificationsStore.partialNext({
     notifications: notifications.filter((notification) => notification.id !== id),
   });
 };

…mples/SampleApp/src/store/toast-store.ts …/src/store/in-app-notifications-store.tsexamples/SampleApp/src/store/toast-store.ts renamed to package/src/store/in-app-notifications-store.ts examples/SampleApp/src/store/toast-store.ts renamed to package/src/store/in-app-notifications-store.ts

@@ -0,0 +1 @@
+export * from './in-app-notifications-store';