refactor: match timestamp formatting to existing SDK patterns

Author: szuperaz

package/src/components/ChannelDetailsScreen/__tests__/useUserActivityStatus.test.tsx

@@ -1,30 +1,24 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { renderHook } from '@testing-library/react-native';
-import Dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
 import type { UserResponse } from 'stream-chat';
 
-import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import {
+  TranslationProvider,
+  type TranslationContextValue,
+} from '../../../contexts/translationContext/TranslationContext';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { useUserActivityStatus } from '../hooks/useUserActivityStatus';
 
-Dayjs.extend(relativeTime);
+let translators: TranslationContextValue;
+
+beforeAll(async () => {
+  const i18nInstance = new Streami18n();
+  translators = (await i18nInstance.getTranslators()) as unknown as TranslationContextValue;
+});
 
 const wrapper = ({ children }: PropsWithChildren) => (
-  <TranslationProvider
-    value={{
-      t: ((key: string, options?: Record<string, unknown>) => {
-        if (options && 'relativeTime' in options) {
-          return `${key.replace('{{relativeTime}}', String(options.relativeTime))}`;
-        }
-        return key;
-      }) as never,
-      tDateTimeParser: (input) => Dayjs(input),
-      userLanguage: 'en',
-    }}
-  >
-    {children}
-  </TranslationProvider>
+  <TranslationProvider value={translators}>{children}</TranslationProvider>
 );
 
 const userFor = (overrides: Partial<UserResponse> = {}): UserResponse =>

package/src/components/ChannelDetailsScreen/hooks/useUserActivityStatus.ts

@@ -1,25 +1,19 @@
 import { useMemo } from 'react';
 
-import Dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-
 import type { UserResponse } from 'stream-chat';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-
-Dayjs.extend(relativeTime);
-
-const hasFromNow = (value: unknown): value is { fromNow: () => string; isValid?: () => boolean } =>
-  typeof (value as { fromNow?: unknown })?.fromNow === 'function';
+import { getDateString } from '../../../utils/i18n/getDateString';
 
 /**
  * Returns the localized presence status string for a user:
  *   - `t('Online')` when `user.online === true`
- *   - `t('Last seen {{relativeTime}}')` when offline with a valid `last_active`
- *   - `t('Offline')` otherwise (including `user === undefined`)
+ *   - `t('timestamp/UserActivityStatus')` (e.g. "Last seen 10 minutes ago") when offline
+ *     with a valid `last_active`
+ *   - `t('Offline')` otherwise (including `user === undefined` or an unparseable date)
  *
- * Uses `tDateTimeParser` from the translation context so the relative-time format
- * follows the configured locale.
+ * The relative time is produced through the shared `getDateString` + translation-key
+ * pipeline used by message timestamps, so the format follows the configured locale.
  * @experimental This hook is experimental and is subject to change.
  */
 export const useUserActivityStatus = (user?: UserResponse): string => {
@@ -29,9 +23,14 @@ export const useUserActivityStatus = (user?: UserResponse): string => {
     if (user?.online) return t('Online');
 
     if (user?.last_active) {
-      const parsed = tDateTimeParser(user.last_active);
-      if (hasFromNow(parsed) && (!parsed.isValid || parsed.isValid())) {
-        return t('Last seen {{relativeTime}}', { relativeTime: parsed.fromNow() });
+      const lastSeen = getDateString({
+        date: user.last_active,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/UserActivityStatus',
+      });
+      if (typeof lastSeen === 'string') {
+        return lastSeen;
       }
     }
 

package/src/i18n/ar.json

@@ -325,7 +325,7 @@
   "Edit": "تعديل",
   "Files": "الملفات",
   "Group Info": "معلومات المجموعة",
-  "Last seen {{relativeTime}}": "آخر ظهور {{relativeTime}}",
+  "timestamp/UserActivityStatus": "آخر ظهور {{ timestamp | fromNowFormatter }}",
   "Photos & Videos": "الصور ومقاطع الفيديو",
   "Pinned Messages": "الرسائل المثبتة",
   "View all": "عرض الكل",

package/src/i18n/en.json

@@ -326,7 +326,7 @@
   "Edit": "Edit",
   "Files": "Files",
   "Group Info": "Group Info",
-  "Last seen {{relativeTime}}": "Last seen {{relativeTime}}",
+  "timestamp/UserActivityStatus": "Last seen {{ timestamp | fromNowFormatter }}",
   "Photos & Videos": "Photos & Videos",
   "Pinned Messages": "Pinned Messages",
   "View all": "View all",

package/src/i18n/es.json

@@ -325,7 +325,7 @@
   "Edit": "Editar",
   "Files": "Archivos",
   "Group Info": "Información del grupo",
-  "Last seen {{relativeTime}}": "Última conexión {{relativeTime}}",
+  "timestamp/UserActivityStatus": "Última conexión {{ timestamp | fromNowFormatter }}",
   "Photos & Videos": "Fotos y videos",
   "Pinned Messages": "Mensajes fijados",
   "View all": "Ver todo",

package/src/i18n/fr.json

@@ -325,7 +325,7 @@
   "Edit": "Modifier",
   "Files": "Fichiers",
   "Group Info": "Informations du groupe",
-  "Last seen {{relativeTime}}": "Vu pour la dernière fois {{relativeTime}}",
+  "timestamp/UserActivityStatus": "Vu pour la dernière fois {{ timestamp | fromNowFormatter }}",
   "Photos & Videos": "Photos et vidéos",
   "Pinned Messages": "Messages épinglés",
   "View all": "Tout voir",

package/src/i18n/he.json

@@ -325,7 +325,7 @@
   "Edit": "ערוך",
   "Files": "קבצים",
   "Group Info": "פרטי הקבוצה",
-  "Last seen {{relativeTime}}": "נראה לאחרונה {{relativeTime}}",
+  "timestamp/UserActivityStatus": "נראה לאחרונה {{ timestamp | fromNowFormatter }}",
   "Photos & Videos": "תמונות וסרטונים",
   "Pinned Messages": "הודעות מוצמדות",
   "View all": "הצג הכל",

package/src/i18n/hi.json

@@ -325,7 +325,7 @@
   "Edit": "संपादित करें",
   "Files": "फ़ाइलें",
   "Group Info": "ग्रुप की जानकारी",
-  "Last seen {{relativeTime}}": "अंतिम बार देखा गया {{relativeTime}}",
+  "timestamp/UserActivityStatus": "अंतिम बार देखा गया {{ timestamp | fromNowFormatter }}",
   "Photos & Videos": "फ़ोटो और वीडियो",
   "Pinned Messages": "पिन किए गए संदेश",
   "View all": "सभी देखें",

package/src/i18n/it.json

@@ -325,7 +325,7 @@
   "Edit": "Modifica",
   "Files": "File",
   "Group Info": "Informazioni del gruppo",
-  "Last seen {{relativeTime}}": "Ultimo accesso {{relativeTime}}",
+  "timestamp/UserActivityStatus": "Ultimo accesso {{ timestamp | fromNowFormatter }}",
   "Photos & Videos": "Foto e video",
   "Pinned Messages": "Messaggi in evidenza",
   "View all": "Vedi tutto",

package/src/i18n/ja.json

@@ -325,7 +325,7 @@
   "Edit": "編集",
   "Files": "ファイル",
   "Group Info": "グループ情報",
-  "Last seen {{relativeTime}}": "最終ログイン {{relativeTime}}",
+  "timestamp/UserActivityStatus": "最終ログイン {{ timestamp | fromNowFormatter }}",
   "Photos & Videos": "写真と動画",
   "Pinned Messages": "ピン留めされたメッセージ",
   "View all": "すべて表示",