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

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

package/src/utils/group_messages.ts

@@ -4,8 +4,12 @@ import { isSystemMessage } from './system_messages'
 
 const FIVE_MINUTES_MS = 5 * 60 * 1000
 
+export const UNREAD_DIVIDER_KEY = 'unread-divider'
+
 export type DateSeparator = { type: 'DateSeparator'; id: string; date: string }
 
+export type UnreadDividerItem = { type: 'UnreadDivider'; id: typeof UNREAD_DIVIDER_KEY }
+
 export type ReplyShadowMessage = {
   type: 'ReplyShadowMessage'
   id: string
@@ -14,14 +18,25 @@ export type ReplyShadowMessage = {
   nextRendersAuthor: boolean
 }
 
-export type EnrichedMessage = MessageResource | DateSeparator | ReplyShadowMessage
+export type EnrichedMessage =
+  | MessageResource
+  | DateSeparator
+  | UnreadDividerItem
+  | ReplyShadowMessage
 
 interface GroupMessagesProps {
   ms: MessageResource[]
   inReplyScreen?: boolean
+  jumpToUnreadActive?: boolean
+  initialMessageId?: string | null
 }
 
-export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): EnrichedMessage[] {
+export function groupMessages({
+  ms,
+  inReplyScreen,
+  jumpToUnreadActive,
+  initialMessageId,
+}: GroupMessagesProps): EnrichedMessage[] {
   const items: EnrichedMessage[] = []
   let myLatestSeen = false
   let nextNeighborEnriched: MessageResource | undefined
@@ -33,6 +48,9 @@ export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): Enrich
     if (isSystemMessage(message)) {
       const enriched = enrichSystemMessage(message, next)
       items.push(enriched)
+      if (crossesUnreadBoundary(message, prev, jumpToUnreadActive, initialMessageId)) {
+        items.push(unreadDivider())
+      }
       if (datesDifferBetween(message, prev)) items.push(dateSeparator(message))
       nextNeighborEnriched = enriched
       return
@@ -44,6 +62,10 @@ export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): Enrich
     const enriched = enrichRegularMessage(message, prev, next, isMyLatest, !!inReplyScreen)
     items.push(enriched)
 
+    if (crossesUnreadBoundary(message, prev, jumpToUnreadActive, initialMessageId)) {
+      items.push(unreadDivider())
+    }
+
     const shadow = replyShadowFor(enriched, prev)
     if (shadow) items.push(shadow)
 
@@ -57,6 +79,24 @@ export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): Enrich
   return items
 }
 
+function crossesUnreadBoundary(
+  message: MessageResource,
+  prev: MessageResource | undefined,
+  jumpToUnreadActive: boolean | undefined,
+  initialMessageId: string | null | undefined
+): boolean {
+  if (!jumpToUnreadActive) return false
+  if (!initialMessageId) return false
+  if (!prev) return false
+  return (
+    prev.id.localeCompare(initialMessageId) <= 0 && message.id.localeCompare(initialMessageId) > 0
+  )
+}
+
+function unreadDivider(): UnreadDividerItem {
+  return { type: 'UnreadDivider', id: UNREAD_DIVIDER_KEY }
+}
+
 function neighborsOf<T>(arr: T[], i: number): { prev: T | undefined; next: T | undefined } {
   return { prev: arr[i + 1], next: arr[i - 1] }
 }

package/src/utils/highest_seen_tracker.ts

@@ -0,0 +1,42 @@
+export const FLUSH_DELAY_MS = 2000
+
+type SendFn = (args: { conversationId: number; sortKey: string }) => void
+
+export function makeHighestSeenTracker(
+  conversationId: number,
+  send: SendFn,
+  flushDelayMs: number = FLUSH_DELAY_MS
+) {
+  let highest: string | null = null
+  let lastSent: string | null = null
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  const fire = () => {
+    timer = null
+    if (!highest || highest === lastSent) return
+    lastSent = highest
+    send({ conversationId, sortKey: highest })
+  }
+
+  return {
+    onSeen(sortKey: string) {
+      if (highest && sortKey.localeCompare(highest) <= 0) return
+      highest = sortKey
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(fire, flushDelayMs)
+    },
+    flushNow() {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      fire()
+    },
+    cancel() {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+    },
+  }
+}

package/src/utils/message_viewability.ts

@@ -0,0 +1,49 @@
+import { dividerExitedTowardNewer } from './unread_divider_helpers'
+
+export interface ViewableEntry<Item> {
+  key: string
+  isViewable: boolean
+  item: Item
+}
+
+export interface ViewabilityEvent<Item> {
+  viewableItems: ViewableEntry<Item>[]
+  changed: ViewableEntry<Item>[]
+  userHasScrolled: boolean
+}
+
+export type ViewabilityObserver<Item> = (event: ViewabilityEvent<Item>) => void
+
+export function reportViewableMessages<Item extends { id?: string; type?: string }>(
+  onMessageSeen: (id: string) => void
+): ViewabilityObserver<Item> {
+  return ({ viewableItems, userHasScrolled }) => {
+    if (!userHasScrolled) return
+    for (const entry of viewableItems) {
+      if (entry.item?.type !== 'Message') continue
+      const id = entry.item?.id
+      if (typeof id === 'string') onMessageSeen(id)
+    }
+  }
+}
+
+export function detectDividerExitTowardNewer<Item extends { id?: string; type?: string }>({
+  dividerKey,
+  initialMessageId,
+  onExited,
+}: {
+  dividerKey: string
+  initialMessageId: string | null
+  onExited: () => void
+}): ViewabilityObserver<Item> {
+  return ({ viewableItems, changed, userHasScrolled }) => {
+    if (!userHasScrolled || !initialMessageId) return
+    const exited = dividerExitedTowardNewer({
+      changed,
+      viewableItems,
+      dividerKey,
+      initialMessageId,
+    })
+    if (exited) onExited()
+  }
+}

package/src/utils/unread_divider_helpers.ts

@@ -0,0 +1,25 @@
+type ViewableChangeEntry = { key: string; isViewable: boolean }
+type ViewableItem = { item: { id?: string; type?: string } }
+
+export function dividerExitedTowardNewer({
+  changed,
+  viewableItems,
+  dividerKey,
+  initialMessageId,
+}: {
+  changed: ViewableChangeEntry[]
+  viewableItems: ViewableItem[]
+  dividerKey: string
+  initialMessageId: string
+}): boolean {
+  const dividerExited = changed.some(c => c.key === dividerKey && !c.isViewable)
+  if (!dividerExited) return false
+
+  const visibleMessageIds = viewableItems
+    .filter(v => v.item?.type === 'Message')
+    .map(v => v.item?.id)
+    .filter((id): id is string => !!id)
+  if (visibleMessageIds.length === 0) return false
+
+  return visibleMessageIds.every(id => id.localeCompare(initialMessageId) > 0)
+}