@planningcenter/chat-react-native 3.38.0-rc.9 → 3.38.0

package/src/components/conversation/unread_divider.tsx

@@ -1,90 +0,0 @@
-import { StyleSheet, View } from 'react-native'
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
-import Svg, { Defs, Path, Pattern, Rect } from 'react-native-svg'
-import { useConversationContext } from '../../contexts/conversation_context'
-import { useTheme } from '../../hooks'
-import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../../utils/styles'
-import { Text } from '../display'
-
-interface UnreadDividerProps {
-  scrolledPast?: boolean
-}
-
-const WAVE_WIDTH = 16
-const WAVE_HEIGHT = 8
-const FADE_DURATION = 750
-
-export function UnreadDivider({ scrolledPast = false }: UnreadDividerProps) {
-  const styles = useStyles()
-  const { atEndOfMessageHistory } = useConversationContext()
-
-  if (scrolledPast || atEndOfMessageHistory) return null
-
-  return (
-    <Animated.View
-      entering={FadeIn.duration(FADE_DURATION)}
-      exiting={FadeOut.duration(FADE_DURATION)}
-      style={styles.container}
-      accessibilityRole="header"
-      accessibilityLabel="Unread messages start here"
-    >
-      <SquigglyLine />
-      <Text variant="footnote" style={styles.label}>
-        New
-      </Text>
-      <SquigglyLine />
-    </Animated.View>
-  )
-}
-
-function SquigglyLine() {
-  const { colors } = useTheme()
-  return (
-    <View style={squigglyStyle.container}>
-      <Svg width="100%" height={WAVE_HEIGHT}>
-        <Defs>
-          <Pattern
-            id="wave"
-            x="0"
-            y="0"
-            width={WAVE_WIDTH}
-            height={WAVE_HEIGHT}
-            patternUnits="userSpaceOnUse"
-          >
-            <Path
-              d="M 0 4 Q 4 0 8 4 T 16 4"
-              stroke={colors.interaction}
-              strokeWidth={1.5}
-              fill="none"
-            />
-          </Pattern>
-        </Defs>
-        <Rect x="0" y="0" width="100%" height={WAVE_HEIGHT} fill="url(#wave)" />
-      </Svg>
-    </View>
-  )
-}
-
-const squigglyStyle = StyleSheet.create({
-  container: {
-    flex: 1,
-    height: WAVE_HEIGHT,
-  },
-})
-
-const useStyles = () => {
-  const { colors } = useTheme()
-  return StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      flexDirection: 'row',
-      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
-      paddingVertical: 8,
-      gap: 8,
-    },
-    label: {
-      color: colors.interaction,
-      fontWeight: '600',
-    },
-  })
-}

package/src/hooks/use_flat_list_viewability.ts

@@ -1,50 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-import type { ViewToken } from 'react-native'
-import type { ViewabilityObserver } from '../utils/message_viewability'
-
-interface UseFlatListViewabilityArgs<Item> {
-  observers: ViewabilityObserver<Item>[]
-  itemVisiblePercentThreshold?: number
-}
-
-export function useFlatListViewability<Item>({
-  observers,
-  itemVisiblePercentThreshold = 50,
-}: UseFlatListViewabilityArgs<Item>) {
-  const userHasScrolledRef = useRef(false)
-  const observersRef = useRef(observers)
-
-  useEffect(() => {
-    observersRef.current = observers
-  })
-
-  const onScrollBeginDrag = useCallback(() => {
-    userHasScrolledRef.current = true
-  }, [])
-
-  const viewabilityConfigCallbackPairs = useRef([
-    {
-      viewabilityConfig: { itemVisiblePercentThreshold },
-      onViewableItemsChanged: ({
-        viewableItems,
-        changed,
-      }: {
-        viewableItems: ViewToken[]
-        changed: ViewToken[]
-      }) => {
-        const event = {
-          viewableItems: viewableItems.map(toEntry<Item>),
-          changed: changed.map(toEntry<Item>),
-          userHasScrolled: userHasScrolledRef.current,
-        }
-        for (const observer of observersRef.current) observer(event)
-      },
-    },
-  ]).current
-
-  return { viewabilityConfigCallbackPairs, onScrollBeginDrag }
-}
-
-function toEntry<Item>(token: ViewToken) {
-  return { key: token.key, isViewable: !!token.isViewable, item: token.item as Item }
-}

package/src/hooks/use_jump_to_bottom_action.ts

@@ -1,75 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query'
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
-import type { FlatList } from 'react-native'
-import { useConversationContext } from '../contexts/conversation_context'
-import { ApiCollection, MessageResource } from '../types'
-import { Haptic } from '../utils/native_adapters'
-import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
-import { useApiClient } from './use_api_client'
-import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
-
-const LATEST_PAGE_SIZE = 25
-
-export function useJumpToBottomAction({ listRef }: { listRef: RefObject<FlatList | null> }) {
-  const { jumpToUnreadEnabled } = useJumpToUnreadGates()
-  const { conversationId, currentPageReplyRootId, initialMessageId, setInitialMessageId } =
-    useConversationContext()
-  const queryClient = useQueryClient()
-  const apiClient = useApiClient()
-  const [isJumpingToBottom, setIsJumpingToBottom] = useState(false)
-
-  const mountedRef = useRef(true)
-  useEffect(
-    () => () => {
-      mountedRef.current = false
-    },
-    []
-  )
-
-  const handleJumpToBottom = useCallback(() => {
-    Haptic.impactLight()
-    listRef.current?.scrollToOffset({ offset: 0, animated: true })
-
-    if (!jumpToUnreadEnabled || !initialMessageId) return
-
-    const queryKey = getMessagesQueryKey({
-      conversation_id: conversationId,
-      reply_root_id: currentPageReplyRootId,
-    })
-    const args = getMessagesRequestArgs({
-      conversation_id: conversationId,
-      reply_root_id: currentPageReplyRootId,
-    })
-
-    setIsJumpingToBottom(true)
-
-    queryClient
-      .cancelQueries({ queryKey })
-      .then(() =>
-        apiClient.chat.get<ApiCollection<MessageResource>>({
-          url: args.url,
-          data: { ...args.data, perPage: LATEST_PAGE_SIZE },
-        })
-      )
-      .then(latest => {
-        if (!mountedRef.current) return
-        queryClient.setQueryData(queryKey, { pages: [latest], pageParams: [{}] })
-        setInitialMessageId(null)
-        listRef.current?.scrollToOffset({ offset: 0, animated: false })
-      })
-      .finally(() => {
-        if (mountedRef.current) setIsJumpingToBottom(false)
-      })
-  }, [
-    jumpToUnreadEnabled,
-    initialMessageId,
-    setInitialMessageId,
-    queryClient,
-    apiClient,
-    conversationId,
-    currentPageReplyRootId,
-    listRef,
-  ])
-
-  return { handleJumpToBottom, isJumpingToBottom }
-}

package/src/hooks/use_jump_to_unread_anchor.ts

@@ -1,68 +0,0 @@
-import { RefObject, useCallback, useEffect, useRef } from 'react'
-import type { FlatList } from 'react-native'
-import { useConversationContext } from '../contexts/conversation_context'
-import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
-
-interface UseJumpToUnreadAnchorArgs<T> {
-  listRef: RefObject<FlatList<T> | null>
-  items: T[]
-}
-
-interface ScrollToIndexFailInfo {
-  index: number
-  highestMeasuredFrameIndex: number
-  averageItemLength: number
-}
-
-export function useJumpToUnreadAnchor<T extends { id?: string | number }>({
-  listRef,
-  items,
-}: UseJumpToUnreadAnchorArgs<T>) {
-  const { jumpToUnreadActive } = useJumpToUnreadGates()
-  const { initialMessageId } = useConversationContext()
-  const hasAnchoredRef = useRef(false)
-  const userTouchedRef = useRef(false)
-  const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  useEffect(() => {
-    return () => {
-      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
-      retryTimerRef.current = null
-    }
-  }, [])
-
-  const onScrollBeginDrag = useCallback(() => {
-    userTouchedRef.current = true
-    if (retryTimerRef.current) {
-      clearTimeout(retryTimerRef.current)
-      retryTimerRef.current = null
-    }
-  }, [])
-
-  const onContentSizeChange = useCallback(() => {
-    if (hasAnchoredRef.current) return
-    if (!jumpToUnreadActive || !initialMessageId) return
-    if (userTouchedRef.current) return
-    const index = items.findIndex(item => String(item.id ?? '') === initialMessageId)
-    if (index < 0) return
-    hasAnchoredRef.current = true
-    listRef.current?.scrollToIndex({ index, viewPosition: 0.25, animated: false })
-  }, [jumpToUnreadActive, initialMessageId, items, listRef])
-
-  const onScrollToIndexFailed = useCallback(
-    (info: ScrollToIndexFailInfo) => {
-      if (userTouchedRef.current) return
-      const offset = info.averageItemLength * info.index
-      listRef.current?.scrollToOffset({ offset, animated: false })
-      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
-      retryTimerRef.current = setTimeout(() => {
-        retryTimerRef.current = null
-        if (userTouchedRef.current) return
-        listRef.current?.scrollToIndex({ index: info.index, viewPosition: 0.25, animated: false })
-      }, 50)
-    },
-    [listRef]
-  )
-
-  return { onScrollBeginDrag, onContentSizeChange, onScrollToIndexFailed }
-}

package/src/hooks/use_jump_to_unread_gates.ts

@@ -1,10 +0,0 @@
-import { useConversationContext } from '../contexts/conversation_context'
-import { availableFeatures, useFeatures } from './use_features'
-
-export function useJumpToUnreadGates() {
-  const { featureEnabled } = useFeatures()
-  const { initialMessageIdIsAnchor } = useConversationContext()
-  const jumpToUnreadEnabled = featureEnabled(availableFeatures.jump_to_unread)
-  const jumpToUnreadActive = jumpToUnreadEnabled && initialMessageIdIsAnchor
-  return { jumpToUnreadEnabled, jumpToUnreadActive }
-}

package/src/hooks/use_scroll_tracking.ts

@@ -1,64 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'
-import { useConversationContext } from '../contexts/conversation_context'
-
-const JUMP_TO_BOTTOM_OFFSET_THRESHOLD = 200
-const AT_BOTTOM_OFFSET_TOLERANCE = 5
-const FETCH_NEWER_OFFSET_THRESHOLD = 600
-
-interface UseScrollTrackingArgs {
-  hasMoreNewerMessages: boolean
-  isFetchingNewerMessages: boolean
-  fetchNewerMessages: () => void
-  cancelFetchNewerMessages: () => void
-}
-
-export function useScrollTracking({
-  hasMoreNewerMessages,
-  isFetchingNewerMessages,
-  fetchNewerMessages,
-  cancelFetchNewerMessages,
-}: UseScrollTrackingArgs) {
-  const { atEndOfMessageHistory, setAtEndOfMessageHistory } = useConversationContext()
-  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
-  const withinBoundaryRef = useRef(false)
-
-  useEffect(() => {
-    return () => {
-      cancelFetchNewerMessages()
-    }
-  }, [cancelFetchNewerMessages])
-
-  useEffect(() => {
-    if (!isFetchingNewerMessages) withinBoundaryRef.current = false
-  }, [isFetchingNewerMessages])
-
-  const onScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const offsetY = event.nativeEvent.contentOffset.y
-      setShowJumpToBottomButton(offsetY > JUMP_TO_BOTTOM_OFFSET_THRESHOLD)
-
-      const atBottom = offsetY < AT_BOTTOM_OFFSET_TOLERANCE
-      const atEnd = atBottom && !hasMoreNewerMessages
-      if (atEnd !== atEndOfMessageHistory) setAtEndOfMessageHistory(atEnd)
-
-      if (offsetY >= FETCH_NEWER_OFFSET_THRESHOLD) {
-        withinBoundaryRef.current = false
-        return
-      }
-      if (withinBoundaryRef.current) return
-      if (!hasMoreNewerMessages || isFetchingNewerMessages) return
-      withinBoundaryRef.current = true
-      fetchNewerMessages()
-    },
-    [
-      hasMoreNewerMessages,
-      isFetchingNewerMessages,
-      fetchNewerMessages,
-      atEndOfMessageHistory,
-      setAtEndOfMessageHistory,
-    ]
-  )
-
-  return { onScroll, showJumpToBottomButton }
-}

package/src/hooks/use_track_highest_seen_message.ts

@@ -1,43 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react'
-import { AppState } from 'react-native'
-import { useConversationContext } from '../contexts/conversation_context'
-import { makeHighestSeenTracker } from '../utils/highest_seen_tracker'
-import { useConversationsMarkReadUpTo } from './use_conversations_actions'
-import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
-
-export function useTrackHighestSeenMessage() {
-  const { conversationId, currentPageReplyRootId } = useConversationContext()
-  const { jumpToUnreadActive } = useJumpToUnreadGates()
-  const enabled = jumpToUnreadActive && !currentPageReplyRootId
-  const { mutate: markReadUpTo } = useConversationsMarkReadUpTo({ conversationId })
-
-  const tracker = useMemo(
-    () => makeHighestSeenTracker(conversationId, ({ sortKey }) => markReadUpTo({ sortKey })),
-    [conversationId, markReadUpTo]
-  )
-
-  const onMessageSeen = useCallback(
-    (sortKey: string) => {
-      if (!enabled) return
-      tracker.onSeen(sortKey)
-    },
-    [enabled, tracker]
-  )
-
-  useEffect(() => {
-    if (!enabled) return
-    const sub = AppState.addEventListener('change', state => {
-      if (state !== 'active') tracker.flushNow()
-    })
-    return () => sub.remove()
-  }, [enabled, tracker])
-
-  useEffect(() => {
-    return () => {
-      tracker.flushNow()
-      tracker.cancel()
-    }
-  }, [tracker])
-
-  return { onMessageSeen }
-}

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

@@ -1,105 +0,0 @@
-import { ApiCollection, MessageResource } from '../../types'
-import {
-  anchoredSeedPageParams,
-  newerPageParam,
-  olderPageParam,
-  sortAndFilterMessages,
-} from '../conversation_messages'
-
-const message = (id: string, overrides: Partial<MessageResource> = {}): MessageResource =>
-  ({
-    id,
-    type: 'Message',
-    text: `msg ${id}`,
-    attachments: [],
-    deletedAt: null,
-    replyRootId: null,
-    ...overrides,
-  }) as MessageResource
-
-const page = (
-  data: MessageResource[],
-  next?: { idLt?: string; idGt?: string }
-): ApiCollection<MessageResource> => ({
-  data,
-  links: {},
-  meta: { count: data.length, totalCount: data.length, next },
-})
-
-describe('anchoredSeedPageParams', () => {
-  it('returns one ascending after-page and one descending before-page', () => {
-    expect(anchoredSeedPageParams('01ABC')).toEqual([
-      { where: { id_gte: '01ABC' }, order: 'asc' },
-      { where: { id_lt: '01ABC' }, order: 'desc' },
-    ])
-  })
-})
-
-describe('olderPageParam', () => {
-  it('returns id_lt cursor when meta.next.idLt is present', () => {
-    expect(olderPageParam(page([], { idLt: '01XYZ' }))).toEqual({
-      where: { id_lt: '01XYZ' },
-      order: 'desc',
-    })
-  })
-
-  it('returns undefined when meta.next.idLt is missing', () => {
-    expect(olderPageParam(page([], {}))).toBeUndefined()
-    expect(olderPageParam(page([], { idGt: '01XYZ' }))).toBeUndefined()
-  })
-})
-
-describe('newerPageParam', () => {
-  it('returns id_gt cursor when meta.next.idGt is present', () => {
-    expect(newerPageParam(page([], { idGt: '01XYZ' }))).toEqual({
-      where: { id_gt: '01XYZ' },
-      order: 'asc',
-    })
-  })
-
-  it('returns undefined when meta.next.idGt is missing', () => {
-    expect(newerPageParam(page([], {}))).toBeUndefined()
-    expect(newerPageParam(page([], { idLt: '01XYZ' }))).toBeUndefined()
-  })
-})
-
-describe('sortAndFilterMessages', () => {
-  it('flattens pages and sorts descending by id (newest first)', () => {
-    const pages = [page([message('01B'), message('01A')]), page([message('01D'), message('01C')])]
-
-    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01D', '01C', '01B', '01A'])
-  })
-
-  it('drops empty messages (no text, no attachments)', () => {
-    const pages = [page([message('01A'), message('01B', { text: '' })])]
-
-    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01A'])
-  })
-
-  it('drops deleted messages outside reply threads', () => {
-    const pages = [page([message('01A'), message('01B', { deletedAt: '2026-01-01T00:00:00Z' })])]
-
-    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01A'])
-  })
-
-  it('keeps deleted reply-thread messages so threads do not break', () => {
-    const pages = [
-      page([
-        message('01A'),
-        message('01B', { deletedAt: '2026-01-01T00:00:00Z', replyRootId: '01A' }),
-      ]),
-    ]
-
-    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01B', '01A'])
-  })
-
-  it('keeps messages with attachments even when text is empty', () => {
-    const pages = [
-      page([
-        message('01A', { text: '', attachments: [{ id: '1' }] as MessageResource['attachments'] }),
-      ]),
-    ]
-
-    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01A'])
-  })
-})

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

@@ -1,82 +0,0 @@
-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' })
-  })
-})