@ethora/chat-component-rn 26.8.8 → 26.8.9

package/src/components/RoomComponents/SwipeableRoomRow.tsx

@@ -0,0 +1,133 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import ReanimatedSwipeable, {
+  type SwipeableMethods,
+} from 'react-native-gesture-handler/ReanimatedSwipeable';
+import { LeaveIcon, ReportIcon } from '../../assets/icons';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
+import type { ChatTheme } from '../../theme/theme';
+
+/** Width of one action button behind the row. */
+export const ROOM_ACTION_WIDTH = 84;
+
+/**
+ * Only one row shows its actions at a time, as in the messengers: opening
+ * another one, or the list being scrolled, folds the open one back.
+ */
+let openRow: SwipeableMethods | null = null;
+
+export const closeOpenRoomRow = (): void => {
+  openRow?.close();
+  openRow = null;
+};
+
+interface SwipeableRoomRowProps {
+  /** Identifies the row to the host's callbacks. */
+  roomJid: string;
+  onReport: (roomJid: string) => void;
+  onLeave: (roomJid: string) => void;
+  children: React.ReactNode;
+}
+
+/**
+ * A room-list row that slides left to show Report and Leave behind it,
+ * the way chats do in the big messengers. A tap on an action folds the
+ * row back first, so the list is tidy under whatever the action opens.
+ */
+const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
+  roomJid,
+  onReport,
+  onLeave,
+  children,
+}) => {
+  const theme = useTheme();
+  const t = useT();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const ref = useRef<SwipeableMethods>(null);
+
+  const onWillOpen = useCallback(() => {
+    if (openRow && openRow !== ref.current) {openRow.close();}
+    openRow = ref.current;
+  }, []);
+  const onClose = useCallback(() => {
+    if (openRow === ref.current) {openRow = null;}
+  }, []);
+
+  const act = useCallback(
+    (what: (jid: string) => void) => {
+      ref.current?.close();
+      what(roomJid);
+    },
+    [roomJid]
+  );
+
+  const renderRightActions = useCallback(
+    () => (
+      <View style={styles.actions}>
+        <TouchableOpacity
+          testID={`room-action-report-${roomJid.split('@')[0]}`}
+          accessibilityRole="button"
+          accessibilityLabel={t('action.report')}
+          activeOpacity={0.8}
+          style={[styles.action, { backgroundColor: theme.textSecondary }]}
+          onPress={() => act(onReport)}
+        >
+          <ReportIcon color={theme.textOnPrimary} width={22} height={22} />
+          <Text style={styles.label}>{t('action.report')}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          testID={`room-action-leave-${roomJid.split('@')[0]}`}
+          accessibilityRole="button"
+          accessibilityLabel={t('action.leave')}
+          activeOpacity={0.8}
+          style={[styles.action, { backgroundColor: theme.danger }]}
+          onPress={() => act(onLeave)}
+        >
+          <LeaveIcon color={theme.textOnPrimary} width={22} height={22} />
+          <Text style={styles.label}>{t('action.leave')}</Text>
+        </TouchableOpacity>
+      </View>
+    ),
+    [act, onLeave, onReport, roomJid, styles, t, theme]
+  );
+
+  return (
+    <ReanimatedSwipeable
+      ref={ref}
+      testID={`room-swipe-${roomJid.split('@')[0]}`}
+      friction={2}
+      rightThreshold={ROOM_ACTION_WIDTH / 2}
+      overshootRight={false}
+      enableTrackpadTwoFingerGesture
+      renderRightActions={renderRightActions}
+      onSwipeableWillOpen={onWillOpen}
+      onSwipeableClose={onClose}
+      // The row must cover the actions until it moves.
+      childrenContainerStyle={{ backgroundColor: theme.listBackground }}
+    >
+      {children}
+    </ReanimatedSwipeable>
+  );
+};
+
+export default SwipeableRoomRow;
+
+const createStyles = (theme: ChatTheme) =>
+  StyleSheet.create({
+    actions: {
+      flexDirection: 'row',
+      width: ROOM_ACTION_WIDTH * 2,
+    },
+    action: {
+      width: ROOM_ACTION_WIDTH,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+    },
+    label: {
+      color: theme.textOnPrimary,
+      fontSize: 12,
+      fontWeight: '600',
+    },
+  });

package/src/context/xmppProvider.tsx

@@ -39,7 +39,12 @@ import { getRooms as prefetchRoomsViaRest } from '../networking/api-requests/roo
 import { allRoomPresences } from '../networking/xmpp/allRoomPresences.xmpp';
 import { pushSubscriptionService } from '../services/pushSubscriptionService';
 import { store } from '../roomStore';
-import { logout, setStoreClient, setConfig } from '../roomStore/chatSettingsSlice';
+import {
+  logout,
+  setStoreClient,
+  setConfig,
+  setConnectionState,
+} from '../roomStore/chatSettingsSlice';
 import { logoutService } from '../hooks/useLogout';
 import {
   setLogoutState,
@@ -260,7 +265,12 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       created.setOnOnline(() => {
         const underlying = (created as any).client;
         if (!underlying) {return;}
-        allRoomPresences(underlying)
+        // The headers say "Updating…" until the rooms are joined again and
+        // the archive caught up - a stream that is up is not yet a chat
+        // that is. Same tick as the client's own 'online', so the title
+        // never shows the plain state in between.
+        store.dispatch(setConnectionState('syncing'));
+        const rejoin = allRoomPresences(underlying)
           .catch((e) =>
             devPushLog('warn', 'reconnect: allRoomPresences re-join failed', e)
           )
@@ -268,7 +278,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         // Also refresh the private store so unread / lastViewed markers
         // are accurate after a long reconnect — the MUC re-join above only
         // restores delivery, not unread state. Idempotent on first connect.
-        created
+        const markers = created
           .getChatsPrivateStoreRequestStanza()
           .catch((e: unknown) =>
             devPushLog('warn', 'reconnect: privateStore refresh failed', e)
@@ -283,9 +293,16 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         // point, so this is a no-op until the bootstrap's own history load
         // populates it. Customer-reported #32.
         const rooms = store.getState().rooms?.rooms || {};
-        updateMessagesTillLast(rooms, created).catch((e: unknown) =>
+        const catchUp = updateMessagesTillLast(rooms, created).catch((e: unknown) =>
           devPushLog('warn', 'reconnect: offline catch-up sync failed', e)
         );
+        Promise.allSettled([rejoin, markers, catchUp]).then(() => {
+          // Only if this stream is still the live one: a drop meanwhile
+          // has already put the headers back to "Connecting…".
+          if (created.status === 'online') {
+            store.dispatch(setConnectionState('online'));
+          }
+        });
       });
 
       setClient(created);

package/src/hooks/useChatSettingState.tsx

@@ -12,6 +12,9 @@ export const useChatSettingState = () => {
   const uiLocale = useSelector(
     (state: RootState) => state.chatSettingStore.uiLocale
   );
+  const connection = useSelector(
+    (state: RootState) => state.chatSettingStore.connection
+  );
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
   );
@@ -33,6 +36,7 @@ export const useChatSettingState = () => {
 
   return {
     uiLocale,
+    connection,
     user,
     activeFile,
     activeModal,

package/src/hooks/useConnectionLabel.ts

@@ -0,0 +1,16 @@
+import { useChatSettingState } from './useChatSettingState';
+import { useT } from '../i18n/useT';
+
+/**
+ * What the headers say in place of their usual title while the session is
+ * not usable yet: "Connecting…" until the stream is up (first connect and
+ * every reconnect), "Updating…" while rooms are re-joined and the archive
+ * caught up. Nothing once the chat is live.
+ */
+export const useConnectionLabel = (): string | undefined => {
+  const { connection } = useChatSettingState();
+  const t = useT();
+  if (connection === 'connecting') {return t('connection.connecting');}
+  if (connection === 'syncing') {return t('connection.updating');}
+  return undefined;
+};

package/src/i18n/strings.ts

@@ -16,6 +16,8 @@ export type UiStringTable = Record<string, string>;
 const en: UiStringTable = {
   'search.placeholder': 'Search...',
   'roomList.title': 'Chats',
+  'connection.connecting': 'Connecting…',
+  'connection.updating': 'Updating…',
   'menu.newChat': 'New Chat',
   'menu.profile': 'Profile',
   'menu.settings': 'Settings',
@@ -335,6 +337,8 @@ const en: UiStringTable = {
 const fr: UiStringTable = {
   'search.placeholder': 'Rechercher...',
   'roomList.title': 'Discussions',
+  'connection.connecting': 'Connexion…',
+  'connection.updating': 'Mise à jour…',
   'menu.newChat': 'Nouvelle discussion',
   'menu.profile': 'Profil',
   'menu.settings': 'Paramètres',
@@ -654,6 +658,8 @@ const fr: UiStringTable = {
 const es: UiStringTable = {
   'search.placeholder': 'Buscar...',
   'roomList.title': 'Conversaciones',
+  'connection.connecting': 'Conectando…',
+  'connection.updating': 'Actualizando…',
   'menu.newChat': 'Nuevo chat',
   'menu.profile': 'Perfil',
   'menu.settings': 'Configuración',
@@ -973,6 +979,8 @@ const es: UiStringTable = {
 const pt: UiStringTable = {
   'search.placeholder': 'Pesquisar...',
   'roomList.title': 'Conversas',
+  'connection.connecting': 'A ligar…',
+  'connection.updating': 'A atualizar…',
   'menu.newChat': 'Nova conversa',
   'menu.profile': 'Perfil',
   'menu.settings': 'Definições',
@@ -1292,6 +1300,8 @@ const pt: UiStringTable = {
 const ht: UiStringTable = {
   'search.placeholder': 'Chèche...',
   'roomList.title': 'Chat yo',
+  'connection.connecting': 'Ap konekte…',
+  'connection.updating': 'Ap mete ajou…',
   'menu.newChat': 'Nouvo chat',
   'menu.profile': 'Pwofil',
   'menu.settings': 'Paramèt',
@@ -1611,6 +1621,8 @@ const ht: UiStringTable = {
 const zh: UiStringTable = {
   'search.placeholder': '搜索...',
   'roomList.title': '聊天',
+  'connection.connecting': '连接中…',
+  'connection.updating': '更新中…',
   'menu.newChat': '新聊天',
   'menu.profile': '个人资料',
   'menu.settings': '设置',

package/src/networking/xmppClient.ts

@@ -29,6 +29,7 @@ import { pushLog as devPushLog, isDevLogActive } from '../utils/devLogger';
 import { normalizeRoomJid } from '../helpers/normalizeRoomJid';
 import { store } from '../roomStore';
 import { applyPrivateStoreMarkers } from '../roomStore/roomsSlice';
+import { setConnectionState } from '../roomStore/chatSettingsSlice';
 import {
   clearOutboundSends,
   enqueueOutboundSend,
@@ -129,7 +130,38 @@ export class XmppClient {
   service: string = '';
   conference: string = '';
   username: string;
-  status: 'offline' | 'connecting' | 'online' | 'error' = 'offline';
+  private _status: 'offline' | 'connecting' | 'online' | 'error' = 'offline';
+
+  /**
+   * The stream's state. Every change is mirrored into the store
+   * (`chatSettingStore.connection`) so the headers can say "Connecting…":
+   * a class field is nothing React can follow. `offline` and `error` are
+   * reported as `connecting` while a retry is scheduled - that is what the
+   * user is waiting for - and as `offline` only once nothing will try
+   * (logout, unmount).
+   */
+  get status(): 'offline' | 'connecting' | 'online' | 'error' {
+    return this._status;
+  }
+
+  set status(next: 'offline' | 'connecting' | 'online' | 'error') {
+    const changed = next !== this._status;
+    this._status = next;
+    if (!changed) {return;}
+    try {
+      const reported =
+        next === 'online'
+          ? 'online'
+          : next === 'connecting' || !this.suppressReconnect
+            ? 'connecting'
+            : 'offline';
+      if (store.getState().chatSettingStore.connection !== reported) {
+        store.dispatch(setConnectionState(reported));
+      }
+    } catch {
+      /* no store in some test harnesses */
+    }
+  }
 
   password = '';
   reconnectAttempts = 0;

package/src/roomStore/chatSettingsSlice.ts

@@ -44,8 +44,18 @@ export interface ChatState {
    * `config.i18n.locale`, which is the default for a user who never chose.
    */
   uiLocale?: string;
+  /**
+   * Where the XMPP session stands, for the headers: `connecting` until the
+   * stream is up (also while it is being re-established), `syncing` while
+   * rooms are re-joined and the archive caught up after a (re)connect,
+   * `online` once that is done, `offline` when the stream is down and
+   * nothing is trying (logged out).
+   */
+  connection?: ConnectionState;
 }
 
+export type ConnectionState = 'connecting' | 'syncing' | 'online' | 'offline';
+
 export const unpackAndTransform = (input?: User): User => {
   return {
     // Was hardcoded to '' — every setUser dropped the user's own bio, so
@@ -231,6 +241,12 @@ const reducers = {
   ) => {
     state.uiLocale = action.payload || undefined;
   },
+  setConnectionState: (
+    state: WritableDraft<ChatState>,
+    action: PayloadAction<ConnectionState>
+  ) => {
+    state.connection = action.payload;
+  },
 };
 
 export const chatSlice: Slice<ChatState, typeof reducers, 'chat'> = createSlice({
@@ -255,6 +271,7 @@ export const {
   setThemePreference,
   setPushEnabled,
   setUiLocale,
+  setConnectionState,
 } = chatSlice.actions;
 
 export default chatSlice.reducer;

package/src/types/types.ts

@@ -652,6 +652,8 @@ export interface IConfig {
   };
   disableProfilesInteractions?: boolean;
   disableUserCount?: boolean;
+  /** No Report / Leave behind a room-list row swiped to the left. */
+  disableRoomSwipeActions?: boolean;
   disableSentLogic?: boolean;
   disableTypingIndicator?: boolean;
   // Hide the full-screen "Connection error" overlay (the dark modal with

package/src/version.ts

@@ -1,3 +1,3 @@
 // Generated by scripts/sync-version.mjs on `npm version`.
 // Edit package.json's version instead of this file.
-export const ETHORA_CHAT_COMPONENT_VERSION = '26.8.8';
+export const ETHORA_CHAT_COMPONENT_VERSION = '26.8.9';