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

package/src/utils/group_messages.ts

@@ -0,0 +1,217 @@
+import type { MessageResource } from '../types/resources/message'
+import dayjs from './dayjs'
+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
+  messageId: string
+  isReplyShadowMessage: boolean
+  nextRendersAuthor: boolean
+}
+
+export type EnrichedMessage =
+  | MessageResource
+  | DateSeparator
+  | UnreadDividerItem
+  | ReplyShadowMessage
+
+interface GroupMessagesProps {
+  ms: MessageResource[]
+  inReplyScreen?: boolean
+  jumpToUnreadActive?: boolean
+  initialMessageId?: string | null
+}
+
+export function groupMessages({
+  ms,
+  inReplyScreen,
+  jumpToUnreadActive,
+  initialMessageId,
+}: GroupMessagesProps): EnrichedMessage[] {
+  const items: EnrichedMessage[] = []
+  let myLatestSeen = false
+  let nextNeighborEnriched: MessageResource | undefined
+
+  ms.forEach((message, i) => {
+    const { prev } = neighborsOf(ms, i)
+    const next = nextNeighborEnriched
+
+    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
+    }
+
+    const isMyLatest = !myLatestSeen && message.mine
+    if (isMyLatest) myLatestSeen = true
+
+    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)
+
+    if (!prev || datesDifferBetween(message, prev)) {
+      items.push(dateSeparator(message))
+    }
+
+    nextNeighborEnriched = enriched
+  })
+
+  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] }
+}
+
+function enrichSystemMessage(
+  message: MessageResource,
+  next: MessageResource | undefined
+): MessageResource {
+  return {
+    ...message,
+    myLatestInConversation: false,
+    lastInGroup: true,
+    renderAuthor: false,
+    nextRendersAuthor: next?.renderAuthor,
+    isReplyShadowMessage: false,
+    nextIsReplyShadowMessage: false,
+    threadPosition: null,
+  }
+}
+
+function enrichRegularMessage(
+  message: MessageResource,
+  prev: MessageResource | undefined,
+  next: MessageResource | undefined,
+  isMyLatest: boolean,
+  inReplyScreen: boolean
+): MessageResource {
+  const inThread = message.replyRootId !== null
+  const showThreadDetails = !inReplyScreen && inThread
+
+  return {
+    ...message,
+    myLatestInConversation: isMyLatest,
+    lastInGroup: !next || startsNewGroup(next, message),
+    renderAuthor: !message.mine && (!prev || startsNewGroup(message, prev)),
+    nextRendersAuthor: next?.renderAuthor,
+    isReplyShadowMessage: false,
+    nextIsReplyShadowMessage: nextIntroducesReplyShadow(next, message),
+    threadPosition: showThreadDetails ? threadPositionFor(message, next) : null,
+    prevIsMyReply: showThreadDetails ? prev?.mine : undefined,
+    nextIsMyReply: showThreadDetails ? next?.mine : undefined,
+  }
+}
+
+function startsNewGroup(a: MessageResource, b: MessageResource): boolean {
+  return (
+    a.author?.id !== b.author?.id ||
+    differsByMoreThan5Min(a, b) ||
+    a.replyRootId !== b.replyRootId ||
+    datesDifferBetween(a, b)
+  )
+}
+
+function differsByMoreThan5Min(a: MessageResource, b: MessageResource): boolean {
+  return Math.abs(toMillis(a.createdAt) - toMillis(b.createdAt)) > FIVE_MINUTES_MS
+}
+
+function toMillis(iso: string): number {
+  return new Date(iso).getTime()
+}
+
+function datesDifferBetween(a: MessageResource, b: MessageResource | undefined): boolean {
+  if (!b) return false
+  return dateKey(a) !== dateKey(b)
+}
+
+function dateKey(message: MessageResource): string {
+  return dayjs(message.createdAt).format('YYYY-MM-DD')
+}
+
+function dateSeparator(message: MessageResource): DateSeparator {
+  return { type: 'DateSeparator', id: `day-divider-${message.id}`, date: dateKey(message) }
+}
+
+function threadPositionFor(
+  message: MessageResource,
+  next: MessageResource | undefined
+): 'first' | 'center' | 'last' | null {
+  const isThreadRoot = message.replyRootId === message.id
+  const isLast =
+    !next || next.replyRootId !== message.replyRootId || datesDifferBetween(next, message)
+
+  if (isThreadRoot && isLast) return null
+  if (isThreadRoot) return 'first'
+  if (isLast) return 'last'
+  return 'center'
+}
+
+function nextIntroducesReplyShadow(
+  next: MessageResource | undefined,
+  current: MessageResource
+): boolean {
+  if (!next) return false
+  const nextInThread = next.replyRootId !== null
+  const nextIsThreadRoot = next.replyRootId === next.id
+  const differentThread = next.replyRootId !== current.replyRootId
+  return nextInThread && !nextIsThreadRoot && (differentThread || datesDifferBetween(next, current))
+}
+
+function replyShadowFor(
+  message: MessageResource,
+  prev: MessageResource | undefined
+): ReplyShadowMessage | undefined {
+  if (!message.replyRootId) return undefined
+  if (message.replyRootId === message.id) return undefined
+
+  const enteringNewThread =
+    !prev || prev.replyRootId !== message.replyRootId || datesDifferBetween(prev, message)
+  if (!enteringNewThread) return undefined
+
+  return {
+    type: 'ReplyShadowMessage',
+    id: `${message.id}-${message.replyRootId}`,
+    messageId: message.replyRootId,
+    isReplyShadowMessage: true,
+    nextRendersAuthor: message.renderAuthor ?? false,
+  }
+}

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)
+}