@ethora/chat-component-rn 26.4.1

package/src/hooks/useHeapSender.tsx

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { useMessageHeapState } from './useMessageHeapState';
+import { removeMessageFromHeapById } from '../roomStore/roomHeapSlice';
+import XmppClient from '../networking/xmppClient';
+
+export const useHeapSender = (client: XmppClient | null) => {
+  const dispatch = useDispatch();
+  const { queue } = useMessageHeapState();
+  const sendingRef = useRef(false);
+  const inFlightRef = useRef<Map<string, number>>(new Map());
+
+  const sendHeapMessages = useCallback(async () => {
+    if (!client || queue.length === 0) {return;}
+    if (!client.presencesReady) {
+      console.warn('Presences not ready, delaying heap send');
+      return;
+    }
+    if (sendingRef.current) {return;}
+    sendingRef.current = true;
+    try {
+      for (const msg of queue) {
+        const lastAttempt = inFlightRef.current.get(msg.id);
+        if (lastAttempt && Date.now() - lastAttempt < 15000) {
+          continue;
+        }
+        inFlightRef.current.set(msg.id, Date.now());
+        try {
+          if (msg.langSource) {
+            await client.sendTextMessageWithTranslateTagStanza(
+              msg.roomJid,
+              msg.user.firstName || msg.user.name?.split(' ')[0] || '',
+              msg.user.lastName || msg.user.name?.split(' ')[1] || '',
+              '',
+              msg.user.walletAddress || '',
+              msg.body,
+              '',
+              !!msg.isReply,
+              msg.showInChannel === 'true',
+              msg.mainMessage || '',
+              msg.langSource
+            );
+          } else {
+            await client.sendMessage(
+              msg.roomJid,
+              msg.user.firstName || msg.user.name?.split(' ')[0] || '',
+              msg.user.lastName || msg.user.name?.split(' ')[1] || '',
+              '',
+              msg.user.walletAddress || '',
+              msg.body,
+              '',
+              !!msg.isReply,
+              !!msg.showInChannel,
+              msg.mainMessage,
+              msg.id
+            );
+          }
+        } catch (err) {
+          console.warn('Failed to send heap message', msg, err);
+          inFlightRef.current.delete(msg.id);
+        }
+      }
+    } finally {
+      sendingRef.current = false;
+    }
+  }, [client, queue, dispatch]);
+
+  const prevReadyRef = useRef<boolean>(false);
+  useEffect(() => {
+    const nowReady = !!client?.presencesReady;
+    const wasReady = prevReadyRef.current;
+    prevReadyRef.current = nowReady;
+    if (!wasReady && nowReady && queue.length > 0) {
+      sendHeapMessages();
+    }
+  }, [client?.presencesReady, queue.length, sendHeapMessages]);
+
+  useEffect(() => {
+    const currentIds = new Set(queue.map((m) => m.id));
+    for (const id of Array.from(inFlightRef.current.keys())) {
+      if (!currentIds.has(id)) {
+        inFlightRef.current.delete(id);
+      }
+    }
+  }, [queue]);
+
+  return { sendHeapMessages };
+};

package/src/hooks/useLocalStorage.tsx

@@ -0,0 +1,53 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// Plain key-scoped AsyncStorage helper (NOT a React hook). Callable from
+// reducers, helpers, and React code alike. The `use*` name (now
+// `asyncLocalStorage`) was renamed to stop ESLint's `react-hooks/rules-of-hooks`
+// firing in every non-React call site. `useLocalStorage` is kept below
+// as a back-compat alias.
+export function asyncLocalStorage<T>(key: string) {
+  const get = async (): Promise<T | null> => {
+    try {
+      const storedValue = await AsyncStorage.getItem(key);
+      if (!storedValue) {return null;}
+      return JSON.parse(storedValue) as T;
+    } catch (error) {
+      console.error('Failed to read from AsyncStorage', error);
+      return null;
+    }
+  };
+
+  const set = async (value: T) => {
+    try {
+      const stringValue = JSON.stringify(value);
+      await AsyncStorage.setItem(key, stringValue);
+    } catch (error) {
+      console.error('Failed to write to AsyncStorage', error);
+    }
+  };
+
+  const update = async (updates: Partial<T>) => {
+    try {
+      const currentValue = await get();
+      const newValue = currentValue
+        ? { ...currentValue, ...updates }
+        : (updates as T);
+      await set(newValue);
+    } catch (error) {
+      console.error('Failed to update AsyncStorage value', error);
+    }
+  };
+
+  const remove = async () => {
+    try {
+      await AsyncStorage.removeItem(key);
+    } catch (error) {
+      console.error('Failed to remove AsyncStorage value', error);
+    }
+  };
+
+  return { get, set, update, remove };
+}
+
+// Back-compat alias for old call sites. New code: use asyncLocalStorage.
+export const useLocalStorage = asyncLocalStorage;

package/src/hooks/useLogout.tsx

@@ -0,0 +1,31 @@
+import { useDispatch } from 'react-redux';
+import { DeviceEventEmitter } from 'react-native';
+import { store } from '../roomStore';
+import { logout } from '../roomStore/chatSettingsSlice';
+import { setLogoutState } from '../roomStore/roomsSlice';
+import { useCallback } from 'react';
+import { clearHeap } from '../roomStore/roomHeapSlice';
+import { pushSubscriptionService } from '../services/pushSubscriptionService';
+
+const logoutService = {
+  performLogout: () => {
+    // Clear any pending notifications
+    DeviceEventEmitter.emit('chat:clear-notifications');
+
+    pushSubscriptionService.reset();
+    store.dispatch(logout());
+    store.dispatch(setLogoutState());
+    store.dispatch(clearHeap());
+  },
+};
+export const useLogout = () => {
+  const dispatch = useDispatch();
+
+  const handleLogout = useCallback(() => {
+    logoutService.performLogout();
+  }, []);
+
+  return handleLogout;
+};
+
+export { logoutService };

package/src/hooks/useMessageHeapState.tsx

@@ -0,0 +1,11 @@
+import { useSelector } from 'react-redux';
+import { RootState } from '../roomStore';
+
+export const useMessageHeapState = () => {
+  const queue = useSelector(
+    (state: RootState) => state.roomHeapSlice.messageHeap
+  );
+  const idSet = new Set(queue?.map((m) => m.id) ?? []);
+
+  return { queue, idSet };
+};

package/src/hooks/useMessageLoaderQueue.tsx

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { IRoom } from '../types/types';
+
+const DEFAULT_BATCH_SIZE = 5;
+const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_POLL_INTERVAL = 1_000;
+
+const roomHasMoreMessages = (room: IRoom, max: number = 20) =>
+  (room.messages?.length ?? 0) < max;
+
+const useMessageLoaderQueue = (
+  roomsList: string[],
+  rooms: Record<string, IRoom>,
+  globalLoading: boolean,
+  loading: boolean,
+  loadMoreMessages: (roomJid: string, max: number) => Promise<unknown>,
+  batchSize: number = DEFAULT_BATCH_SIZE,
+  pageSize: number = DEFAULT_PAGE_SIZE,
+  pollInterval: number = DEFAULT_POLL_INTERVAL
+) => {
+  const processedChats = useRef<Set<string>>(new Set());
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const processQueue = useCallback(async () => {
+    if (globalLoading || loading) {return;}
+
+    const unprocessed = roomsList.filter(
+      (jid) => !processedChats.current.has(jid)
+    );
+
+    if (!unprocessed.length) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+
+    for (let i = 0; i < unprocessed.length; i += batchSize) {
+      const batch = unprocessed.slice(i, i + batchSize);
+
+      await Promise.all(
+        batch.map(async (jid) => {
+          const room = rooms[jid];
+          if (
+            !!room &&
+            roomHasMoreMessages(room) &&
+            !room.noMessages &&
+            !room.historyComplete
+          ) {
+            try {
+              await loadMoreMessages(jid, pageSize);
+            } catch (err) {
+              console.error(`Error loading messages for ${jid}`, err);
+            }
+
+            await new Promise((res) => setTimeout(res, 200));
+          }
+          processedChats.current.add(jid);
+        })
+      );
+    }
+  }, [
+    roomsList?.length,
+    globalLoading,
+    loading,
+    loadMoreMessages,
+    batchSize,
+    pageSize,
+  ]);
+
+  useEffect(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    processedChats.current = new Set();
+
+    if (!globalLoading && !loading && !!roomsList.length) {
+      intervalRef.current = setInterval(processQueue, pollInterval);
+    }
+
+    return () => {
+      if (intervalRef.current) {clearInterval(intervalRef.current);}
+    };
+  }, [roomsList?.length, globalLoading, loading]);
+};
+
+export default useMessageLoaderQueue;

package/src/hooks/useMessageQueue.ts

@@ -0,0 +1,146 @@
+import { useEffect, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { PriorityQueue } from '../utils/PriorityQueue';
+import { IMessage, IRoom } from '../types/types';
+import { setIsLoading } from '../roomStore/roomsSlice';
+
+interface QueuedRoom {
+  jid: string;
+  priority: number;
+  lastMessageId?: string;
+  messageCount: number;
+  messages: IMessage[];
+}
+
+const hasDuplicateMessages = (
+  newMessages: IMessage[],
+  currentMessages: IMessage[]
+) => {
+  return newMessages.some((newMsg: IMessage) =>
+    currentMessages.some((currMsg: IMessage) => currMsg.id === newMsg.id)
+  );
+};
+
+const addRoomToProcessed = (
+  queueRoom: QueuedRoom,
+  processedRooms: React.MutableRefObject<Set<string>>,
+  rooms: { [jid: string]: IRoom }
+) => {
+  if (
+    queueRoom.messageCount >= 20 &&
+    !processedRooms.current.has(queueRoom.jid)
+  ) {
+    processedRooms.current.add(queueRoom.jid);
+    console.log(`Marking room: ${queueRoom.jid} as processed`);
+    if (rooms[queueRoom.jid].messages.length >= 30) {
+      console.log(`Trimming messages for room: ${queueRoom.jid}`);
+      rooms[queueRoom.jid].messages = rooms[queueRoom.jid].messages.slice(-30);
+    }
+  }
+};
+
+export const useMessageQueue = (
+  rooms: { [jid: string]: IRoom },
+  activeRoomJID: string,
+  loadMessages: (
+    roomJid: string,
+    max: number,
+    before?: number
+  ) => Promise<IMessage[]>
+) => {
+  const dispatch = useDispatch();
+  const messageQueue = useRef<PriorityQueue<QueuedRoom>>(
+    new PriorityQueue((a, b) => b.priority - a.priority)
+  );
+  const processedRooms = useRef<Set<string>>(new Set());
+
+  const asyncLoadMessages = async (
+    queueRoom: QueuedRoom,
+    rooms: { [jid: string]: IRoom }
+  ) => {
+    try {
+      if (
+        queueRoom.messageCount < 30 &&
+        !rooms[queueRoom.jid].historyComplete
+      ) {
+        console.log(`Loading messages for room: ${queueRoom.jid}`);
+        dispatch(setIsLoading({ chatJID: queueRoom.jid, loading: true }));
+
+        const newMessages = await loadMessages(
+          queueRoom.jid,
+          5,
+          Number(queueRoom.lastMessageId)
+        );
+        queueRoom.messages = [...queueRoom.messages, ...newMessages];
+
+        if (
+          queueRoom.messageCount + queueRoom.messages.length < 30 &&
+          !rooms[queueRoom.jid].historyComplete
+        ) {
+          console.log(`Re-queuing room: ${queueRoom.jid} for more messages`);
+          messageQueue.current.push({
+            jid: queueRoom.jid,
+            priority: queueRoom.priority,
+            lastMessageId: queueRoom.lastMessageId,
+            messageCount: queueRoom.messageCount + newMessages.length,
+            messages: queueRoom.messages,
+          });
+        }
+      }
+    } catch (error) {
+      console.error(
+        `Error processing room: ${queueRoom.jid}, continue to next room`,
+        error
+      );
+    } finally {
+      dispatch(setIsLoading({ chatJID: queueRoom.jid, loading: false }));
+      dispatch(setIsLoading({ loading: false }));
+      console.log(`Finished processing queue: ${queueRoom.jid}`);
+    }
+  };
+
+  // Process queue
+  useEffect(() => {
+    const processQueue = async () => {
+      const queue = messageQueue.current;
+      if (queue.isEmpty()) {return;}
+
+      const roomsToProcess = queue.pop(5);
+      if (roomsToProcess.length === 0) {return;}
+
+      await Promise.all(
+        roomsToProcess.map(async (room) => {
+          try {
+            if (room.messageCount < 30 && !rooms[room.jid].historyComplete) {
+              console.log(`Loading messages for room: ${room.jid}`);
+              dispatch(setIsLoading({ chatJID: room.jid, loading: true }));
+              await loadMessages(room.jid, 20, Number(room.lastMessageId));
+
+              if (
+                room.messageCount + 20 < 30 &&
+                !rooms[room.jid].historyComplete
+              ) {
+                console.log(`Re-queuing room: ${room.jid} for more messages`);
+                queue.push({
+                  ...room,
+                  messageCount: room.messageCount + 6,
+                });
+              }
+            }
+
+            addRoomToProcessed(room, processedRooms, rooms);
+          } catch (error) {
+            console.error(`Error processing room: ${room.jid}`, error);
+            queue.push({ ...room, priority: Math.max(room.priority - 1, 1) });
+          } finally {
+            dispatch(setIsLoading({ chatJID: room.jid, loading: false }));
+            console.log(`Finished processing room: ${room.jid}`);
+          }
+        })
+      );
+    };
+
+    const interval = setInterval(processQueue, 250);
+    return () => clearInterval(interval);
+  }, []);
+};

package/src/hooks/usePendingNotification.ts

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { RootState } from '../roomStore';
+import { setCurrentRoom, clearPendingNotificationJid } from '../roomStore/roomsSlice';
+
+const PENDING_NOTIFICATION_JID_KEY = 'ethora_pending_notification_jid';
+
+export function usePendingNotification() {
+  const dispatch = useDispatch();
+  const rooms = useSelector((state: RootState) => state.rooms.rooms);
+  const pendingNotificationJid = useSelector(
+    (state: RootState) => state.rooms.pendingNotificationJid
+  );
+  const isLoading = useSelector((state: RootState) => state.rooms.isLoading);
+
+  useEffect(() => {
+    const checkPendingNotification = async () => {
+      if (isLoading) {return;}
+
+      let jidToOpen = pendingNotificationJid;
+
+      if (!jidToOpen) {
+        try {
+          const storedJid = await AsyncStorage.getItem(PENDING_NOTIFICATION_JID_KEY);
+          if (storedJid) {
+            jidToOpen = storedJid;
+            await AsyncStorage.removeItem(PENDING_NOTIFICATION_JID_KEY);
+          }
+        } catch (error) {
+          console.error('Error reading from AsyncStorage:', error);
+        }
+      }
+
+      if (jidToOpen) {
+        const room = rooms[jidToOpen];
+        if (room) {
+          return;
+        }
+      }
+    };
+
+    checkPendingNotification();
+  }, [rooms, pendingNotificationJid, isLoading, dispatch]);
+
+  return { pendingNotificationJid };
+}
+
+export default usePendingNotification;

package/src/hooks/usePrevious.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+
+function usePrevious(value: any) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef();
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}
+
+export default usePrevious;

package/src/hooks/usePushNotifications.ts

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react';
+import { Alert, Platform } from 'react-native';
+import {
+  initPushNotifications,
+  onForegroundMessage,
+  onNotificationOpenedApp,
+  getInitialNotification,
+} from '../services/pushNotifications';
+import { pushSubscriptionService } from '../services/pushSubscriptionService';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../roomStore';
+import { useLocalStorage } from './useLocalStorage';
+import { setCurrentRoom, setPendingNotificationJid } from '../roomStore/roomsSlice';
+
+export function usePushNotifications() {
+  const [fcmToken, setFcmToken] = useState<string | null>(null);
+  const [notification, setNotification] = useState<any>(null);
+  const { user, config } = useSelector((state: RootState) => state.chatSettingStore);
+  const rooms = useSelector((state: RootState) => state.rooms.rooms);
+  const dispatch = useDispatch();
+
+  const { set, get } = useLocalStorage('fcmToken');
+
+  const handleNotificationPress = (remoteMessage: any) => {
+    console.log('[usePushNotifications] Notification pressed:', JSON.stringify(remoteMessage, null, 2));
+
+    const jid = remoteMessage?.data?.jid || remoteMessage?.data?.chatJid || remoteMessage?.jid;
+
+    if (jid) {
+      dispatch(setPendingNotificationJid(jid));
+    } else {
+      console.warn('No JID found in notification data:', remoteMessage?.data);
+    }
+  };
+
+  const initToken = async () => {
+    try {
+
+      const token = await get();
+      if (token) {
+        setFcmToken(token as string);
+        return;
+      }
+      const newToken = await initPushNotifications();
+
+      setFcmToken(newToken);
+      set(newToken as string);
+    } catch (error) {
+      console.error('Failed to init token:', error);
+    }
+  };
+
+  useEffect(() => {
+    initToken();
+
+    const unsubscribeForeground = onForegroundMessage((message) => {
+      setNotification(message);
+
+      const { notification: notif, data } = message;
+      if (notif) {
+        Alert.alert(
+          notif.title || 'Notification',
+          notif.body || '',
+          [
+            { text: 'OK' },
+            {
+              text: 'Open',
+              onPress: () => handleNotificationPress(message),
+            },
+          ]
+        );
+      }
+    });
+
+    const unsubscribeOpened = onNotificationOpenedApp((message) => {
+      console.log('[usePushNotifications] App opened from notification:', JSON.stringify(message, null, 2));
+      setNotification(message);
+      handleNotificationPress(message);
+    });
+
+    getInitialNotification().then((message) => {
+      if (message) {
+        console.log('[usePushNotifications] Initial notification:', JSON.stringify(message, null, 2));
+        setNotification(message);
+        handleNotificationPress(message);
+      }
+    });
+
+    return () => {
+      unsubscribeForeground();
+      unsubscribeOpened();
+    };
+  }, [rooms]);
+
+  useEffect(() => {
+    if (fcmToken && user && user.xmppPassword && user.defaultWallet?.walletAddress) {
+      pushSubscriptionService
+        .subscribeToPush(fcmToken, user, config?.projectName)
+        .catch((error) => {
+          console.error('Failed to subscribe to push:', error);
+        });
+    }
+  }, [fcmToken, user?.defaultWallet?.walletAddress, user?.xmppPassword]);
+
+  return { fcmToken, notification };
+}

package/src/hooks/useQRCodeChatHandler.ts

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import { Linking } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const QR_CHAT_STORAGE_KEY = '@ethora/chat-component-qrChatId';
+
+export const handleQRChatId = async () => {
+  try {
+    const initialUrl = await Linking.getInitialURL();
+
+    if (initialUrl) {
+      const url = new URL(initialUrl);
+      const qrChatId = new URLSearchParams(url.search).get('qrChatId');
+
+      if (qrChatId) {
+        await AsyncStorage.setItem(QR_CHAT_STORAGE_KEY, qrChatId);
+      }
+    }
+  } catch (error) {
+    console.error('Error handling QR chat ID in RN:', error);
+  }
+};
+
+export const useQRCodeChat = (
+  setCurrentRoom: (params: { roomJID: string }) => void,
+  conferenceServer?: string
+) => {
+  const [wasAutoSelected, setWasAutoSelected] = useState(false);
+
+  useEffect(() => {
+    handleQRChatId();
+  }, []);
+
+  useEffect(() => {
+    const checkStoredQrId = async () => {
+      try {
+        const qrChatId = await AsyncStorage.getItem(QR_CHAT_STORAGE_KEY);
+
+        if (qrChatId) {
+          const roomJID = conferenceServer
+            ? `${qrChatId}@${conferenceServer}`
+            : `${qrChatId}@conference.xmpp.ethoradev.com`;
+
+          setCurrentRoom({ roomJID });
+
+          await AsyncStorage.removeItem(QR_CHAT_STORAGE_KEY);
+          setWasAutoSelected(true);
+        }
+      } catch (error) {
+        console.error('Error using QR chat ID:', error);
+      }
+    };
+
+    checkStoredQrId();
+  }, [setCurrentRoom, conferenceServer]);
+
+  return { wasAutoSelected };
+};