@ethora/chat-component-rn 26.4.1

package/src/hooks/useXmppInitialization.ts

@@ -0,0 +1,148 @@
+/** @format */
+
+import { useEffect, useState, useRef } from 'react';
+import { AppState } from 'react-native';
+import { useXmppClient } from '../context/xmppProvider';
+import { setBaseURL } from '../networking/apiClient';
+import { loginViaJwt } from '../networking/api-requests/auth.api';
+import { walletToUsername } from '../helpers/walletUsername';
+import { xmppSettingsInterface } from '../types/types';
+import { useAppDispatch } from './hooks';
+import { setUser } from '../roomStore/chatSettingsSlice';
+
+interface UseXmppInitializationOptions {
+  chatToken?: string | null;
+  xmppSettings?: xmppSettingsInterface;
+  baseURL?: string;
+  enabled?: boolean;
+}
+
+interface UseXmppInitializationResult {
+  isInitializing: boolean;
+  initializationError: string | null;
+  isInitialized: boolean;
+}
+
+/**
+ * Hook for initializing XMPP client via JWT token
+ * Used for preloading chat before opening workspace
+ */
+export const useXmppInitialization = (
+  options: UseXmppInitializationOptions = {}
+): UseXmppInitializationResult => {
+  const {
+    chatToken,
+    xmppSettings = {
+      devServer: 'wss://xmpp.ethoradev.com/ws',
+      host: 'xmpp.ethoradev.com',
+      conference: 'conference.xmpp.ethoradev.com',
+    },
+    baseURL = 'https://api.ethoradev.com/v1',
+    enabled = true,
+  } = options;
+
+  const { client, initializeClient } = useXmppClient();
+  const dispatch = useAppDispatch();
+  const [isInitializing, setIsInitializing] = useState(false);
+  const [initializationError, setInitializationError] = useState<string | null>(null);
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    if (baseURL) {
+      setBaseURL(baseURL, undefined);
+      console.log('🚀 useXmppInitialization: Base URL set for chat', baseURL);
+    }
+  }, [baseURL]);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const initXmppClient = async () => {
+      if (client) {
+        console.log('useXmppInitialization: Client already initialized');
+        return;
+      }
+
+      if (!chatToken) {
+        console.log('useXmppInitialization: Waiting for chatToken...');
+        return;
+      }
+
+      if (isInitializing) {
+        console.log('useXmppInitialization: Initialization in progress...');
+        return;
+      }
+
+      if (AppState.currentState !== 'active') {
+        console.log('useXmppInitialization: App not active, skip init');
+        return;
+      }
+
+      try {
+        setIsInitializing(true);
+        setInitializationError(null);
+        console.log('useXmppInitialization: Starting XMPP client initialization...');
+
+        const user = await loginViaJwt(chatToken);
+        console.log('useXmppInitialization: User data received', {
+          hasXmppUsername: !!user.xmppUsername,
+          hasXmppPassword: !!user.xmppPassword,
+        });
+
+        dispatch(setUser(user));
+        console.log('useXmppInitialization: User saved to store');
+
+        const xmppUsername =
+          user.xmppUsername ||
+          walletToUsername(user.defaultWallet?.walletAddress || '');
+
+        if (!xmppUsername || !user.xmppPassword) {
+          throw new Error('Missing XMPP credentials (username or password)');
+        }
+
+        console.log('useXmppInitialization: Initializing XMPP client...');
+        const initializedClient = await initializeClient(
+          xmppUsername,
+          user.xmppPassword,
+          xmppSettings
+        );
+
+        console.log('useXmppInitialization: XMPP client initialized successfully', {
+          status: initializedClient.status,
+        });
+      } catch (error: any) {
+        console.error('useXmppInitialization: Failed to initialize XMPP client', error);
+        if (isMountedRef.current) {
+          setInitializationError(error?.message || 'Unknown error');
+        }
+      } finally {
+        if (isMountedRef.current) {
+          setIsInitializing(false);
+        }
+      }
+    };
+
+    initXmppClient();
+  }, [
+    chatToken,
+    client,
+    initializeClient,
+    isInitializing,
+    enabled,
+    xmppSettings,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  return {
+    isInitializing,
+    initializationError,
+    isInitialized: !!client && client.status === 'online',
+  };
+};

package/src/main.ts

@@ -0,0 +1,45 @@
+/**
+ * Library entry point.
+ *
+ * Consumers drop the component into their own RN/Expo app like:
+ *
+ *   import { Chat } from '@ethora/chat-component';
+ *
+ *   <Chat
+ *     config={{
+ *       baseUrl: 'https://api.chat.ethora.com/v1',
+ *       xmppSettings: { host: 'xmpp.chat.ethora.com' },
+ *       jwtLogin: { enabled: true, token: '<paste JWT>' },
+ *       initBeforeLoad: true,
+ *       colors: { primary: '#5E3FDE' },
+ *     }}
+ *   />
+ *
+ * The provider wires up redux + xmpp + toast automatically. Pass
+ * `roomJID` to lock the chat to a single room, or omit it to show the
+ * built-in room list.
+ */
+
+import 'react-native-get-random-values';
+
+// Main mount points.
+export { ReduxWrapper as Chat } from './components/MainComponents/ReduxWrapper';
+export { XmppProvider } from './context/xmppProvider';
+
+// Hooks that consumers usually need (badge counts, logout, push, etc.).
+export { useUnread } from './hooks/useUnreadMessagesCounter';
+export { logoutService } from './hooks/useLogout';
+export { useQRCodeChat, handleQRChatId } from './hooks/useQRCodeChatHandler';
+export { resendMessage } from './utils/resendMessage';
+
+// Public types — needed so consumers can type their `config` prop and
+// any event handlers they pass in.
+export type {
+  IConfig,
+  IRoom,
+  IMessage,
+  IUser,
+  User,
+  ConfigUser,
+  MessageProps,
+} from './types/types';

package/src/networking/api-requests/auth.api.ts

@@ -0,0 +1,140 @@
+import { User } from '../../types/types';
+
+// import {
+//   getAuth,
+//   GoogleAuthProvider,
+//   signInWithPopup,
+//   User as FirebaseUser,
+// } from 'firebase/auth';
+// import { app } from '../../../firebase-config';
+
+import http, { appToken } from '../apiClient';
+import { store } from '../../roomStore';
+
+// login functions
+export async function loginEmail(email: string, password: string) {
+  const res = await http.post<{
+    user: User;
+    refreshToken: string;
+    token: string;
+  }>(
+    '/users/login-with-email',
+    {
+      email,
+      password,
+    },
+    { headers: { Authorization: appToken } }
+  );
+
+  console.log('loginEmail res', res.data);
+
+  return res;
+}
+
+export function loginSocial(
+  idToken: string,
+  accessToken: string,
+  loginType: string,
+  authToken: string = 'authToken'
+) {
+  return http.post<any>(
+    '/users/login',
+    {
+      idToken,
+      accessToken,
+      loginType,
+      authToken,
+    },
+    { headers: { Authorization: appToken } }
+  );
+}
+
+export function registerSocial(
+  idToken: string,
+  accessToken: string,
+  authToken: string,
+  loginType: string,
+  signUpPlan?: string
+) {
+  return http.post(
+    '/users',
+    {
+      idToken,
+      accessToken,
+      loginType,
+      authToken: authToken,
+      signupPlan: signUpPlan,
+    },
+    { headers: { Authorization: appToken } }
+  );
+}
+
+export function checkEmailExist(email: string) {
+  return http.get(
+    '/users/checkEmail/' + email,
+
+    { headers: { Authorization: appToken } }
+  );
+}
+
+export async function loginViaJwt(clientToken: string): Promise<User> {
+  console.log('🟡 loginViaJwt: Sending JWT request to /users/client');
+  const response = await http.post<{
+    user: User;
+    refreshToken: string;
+    token: string;
+  }>('/users/client', null, { headers: { 'x-custom-token': clientToken } });
+
+  console.log('✅ loginViaJwt: Received response', {
+    hasUser: !!response.data.user,
+    hasToken: !!response.data.token,
+    hasRefreshToken: !!response.data.refreshToken,
+    userData: response.data.user ? {
+      _id: response.data.user._id,
+      email: response.data.user.email,
+      firstName: response.data.user.firstName,
+      lastName: response.data.user.lastName,
+      xmppUsername: response.data.user.xmppUsername,
+    } : null,
+  });
+
+  const user = {
+    ...response.data.user,
+    refreshToken: response.data.refreshToken,
+    token: response.data.token,
+  };
+
+  return user;
+}
+
+// export const signInWithGoogle = async () => {
+//   const auth = getAuth(app);
+//   const googleProvider = new GoogleAuthProvider();
+//   googleProvider.addScope('https://www.googleapis.com/auth/userinfo.email');
+//   googleProvider.addScope('https://www.googleapis.com/auth/userinfo.profile');
+//   try {
+//     const res = await signInWithPopup(auth, googleProvider);
+//     const user = res.user as FirebaseUser;
+//     const idToken = await auth?.currentUser?.getIdToken();
+//     const credential = GoogleAuthProvider.credentialFromResult(res);
+//     return {
+//       user,
+//       idToken,
+//       credential,
+//     };
+//   } catch (error) {
+//     console.error(error);
+//     return {};
+//   }
+// };
+
+export function uploadFile(formData: FormData) {
+  const token = store.getState().chatSettingStore?.user?.token ?? '';
+  return http.post('/files/', formData, {
+    headers: {
+      Authorization: token,
+      Accept: '*/*',
+      // "Content-Type": "multipart/form-data",
+    },
+  });
+}

package/src/networking/api-requests/push.api.ts

@@ -0,0 +1,55 @@
+import axios from 'axios';
+import { Platform } from 'react-native';
+import { store } from '../../roomStore';
+
+const PUSH_API_URL = 'https://push.ethoradev.com/api/v1';
+
+const pushAxios = axios.create({
+  baseURL: PUSH_API_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export interface PushSubscriptionPayload {
+  projectId: string;
+  registrationToken: string;
+  deviceType: 'web' | 'android' | 'ios';
+  jid: string;
+}
+
+export async function subscribeToPushNotifications(
+  fcmToken: string,
+  userJid: string,
+  projectName: string = 'Preshent',
+): Promise<void> {
+  const deviceType: 'web' | 'android' | 'ios' = Platform.select({
+    ios: 'ios',
+    android: 'android',
+    default: 'web',
+  }) as 'web' | 'android' | 'ios';
+
+  const payload: PushSubscriptionPayload = {
+    projectId: projectName,
+    registrationToken: fcmToken,
+    deviceType,
+    jid: `${userJid}@xmpp.ethoradev.com`,
+  };
+
+  console.log('payload', payload);
+
+  try {
+    const token = store.getState().chatSettingStore?.user?.token || '';
+
+    const response = await pushAxios.post('/subscriptions', payload, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    console.log('Successfully subscribed to push notifications', response.data);
+    return response.data;
+  } catch (error: any) {
+    console.error('Failed to subscribe to push notifications:', error);
+  }
+}
+

package/src/networking/api-requests/roomMembers.api.ts

@@ -0,0 +1,20 @@
+import http from '../apiClient';
+import { RoomMember } from '../../types/types';
+
+export async function getUserByXmppUsername(
+  xmppUsername: string,
+  token: string
+): Promise<RoomMember | null> {
+  try {
+    const res = await http.get<{ result: RoomMember }>(
+      `/apps/users/${xmppUsername}`,
+      {
+        headers: { Authorization: token },
+      }
+    );
+    return res.data.result;
+  } catch (error) {
+    console.error(`Failed to fetch user: ${xmppUsername}`, error);
+    return null;
+  }
+}

package/src/networking/api-requests/rooms.api.ts

@@ -0,0 +1,142 @@
+import { store } from '../../roomStore';
+import { addRoom } from '../../roomStore/roomsSlice';
+import { IRoom } from '../../types/types';
+import http from '../apiClient';
+
+interface ApiRoomMember {
+  _id: string;
+  firstName?: string;
+  lastName?: string;
+}
+
+interface ApiRoom {
+  _id?: string;
+  name: string;
+  title?: string;
+  jid?: string;
+  description?: string;
+  participants?: number;
+  type?: string;
+  icon?: string;
+  picture?: string;
+  members?: ApiRoomMember[];
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+/**
+ * Materialize a REST `/chats/my` item into an `IRoom` + dispatch
+ * `addRoom`. Without this, REST-fetched rooms never make it into
+ * `state.rooms.rooms` and `ChatRoom` falls back to the "no rooms,
+ * create one!" empty state even when the user has rooms server-side.
+ *
+ * The room jid is derived from the conference host. We try several
+ * places:
+ *   1. explicit `room.jid` from the server (if present)
+ *   2. `<name>@conference.<xmppHost>` where xmppHost comes from the
+ *      provider's `xmppSettings.host` saved to `chatSettingStore.config`
+ *   3. fallback: `<name>@conference.xmpp.chat.ethora.com`
+ */
+function dispatchRoomsFromRestItems(items: ApiRoom[]): void {
+  if (!items?.length) return;
+  const config = store.getState().chatSettingStore?.config as any;
+  const host: string =
+    config?.xmppSettings?.host ||
+    config?.xmppSettings?.conference?.replace(/^conference\./, '') ||
+    'xmpp.chat.ethora.com';
+  const conference =
+    config?.xmppSettings?.conference || `conference.${host}`;
+
+  for (const item of items) {
+    if (!item) continue;
+    const jid = item.jid || `${item.name}@${conference}`;
+    if (!jid.includes('@')) continue;
+    const room: IRoom = {
+      id: item._id || jid,
+      jid,
+      name: item.name,
+      title: item.title || item.name,
+      usersCnt: item.participants ?? item.members?.length ?? 0,
+      messages: [],
+      isLoading: false,
+      roomBg: '',
+      icon: item.picture || item.icon,
+      createdAt: item.createdAt,
+      updatedAt: item.updatedAt,
+      description: (item as any).description,
+      type: (item as any).type,
+      // ChatProfileModal renders this list under the description/type
+      // fields. The REST API returns `members` (an array of {_id,
+      // firstName?, lastName?}); map to the shape RoomMember expects.
+      roomMembers: (item.members || []).map((m: any) => ({
+        firstName: m.firstName,
+        lastName: m.lastName,
+        xmppUsername: m._id || '',
+        role: m.role,
+        ban_status: m.ban_status,
+        last_active: m.last_active,
+        jid: m.jid || '',
+      })) as any,
+    };
+    store.dispatch(addRoom({ roomData: room }));
+  }
+}
+
+const GET_ROOMS_CACHE_MS = 60_000;
+let getRoomsInFlight: Promise<{ items: ApiRoom[] }> | null = null;
+let getRoomsInFlightToken = '';
+let lastGetRoomsResponse: { items: ApiRoom[] } | null = null;
+let lastGetRoomsResponseAt = 0;
+let lastGetRoomsResponseToken = '';
+
+/**
+ * REST equivalent of getRoomsStanza. Used by initBeforeLoad to prefetch
+ * the room list in parallel with the XMPP handshake. Results are cached
+ * per-token for 60s so a downstream re-fetch on mount is a no-op.
+ */
+export async function getRooms(): Promise<{ items: ApiRoom[] }> {
+  const token = store.getState().chatSettingStore.user.token || '';
+  const now = Date.now();
+
+  if (
+    lastGetRoomsResponse &&
+    lastGetRoomsResponseToken === token &&
+    now - lastGetRoomsResponseAt < GET_ROOMS_CACHE_MS
+  ) {
+    return lastGetRoomsResponse;
+  }
+
+  if (getRoomsInFlight && getRoomsInFlightToken === token) {
+    return getRoomsInFlight;
+  }
+
+  getRoomsInFlightToken = token;
+  getRoomsInFlight = (async () => {
+    const response = await http.get('/chats/my', {
+      headers: { Authorization: token },
+    });
+    lastGetRoomsResponse = response.data;
+    lastGetRoomsResponseAt = Date.now();
+    lastGetRoomsResponseToken = token;
+    dispatchRoomsFromRestItems(response.data?.items || []);
+    return response.data;
+  })();
+
+  try {
+    return await getRoomsInFlight;
+  } catch (error) {
+    console.log('Error loading rooms via REST', error);
+    return { items: [] };
+  } finally {
+    getRoomsInFlight = null;
+    getRoomsInFlightToken = '';
+  }
+}
+
+export function clearRoomsRestCache() {
+  lastGetRoomsResponse = null;
+  lastGetRoomsResponseAt = 0;
+  lastGetRoomsResponseToken = '';
+}
+
+export type { ApiRoom };

package/src/networking/api-requests/user.api.ts

@@ -0,0 +1,65 @@
+import http from '../apiClient';
+import { store } from '../../roomStore';
+import { User } from '../../types/types';
+
+interface GetMyUserOptions {
+  token?: string;
+  endpoint?: string;
+}
+
+export async function getMyUser(options?: GetMyUserOptions): Promise<User> {
+  const token =
+    options?.token || store.getState().chatSettingStore.user.token || '';
+  const endpoint = options?.endpoint || '/users/my';
+
+  const response = await http.get(endpoint, {
+    headers: { Authorization: token },
+  });
+
+  if (response?.data?.user) {
+    return response.data.user as User;
+  }
+  return response.data as User;
+}
+
+export function getDocuments(walletAddress: string) {
+  const token = store.getState().chatSettingStore.user.token || '';
+  return http.get(`/docs/${walletAddress}`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+}
+
+export function getExportMyData() {
+  const token = store.getState().chatSettingStore.user.token || '';
+  return http.get('/users/exportData', {
+    headers: {
+      Authorization: token,
+      responseType: 'arraybuffer',
+    },
+  });
+}
+
+export function deleteMe() {
+  return http.delete('/users');
+}
+
+export function updateMe(data: any) {
+  return http.put('/users', data);
+}
+
+export async function updateProfile(fd: FormData): Promise<{ user: User }> {
+  const token = store.getState().chatSettingStore.user.token || '';
+
+  try {
+    const response = await http.put('/users', fd, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error('Error updating profile');
+  }
+}