@ethora/chat-component-rn 26.4.1

package/src/roomStore/Middleware/reactionsMiddleware.tsx

@@ -0,0 +1,77 @@
+import { Middleware, PayloadAction } from '@reduxjs/toolkit';
+import { updateRoom } from '../roomsSlice';
+import { IRoom, ReactionAction } from '../../types/types';
+import { nanoToMs } from '../../helpers/nanoToMs';
+
+export const reactionsMiddleware: Middleware =
+  (storeAPI) => (next) => (action: any) => {
+    if (action.type !== 'roomMessages/setReactions') {
+      return next(action);
+    }
+
+    if (!action.payload || typeof action.payload !== 'object') {
+      console.error('Invalid action payload for setReactions:', action);
+      return next(action);
+    }
+
+    const result = next(action);
+    const state = storeAPI.getState();
+    const rooms: { [jid: string]: IRoom } = state.rooms.rooms;
+    const { roomJID, reactions, latestReactionTimestamp, data, ...rest } =
+      action.payload;
+
+    const updLastMessage = () => {
+      if (!reactions?.[0]) {
+        const newLastMessage =
+          rooms[roomJID].messages[rooms[roomJID].messages.length - 1];
+
+        storeAPI.dispatch(
+          updateRoom({
+            jid: roomJID,
+            updates: {
+              lastMessageTimestamp: nanoToMs(
+                rooms[roomJID].messages[rooms[roomJID].messages.length - 1].id
+              ),
+              lastMessage: newLastMessage,
+            },
+          })
+        );
+      } else {
+        const updates = {
+          lastMessageTimestamp: nanoToMs(latestReactionTimestamp) ?? 0,
+          lastMessage: {
+            ...rest,
+            body: reactions[0],
+            emoji: reactions[0],
+            user: {
+              name: `${data.senderFirstName} ${data.senderLastName}`,
+              id: `emoji-${new Date().toString()}`,
+            },
+            date: new Date(nanoToMs(latestReactionTimestamp)).toISOString(),
+          },
+        };
+
+        storeAPI.dispatch(
+          updateRoom({
+            jid: roomJID,
+            updates,
+          })
+        );
+      }
+    };
+
+    if (!rooms[roomJID]) {
+      console.warn(`Room ${roomJID} not found in reactions middleware`);
+      return result;
+    }
+
+    if (
+      rooms[roomJID]?.lastMessageTimestamp <= nanoToMs(latestReactionTimestamp)
+    ) {
+      updLastMessage();
+    } else if (!rooms[roomJID]?.lastMessageTimestamp) {
+      updLastMessage();
+    }
+
+    return result;
+  };

package/src/roomStore/Middleware/testMiddleware.tsx

@@ -0,0 +1,20 @@
+import { Middleware } from '@reduxjs/toolkit';
+
+export const testMiddleware: Middleware =
+  (storeAPI) => (next) => (action: any) => {
+    if (process.env.NODE_ENV === 'development') {
+      console.group(`🔍 TestMiddleware - Action: ${action.type}`);
+      console.log('📤 Action:', action);
+      console.log('📊 Current State:', storeAPI.getState());
+    }
+
+    const result = next(action);
+
+    if (process.env.NODE_ENV === 'development') {
+      console.log('📥 Result:', result);
+      console.log('🔄 New State:', storeAPI.getState());
+      console.groupEnd();
+    }
+
+    return result;
+  };

package/src/roomStore/Middleware/unreadMidlleware.tsx

@@ -0,0 +1,58 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { updateRoom } from '../roomsSlice';
+import { IMessage } from '../../types/types';
+
+let previousMessagesCount: { [jid: string]: number } = {};
+
+export const unreadMiddleware: Middleware =
+  (storeAPI) => (next) => (action: any) => {
+    if (!action || !action.type) {
+      console.error('Invalid action in unreadMiddleware:', action);
+      return next(action);
+    }
+
+    if (action?.type === 'roomMessages/deleteRoomMessage') {
+      return next(action);
+    }
+
+    const result = next(action);
+
+    const state = storeAPI.getState();
+    const rooms = state.rooms.rooms;
+    const activeChatJID = state.rooms.activeRoomJID;
+
+    if (rooms && Object.keys(rooms).length > 0) {
+      Object.keys(rooms).forEach((jid) => {
+        const room = rooms[jid];
+        if (room.lastViewedTimestamp !== 0 && jid !== activeChatJID) {
+          const currentMessagesLength = room.messages?.length || 0;
+
+          if (previousMessagesCount[jid] !== currentMessagesLength) {
+            previousMessagesCount[jid] = currentMessagesLength;
+
+            // Mirror `countNewerMessages` in roomsSlice: ignore the
+            // "delimiter-new" sentinel + locally-pending sends so the
+            // two paths never disagree.
+            const unreadMessagesCount = room.messages?.filter(
+              (msg: IMessage) =>
+                msg.id !== 'delimiter-new' &&
+                !msg.pending &&
+                new Date(msg.date).getTime() >
+                  (room.lastViewedTimestamp || 0)
+            ).length;
+
+            if (room.unreadMessages !== unreadMessagesCount) {
+              storeAPI.dispatch(
+                updateRoom({
+                  jid,
+                  updates: { unreadMessages: unreadMessagesCount },
+                })
+              );
+            }
+          }
+        }
+      });
+    }
+
+    return result;
+  };

package/src/roomStore/chatSettingsSlice.ts

@@ -0,0 +1,178 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import {
+  DeleteModal,
+  EditAction,
+  IConfig,
+  IUser,
+  ModalFile,
+  ModalType,
+  User,
+} from '../types/types';
+import { Iso639_1Codes } from '../types/models/language.model';
+import { localStorageConstants } from '../helpers/constants/LOCAL_STORAGE';
+import { asyncLocalStorage } from '../hooks/useLocalStorage';
+
+interface ChatState {
+  user: User;
+  config?: IConfig;
+  activeModal?: ModalType;
+  deleteModal?: DeleteModal;
+  selectedUser?: IUser;
+  activeFile?: ModalFile;
+  client?: any;
+  langSource?: Iso639_1Codes;
+}
+
+const unpackAndTransform = (input?: User): User => {
+  return {
+    description: '',
+    token: input?.token || '',
+    profileImage: input?.profileImage || '',
+    _id: input?._id || '',
+    walletAddress: input?.defaultWallet?.walletAddress || '',
+    xmppPassword: input?.xmppPassword || '',
+    refreshToken: input?.refreshToken || '',
+    firstName: input?.firstName || '',
+    lastName: input?.lastName || '',
+    defaultWallet: {
+      walletAddress: input?.defaultWallet?.walletAddress || '',
+    },
+    email: input?.email || '',
+    username: input?.username || '',
+    appId: input?.appId || '',
+    homeScreen: input?.homeScreen || '',
+    registrationChannelType: input?.registrationChannelType || '',
+    updatedAt: input?.updatedAt || '',
+    authMethod: input?.authMethod || '',
+    resetPasswordExpires: input?.resetPasswordExpires || '',
+    resetPasswordToken: input?.resetPasswordToken || '',
+    xmppUsername: input?.xmppUsername || '',
+    roles: input?.roles || [],
+    tags: input?.tags || [],
+    __v: input?.__v || 0,
+    isProfileOpen: input?.isProfileOpen || false,
+    isAssetsOpen: input?.isAssetsOpen || false,
+    isAgreeWithTerms: input?.isAgreeWithTerms || false,
+  };
+};
+
+const initialState: ChatState = {
+  user: {
+    description: '',
+    token: '',
+    profileImage: '',
+    _id: '',
+    walletAddress: '',
+    xmppPassword: '',
+    refreshToken: '',
+    firstName: '',
+    lastName: '',
+    defaultWallet: {
+      walletAddress: '',
+    },
+    email: '',
+    username: '',
+    appId: '',
+    homeScreen: '',
+    registrationChannelType: '',
+    updatedAt: '',
+    authMethod: '',
+    resetPasswordExpires: '',
+    resetPasswordToken: '',
+    xmppUsername: '',
+    roles: [],
+    tags: [],
+    __v: 0,
+    isProfileOpen: true,
+    isAssetsOpen: true,
+    isAgreeWithTerms: false,
+  },
+  deleteModal: {
+    isDeleteModal: false,
+    roomJid: '',
+    messageId: '',
+  },
+  config: { colors: { primary: '#0052CD', secondary: '#F3F6FC' } },
+};
+
+export const chatSlice = createSlice({
+  name: 'chat',
+  initialState,
+  reducers: {
+    setUser: (state, action: PayloadAction<User>) => {
+      state.user = unpackAndTransform(action.payload);
+      asyncLocalStorage(localStorageConstants.ETHORA_USER).set(
+        unpackAndTransform(action.payload)
+      );
+    },
+    updateUser(state, action: PayloadAction<{ updates: Partial<User> }>) {
+      const { updates } = action.payload;
+      const user = state.user;
+      if (user) {
+        state.user = {
+          ...user,
+          ...updates,
+        };
+      }
+    },
+    setConfig: (state, action: PayloadAction<IConfig | undefined>) => {
+      // Cast away immer's WritableDraft — IConfig contains callable
+      // fields (eventHandlers, customComponent) that confuse the draft
+      // type inference but are inert at write-time.
+      state.config = action.payload as any;
+    },
+    setActiveModal: (state, action: PayloadAction<ModalType | undefined>) => {
+      state.activeModal = action.payload;
+    },
+    setActiveFile: (state, action: PayloadAction<ModalFile>) => {
+      state.activeFile = action.payload;
+    },
+    setDeleteModal: (state, action: PayloadAction<DeleteModal | undefined>) => {
+      state.deleteModal = action.payload;
+    },
+    setStoreClient: (state, action: PayloadAction<any>) => {
+      state.client = action.payload;
+    },
+    setSelectedUser: (state, action: PayloadAction<IUser | undefined>) => {
+      state.selectedUser = action.payload;
+    },
+    refreshTokens: (
+      state,
+      action: PayloadAction<{ token: string; refreshToken: string }>
+    ) => {
+      state.user.refreshToken = action.payload.refreshToken;
+      state.user.token = action.payload.token;
+      // AsyncStorage is async; fire-and-forget so the reducer stays sync.
+      asyncLocalStorage(localStorageConstants.ETHORA_USER).set(state.user);
+    },
+    logout: (state) => {
+      state.user = unpackAndTransform();
+      state.config = undefined;
+      state.client = undefined;
+      state.langSource = undefined;
+      asyncLocalStorage(localStorageConstants.ETHORA_USER).remove();
+    },
+    setLangSource: (
+      state,
+      action: PayloadAction<Iso639_1Codes | undefined>
+    ) => {
+      state.langSource = action.payload;
+    },
+  },
+});
+
+export const {
+  setUser,
+  setConfig,
+  refreshTokens,
+  logout,
+  setActiveModal,
+  setDeleteModal,
+  setSelectedUser,
+  updateUser,
+  setActiveFile,
+  setStoreClient,
+  setLangSource,
+} = chatSlice.actions;
+
+export default chatSlice.reducer;

package/src/roomStore/index.ts

@@ -0,0 +1,68 @@
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import chatSettingsReducer, { setUser } from './chatSettingsSlice';
+import roomsSlice, { addRoom } from './roomsSlice';
+import { roomHeapSlice } from './roomHeapSlice';
+import { IRoom } from '../types/types';
+import { unreadMiddleware } from './Middleware/unreadMidlleware';
+import { logoutMiddleware } from './Middleware/logoutMiddleware';
+import { newMessageMidlleware } from './Middleware/newMessageMidlleware';
+import { reactionsMiddleware } from './Middleware/reactionsMiddleware';
+import { persistenceMiddleware, readPersistedState } from './persistence';
+
+const rootReducer = combineReducers({
+  chatSettingStore: chatSettingsReducer,
+  rooms: roomsSlice,
+  roomHeapSlice: roomHeapSlice.reducer,
+});
+
+export const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        // Slice names: chatSlice→'chat', roomsStore→'roomMessages'.
+        ignoredActions: [
+          'chat/addMessage',
+          'chat/setStoreClient',
+          'chat/setConfig',
+          'roomMessages/addRoom',
+        ],
+        ignoredActionPaths: ['payload.client', 'payload.config'],
+        ignoredPaths: [
+          'chat.messages.timestamp',
+          'chatSettingStore.client',
+          'chatSettingStore.config',
+        ],
+      },
+    })
+      .concat(unreadMiddleware)
+      .concat(newMessageMidlleware)
+      .concat(reactionsMiddleware)
+      .concat(logoutMiddleware)
+      .concat(persistenceMiddleware),
+});
+
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppDispatch = typeof store.dispatch;
+
+export const getActiveRoom = (state: RootState): IRoom | null => {
+  const roomMessagesState = state.rooms;
+  return roomMessagesState.activeRoomJID
+    ? roomMessagesState.rooms[roomMessagesState.activeRoomJID]
+    : null;
+};
+
+// Async rehydrate — read persisted slices and replay them as standard
+// actions. Idempotent: only rehydrates when a slice has data.
+export const persistorReady = (async () => {
+  const { chat, rooms } = await readPersistedState();
+  if (chat?.user && chat.user.walletAddress) {
+    store.dispatch(setUser(chat.user));
+  }
+  if (rooms?.rooms) {
+    for (const [jid, room] of Object.entries(rooms.rooms)) {
+      if (!jid || !room) {continue;}
+      store.dispatch(addRoom({ roomData: room as IRoom }));
+    }
+  }
+})();

package/src/roomStore/persistence.ts

@@ -0,0 +1,152 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Middleware } from '@reduxjs/toolkit';
+import { IMessage, IRoom, User } from '../types/types';
+
+// -------------------------------------------------------------------
+// Lightweight RN persistence layer. Mirrors what redux-persist gives
+// the web component:
+//
+//   - persist chatSettingStore.user (sanitized) and rooms state
+//   - blacklist transient fields (modals, activeRoomJID, etc.)
+//   - cap each room's messages to the most recent 50
+//   - debounced writes (200ms) on relevant action types
+//
+// Not encrypted. We rely on AsyncStorage's per-app sandbox.
+// -------------------------------------------------------------------
+
+const KEY_CHAT = '@ethora/persist:chatSettingStore';
+const KEY_ROOMS = '@ethora/persist:rooms';
+
+const MESSAGE_LIMIT = 50;
+
+interface PersistedChatState {
+  user: User;
+}
+
+interface PersistedRoomsState {
+  rooms: Record<string, IRoom>;
+  // intentionally NOT persisted: activeRoomJID, editAction, isLoading
+}
+
+const sanitizeUser = (user?: User): User | null => {
+  if (!user) {return null;}
+  // Drop secrets we don't want at rest — destructure to omit, then
+  // explicitly zero them in the persisted shape.
+  const {
+    token: _token,
+    refreshToken: _refreshToken,
+    xmppPassword: _xmppPassword,
+    ...rest
+  } = user as any;
+  return {
+    ...rest,
+    token: '',
+    refreshToken: '',
+    xmppPassword: '',
+  } as User;
+};
+
+const sanitizeMessages = (messages: IMessage[]): IMessage[] => {
+  if (!Array.isArray(messages)) {return [];}
+  if (messages.length <= MESSAGE_LIMIT) {return messages;}
+  return messages.slice(-MESSAGE_LIMIT);
+};
+
+const sanitizeRooms = (
+  rooms: Record<string, IRoom>
+): Record<string, IRoom> => {
+  if (!rooms || typeof rooms !== 'object') {return {};}
+  const out: Record<string, IRoom> = {};
+  for (const [jid, room] of Object.entries(rooms)) {
+    if (!jid || typeof jid !== 'string' || !jid.includes('@')) {continue;}
+    if (!room || typeof room !== 'object' || Array.isArray(room)) {continue;}
+    out[jid] = {
+      ...room,
+      messages: sanitizeMessages(room?.messages || []),
+      composing: false,
+      composingList: [],
+      isLoading: false,
+      historyPreloadState: 'idle',
+    };
+  }
+  return out;
+};
+
+let writeTimer: ReturnType<typeof setTimeout> | null = null;
+
+/**
+ * Middleware that debounces writes of the persisted slices to AsyncStorage.
+ * Only triggers on actions that actually mutate persisted state.
+ */
+export const persistenceMiddleware: Middleware = (storeAPI) => (next) => (
+  action: any
+) => {
+  const result = next(action);
+
+  const type: string = action?.type || '';
+  if (
+    !type.startsWith('roomMessages/') &&
+    !type.startsWith('chat/setUser') &&
+    !type.startsWith('chat/updateUser') &&
+    !type.startsWith('chat/refreshTokens') &&
+    !type.startsWith('chat/logout')
+  ) {
+    return result;
+  }
+
+  if (writeTimer) {clearTimeout(writeTimer);}
+  writeTimer = setTimeout(() => {
+    try {
+      const state = storeAPI.getState();
+      const chatPayload: PersistedChatState = {
+        user: sanitizeUser(state.chatSettingStore?.user) as User,
+      };
+      const roomsPayload: PersistedRoomsState = {
+        rooms: sanitizeRooms(state.rooms?.rooms || {}),
+      };
+      AsyncStorage.multiSet([
+        [KEY_CHAT, JSON.stringify(chatPayload)],
+        [KEY_ROOMS, JSON.stringify(roomsPayload)],
+      ]).catch((e) => console.warn('persist write failed', e));
+    } catch (e) {
+      console.warn('persist serialize failed', e);
+    }
+  }, 200);
+
+  return result;
+};
+
+/**
+ * Read persisted slices from AsyncStorage. Called once at store creation;
+ * we DON'T hydrate synchronously (AsyncStorage is async) — instead, the
+ * caller dispatches rehydrate actions when the read resolves.
+ */
+export async function readPersistedState(): Promise<{
+  chat: PersistedChatState | null;
+  rooms: PersistedRoomsState | null;
+}> {
+  try {
+    const [chatRaw, roomsRaw] = await AsyncStorage.multiGet([
+      KEY_CHAT,
+      KEY_ROOMS,
+    ]);
+    const chat = chatRaw[1] ? (JSON.parse(chatRaw[1]) as PersistedChatState) : null;
+    const rooms = roomsRaw[1]
+      ? (JSON.parse(roomsRaw[1]) as PersistedRoomsState)
+      : null;
+    return { chat, rooms };
+  } catch (e) {
+    console.warn('persist read failed', e);
+    return { chat: null, rooms: null };
+  }
+}
+
+export async function clearPersistedState(): Promise<void> {
+  try {
+    await AsyncStorage.multiRemove([KEY_CHAT, KEY_ROOMS]);
+  } catch (e) {
+    console.warn('persist clear failed', e);
+  }
+}
+
+export const PERSIST_KEYS = { KEY_CHAT, KEY_ROOMS };

package/src/roomStore/roomHeapSlice.ts

@@ -0,0 +1,37 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { IMessage } from '../types/types';
+
+interface roomHeapSliceState {
+  messageHeap: IMessage[];
+}
+
+const initialState: roomHeapSliceState = {
+  messageHeap: [],
+};
+
+export const roomHeapSlice = createSlice({
+  name: 'roomHeapStore',
+  initialState,
+  reducers: {
+    addMessageToHeap: (state, action: PayloadAction<IMessage>) => {
+      state.messageHeap.push(action.payload);
+    },
+    removeMessageFromHeapById: (state, action: PayloadAction<string>) => {
+      const index = state.messageHeap.findIndex((m) => m.id === action.payload);
+      if (index !== -1) {
+        state.messageHeap.splice(index, 1);
+      }
+    },
+    clearHeap: (state) => {
+      state.messageHeap = [];
+    },
+  },
+});
+
+export const {
+  addMessageToHeap,
+  clearHeap,
+  removeMessageFromHeapById,
+} = roomHeapSlice.actions;
+
+export default roomHeapSlice.reducer;