@planningcenter/chat-react-native 3.35.0-rc.2 → 3.35.0-rc.4

package/src/utils/__tests__/group_messages.test.ts

@@ -0,0 +1,214 @@
+import type { MessageResource } from '../../types/resources/message'
+import type { PersonResource } from '../../types/resources/person'
+import { groupMessages } from '../group_messages'
+
+const author = { id: 1, type: 'Person', name: 'A', avatar: null } as unknown as PersonResource
+const otherAuthor = {
+  id: 2,
+  type: 'Person',
+  name: 'B',
+  avatar: null,
+} as unknown as PersonResource
+
+const message = (id: string, overrides: Partial<MessageResource> = {}): MessageResource =>
+  ({
+    type: 'Message',
+    id,
+    text: `msg ${id}`,
+    html: `<p>msg ${id}</p>`,
+    createdAt: '2026-01-01T00:00:00Z',
+    deletedAt: null,
+    textEditedAt: null,
+    mine: false,
+    attachments: [],
+    author,
+    reactionCounts: [],
+    replyCount: 0,
+    replyRootId: null,
+    messageType: 'message',
+    personIdsForSystemEvent: null,
+    systemTextParts: null,
+    ...overrides,
+  }) as MessageResource
+
+const findEnriched = (items: ReturnType<typeof groupMessages>, id: string) =>
+  items.find(item => 'id' in item && item.id === id && !('type' in item && item.type !== 'Message'))
+
+describe('groupMessages — immutability', () => {
+  it('does not mutate the input messages', () => {
+    const input = [message('02'), message('01')]
+    const snapshot = JSON.parse(JSON.stringify(input))
+
+    groupMessages({ ms: input })
+
+    expect(input).toEqual(snapshot)
+  })
+})
+
+describe('groupMessages — grouping', () => {
+  it('breaks groups across a >5min gap (lastInGroup flips on the older message)', () => {
+    const messages = [
+      message('02', { createdAt: '2026-01-01T00:06:00Z' }),
+      message('01', { createdAt: '2026-01-01T00:00:00Z' }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect((findEnriched(enriched, '01') as MessageResource).lastInGroup).toBe(true)
+  })
+
+  it('breaks groups when authors differ (renderAuthor flips on the newer message)', () => {
+    const messages = [message('02', { author }), message('01', { author: otherAuthor })]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect((findEnriched(enriched, '02') as MessageResource).renderAuthor).toBe(true)
+  })
+
+  it('marks the first own message as myLatestInConversation and not later ones', () => {
+    const messages = [
+      message('03', { mine: true, createdAt: '2026-01-01T00:02:00Z' }),
+      message('02', { mine: true, createdAt: '2026-01-01T00:01:00Z' }),
+      message('01', { mine: false, createdAt: '2026-01-01T00:00:00Z' }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect((findEnriched(enriched, '03') as MessageResource).myLatestInConversation).toBe(true)
+    expect((findEnriched(enriched, '02') as MessageResource).myLatestInConversation).toBe(false)
+  })
+})
+
+describe('groupMessages — render order at thread + date boundaries', () => {
+  it('reply shadow precedes date separator so the date renders above', () => {
+    const messages = [
+      message('02', { createdAt: '2026-01-02T12:00:00Z', replyRootId: 'rootB' }),
+      message('01', { createdAt: '2026-01-01T12:00:00Z', replyRootId: 'rootA' }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    const shadowIdx = enriched.findIndex(
+      item => 'type' in item && item.type === 'ReplyShadowMessage' && item.id === '02-rootB'
+    )
+    const dateSepIdx = enriched.findIndex(
+      item => 'type' in item && item.type === 'DateSeparator' && item.id === 'day-divider-02'
+    )
+    expect(shadowIdx).toBeGreaterThan(-1)
+    expect(dateSepIdx).toBeGreaterThan(shadowIdx)
+  })
+
+  it('skips reply-shadow insertion when inReplyScreen is false but threadPosition still resolves', () => {
+    const messages = [
+      message('02', { replyRootId: 'rootA', createdAt: '2026-01-01T00:01:00Z' }),
+      message('01', { id: 'rootA', replyRootId: 'rootA', createdAt: '2026-01-01T00:00:00Z' }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect((findEnriched(enriched, '02') as MessageResource).threadPosition).toBe('last')
+    expect((findEnriched(enriched, 'rootA') as MessageResource).threadPosition).toBe('first')
+  })
+})
+
+describe('groupMessages — nextRendersAuthor mirrors the newer enriched neighbor', () => {
+  it('propagates the newer neighbor’s computed renderAuthor across an author-change boundary', () => {
+    const messages = [message('02', { author: otherAuthor }), message('01', { author })]
+
+    const enriched = groupMessages({ ms: messages })
+
+    const newer = findEnriched(enriched, '02') as MessageResource
+    const older = findEnriched(enriched, '01') as MessageResource
+    expect(newer.renderAuthor).toBe(true)
+    expect(older.nextRendersAuthor).toBe(true)
+  })
+})
+
+describe('groupMessages — unread divider', () => {
+  it('inserts the divider between the read and unread boundary when jumpToUnreadActive', () => {
+    const messages = [
+      message('04', { createdAt: '2026-01-01T00:04:00Z' }),
+      message('03', { createdAt: '2026-01-01T00:03:00Z' }),
+      message('02', { createdAt: '2026-01-01T00:02:00Z' }),
+      message('01', { createdAt: '2026-01-01T00:01:00Z' }),
+    ]
+
+    const enriched = groupMessages({
+      ms: messages,
+      jumpToUnreadActive: true,
+      initialMessageId: '02',
+    })
+
+    const dividerIdx = enriched.findIndex(item => 'type' in item && item.type === 'UnreadDivider')
+    const msg03Idx = enriched.findIndex(
+      item => 'id' in item && item.id === '03' && !('type' in item && item.type !== 'Message')
+    )
+    const msg02Idx = enriched.findIndex(
+      item => 'id' in item && item.id === '02' && !('type' in item && item.type !== 'Message')
+    )
+
+    expect(dividerIdx).toBeGreaterThan(msg03Idx)
+    expect(dividerIdx).toBeLessThan(msg02Idx)
+  })
+
+  it('does not insert the divider when jumpToUnreadActive is false', () => {
+    const enriched = groupMessages({
+      ms: [message('02'), message('01')],
+      jumpToUnreadActive: false,
+      initialMessageId: '01',
+    })
+
+    expect(enriched.some(item => 'type' in item && item.type === 'UnreadDivider')).toBe(false)
+  })
+
+  it('does not insert the divider when no message crosses the boundary', () => {
+    const enriched = groupMessages({
+      ms: [message('05'), message('04'), message('03')],
+      jumpToUnreadActive: true,
+      initialMessageId: '02',
+    })
+
+    expect(enriched.some(item => 'type' in item && item.type === 'UnreadDivider')).toBe(false)
+  })
+
+  it('orders ULID-style ids consistently with backend sort_key comparisons', () => {
+    const enriched = groupMessages({
+      ms: [
+        message('01KQSTAY189PHCJBT8T13R9VMP'),
+        message('01KQST9HZAB10K3CXR7TYN2QWE'),
+        message('01KQST73KZRPXNRDA7TYN19KXQ'),
+        message('01KQST5JKZRPXNRDA7TYN19ABC'),
+      ],
+      jumpToUnreadActive: true,
+      initialMessageId: '01KQST73KZRPXNRDA7TYN19KXQ',
+    })
+
+    const dividerIdx = enriched.findIndex(item => 'type' in item && item.type === 'UnreadDivider')
+    const newerIdx = enriched.findIndex(
+      item =>
+        'id' in item &&
+        item.id === '01KQST9HZAB10K3CXR7TYN2QWE' &&
+        !('type' in item && item.type !== 'Message')
+    )
+
+    expect(dividerIdx).toBeGreaterThan(newerIdx)
+  })
+})
+
+describe('groupMessages — system messages', () => {
+  it('flags lastInGroup true and renderAuthor false on system messages', () => {
+    const messages = [
+      message('sys', {
+        messageType: 'user_joined',
+        systemTextParts: { names: ['A'], overflowCount: 0, action: 'joined' },
+        personIdsForSystemEvent: [1],
+      }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    const sys = findEnriched(enriched, 'sys') as MessageResource
+    expect(sys.lastInGroup).toBe(true)
+    expect(sys.renderAuthor).toBe(false)
+  })
+})

package/src/utils/__tests__/highest_seen_tracker.test.ts

@@ -0,0 +1,82 @@
+import { makeHighestSeenTracker } from '../highest_seen_tracker'
+
+describe('makeHighestSeenTracker', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('debounces and sends the highest sort key seen so far', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(42, send, 2000)
+
+    tracker.onSeen('10')
+    tracker.onSeen('15')
+    tracker.onSeen('12')
+
+    expect(send).not.toHaveBeenCalled()
+    jest.advanceTimersByTime(2000)
+
+    expect(send).toHaveBeenCalledWith({ conversationId: 42, sortKey: '15' })
+    expect(send).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores sort keys that are not strictly greater than the current highest', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 1000)
+
+    tracker.onSeen('20')
+    tracker.onSeen('20')
+    tracker.onSeen('19')
+    jest.advanceTimersByTime(1000)
+
+    expect(send).toHaveBeenCalledTimes(1)
+    expect(send).toHaveBeenCalledWith({ conversationId: 1, sortKey: '20' })
+  })
+
+  it('does not re-send the same sort key on subsequent flushes', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 1000)
+
+    tracker.onSeen('5')
+    jest.advanceTimersByTime(1000)
+    tracker.flushNow()
+
+    expect(send).toHaveBeenCalledTimes(1)
+  })
+
+  it('flushNow fires immediately without waiting for the debounce', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 5000)
+
+    tracker.onSeen('3')
+    tracker.flushNow()
+
+    expect(send).toHaveBeenCalledWith({ conversationId: 1, sortKey: '3' })
+  })
+
+  it('cancel prevents a pending fire', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 1000)
+
+    tracker.onSeen('7')
+    tracker.cancel()
+    jest.advanceTimersByTime(1000)
+
+    expect(send).not.toHaveBeenCalled()
+  })
+
+  it('orders fixed-width sort keys via lexicographic comparison', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 100)
+
+    tracker.onSeen('09')
+    tracker.onSeen('10')
+    jest.advanceTimersByTime(100)
+
+    expect(send).toHaveBeenCalledWith({ conversationId: 1, sortKey: '10' })
+  })
+})

package/src/utils/__tests__/message_viewability.test.ts

@@ -0,0 +1,168 @@
+import {
+  detectDividerExitTowardNewer,
+  reportViewableMessages,
+  type ViewabilityEvent,
+} from '../message_viewability'
+
+type Msg = { id: string; type: 'Message' }
+
+const event = (overrides: Partial<ViewabilityEvent<Msg>> = {}): ViewabilityEvent<Msg> => ({
+  viewableItems: [],
+  changed: [],
+  userHasScrolled: true,
+  ...overrides,
+})
+
+describe('reportViewableMessages', () => {
+  it('fires onMessageSeen for every viewable Message item by id', () => {
+    const onSeen = jest.fn()
+    const observer = reportViewableMessages<Msg>(onSeen)
+
+    observer(
+      event({
+        viewableItems: [
+          { key: '10', isViewable: true, item: { id: '10', type: 'Message' } },
+          { key: '11', isViewable: true, item: { id: '11', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onSeen).toHaveBeenCalledTimes(2)
+    expect(onSeen).toHaveBeenNthCalledWith(1, '10')
+    expect(onSeen).toHaveBeenNthCalledWith(2, '11')
+  })
+
+  it('skips non-Message items (dividers, separators, shadows)', () => {
+    const onSeen = jest.fn()
+    const observer = reportViewableMessages<{ id?: string; type?: string }>(onSeen)
+
+    observer(
+      event({
+        viewableItems: [
+          { key: 'divider', isViewable: true, item: { id: 'divider', type: 'UnreadDivider' } },
+          {
+            key: 'day-divider-05',
+            isViewable: true,
+            item: { id: 'day-divider-05', type: 'DateSeparator' },
+          },
+          { key: '5', isViewable: true, item: { id: '5', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onSeen).toHaveBeenCalledTimes(1)
+    expect(onSeen).toHaveBeenCalledWith('5')
+  })
+
+  it('does not fire before the user has scrolled', () => {
+    const onSeen = jest.fn()
+    const observer = reportViewableMessages<Msg>(onSeen)
+
+    observer(
+      event({
+        userHasScrolled: false,
+        viewableItems: [{ key: '10', isViewable: true, item: { id: '10', type: 'Message' } }],
+      })
+    )
+
+    expect(onSeen).not.toHaveBeenCalled()
+  })
+})
+
+describe('detectDividerExitTowardNewer', () => {
+  const baseArgs = { dividerKey: 'unread-divider', initialMessageId: '050' }
+
+  it('fires onExited when the divider leaves and only newer messages remain visible', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      ...baseArgs,
+      onExited,
+    })
+
+    observer(
+      event({
+        changed: [
+          {
+            key: 'unread-divider',
+            isViewable: false,
+            item: { id: 'unread-divider', type: 'UnreadDivider' },
+          },
+        ],
+        viewableItems: [
+          { key: '055', isViewable: true, item: { id: '055', type: 'Message' } },
+          { key: '056', isViewable: true, item: { id: '056', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onExited).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire when divider leaves toward older messages', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      ...baseArgs,
+      onExited,
+    })
+
+    observer(
+      event({
+        changed: [
+          {
+            key: 'unread-divider',
+            isViewable: false,
+            item: { id: 'unread-divider', type: 'UnreadDivider' },
+          },
+        ],
+        viewableItems: [
+          { key: '045', isViewable: true, item: { id: '045', type: 'Message' } },
+          { key: '048', isViewable: true, item: { id: '048', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onExited).not.toHaveBeenCalled()
+  })
+
+  it('does not fire before the user has scrolled', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      ...baseArgs,
+      onExited,
+    })
+
+    observer(
+      event({
+        userHasScrolled: false,
+        changed: [
+          {
+            key: 'unread-divider',
+            isViewable: false,
+            item: { id: 'unread-divider', type: 'UnreadDivider' },
+          },
+        ],
+        viewableItems: [{ key: '055', isViewable: true, item: { id: '055', type: 'Message' } }],
+      })
+    )
+
+    expect(onExited).not.toHaveBeenCalled()
+  })
+
+  it('no-ops when initialMessageId is null (observer is always installed)', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      dividerKey: 'unread-divider',
+      initialMessageId: null,
+      onExited,
+    })
+
+    observer(
+      event({
+        changed: [{ key: 'unread-divider', isViewable: false, item: { id: 'unread-divider' } }],
+        viewableItems: [{ key: '055', isViewable: true, item: { id: '055' } }],
+      })
+    )
+
+    expect(onExited).not.toHaveBeenCalled()
+  })
+})

package/src/utils/__tests__/unread_divider_helpers.test.ts

@@ -0,0 +1,85 @@
+import { dividerExitedTowardNewer } from '../unread_divider_helpers'
+
+const dividerKey = 'unread-divider'
+const initialMessageId = '050'
+const msg = (id: string) => ({ item: { id, type: 'Message' } })
+
+describe('dividerExitedTowardNewer', () => {
+  it('returns false while the divider is still viewable', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: true }],
+      viewableItems: [
+        msg('049'),
+        { item: { id: dividerKey, type: 'UnreadDivider' } },
+        msg('050'),
+        msg('051'),
+      ],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('returns true when divider exits and only newer messages are visible (scrolled toward newer)', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [msg('055'), msg('056'), msg('057')],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(true)
+  })
+
+  it('returns false when divider exits and only older messages are visible (scrolled toward older)', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [msg('040'), msg('045'), msg('048')],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('returns false when divider exits but the visible window straddles the boundary', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [msg('048'), msg('049'), msg('055')],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('returns false when the divider entry is not in the changed set', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: '055', isViewable: true }],
+      viewableItems: [msg('055'), msg('056')],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('returns false when no message items are visible (only the divider was)', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('ignores non-Message items (date separators, reply shadows) when deciding direction', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [
+        { item: { id: 'day-divider-200', type: 'DateSeparator' } },
+        { item: { id: '055-rootA', type: 'ReplyShadowMessage' } },
+      ],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+})

package/src/utils/cache/messages_cache.ts

@@ -131,6 +131,11 @@ export function getThreadedMessagesQueryKey(conversationId: number, replyRootId:
   return getRequestQueryKey(requestArgs)
 }
 
+export function hasUnloadedNewerPages(queryClient: QueryClient, queryKey: unknown[]): boolean {
+  const data = queryClient.getQueryData<MessagesQueryData>(queryKey)
+  return !!data?.pages?.[0]?.meta?.next?.idGt
+}
+
 export function mergeMessageUpdate(
   record: MessageResource,
   current?: MessageResource