@planningcenter/chat-react-native 4.2.0 → 4.2.1-qa-staging.1

package/src/screens/conversation_screen.tsx

@@ -7,10 +7,11 @@ import {
   useTheme as useNavigationTheme,
   useRoute,
 } from '@react-navigation/native'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { startTransition, useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon } from '../components'
+import { AnchorNotFoundBoundary } from '../components/conversation/anchor_not_found_boundary'
 import { ConversationStartBanner } from '../components/conversation/conversation_start_banner'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 import { MessageForm } from '../components/conversation/message_form'
@@ -30,6 +31,8 @@ import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events'
+import { useFetchNewerMessages } from '../hooks/use_fetch_newer_messages'
+import { useFetchNewerOnForeground } from '../hooks/use_fetch_newer_on_foreground'
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
   analyticsEvents,
@@ -41,6 +44,8 @@ import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { MessageResource } from '../types/resources/message'
+import { gatedMessageCache } from '../utils/gated_message_cache'
+import { decodeUlidTime } from '../utils/ulid'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -49,6 +54,7 @@ export type ConversationRouteProps = {
   chat_group_graph_id?: string
   clear_input?: boolean
   editing_message_id?: number | null
+  initial_message_id?: string | null
   title?: string
   subtitle?: string
   badge?: ConversationBadgeResource
@@ -59,9 +65,16 @@ export type ConversationRouteProps = {
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
-  const { conversation_id, reply_root_id } = route.params
+  const { conversation_id, reply_root_id, initial_message_id } = route.params
 
   const { data: conversation } = useConversation({ conversation_id })
+  const [anchor, setAnchor] = useState(() =>
+    isBeforeLatestMessage(initial_message_id, conversation?.lastMessageCreatedAt)
+      ? initial_message_id
+      : null
+  )
+  const exitAnchoredMode = useCallback(() => startTransition(() => setAnchor(null)), [])
+  const dropAnchor = useCallback(() => setAnchor(null), [])
 
   usePublishProductAnalyticsEvent(analyticsEvents.conversation_show_opened, {
     reply_root_id,
@@ -73,26 +86,72 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
       conversationId={conversation_id}
       currentPageReplyRootId={reply_root_id ?? null}
     >
-      <ConversationScreenContent route={route} />
+      {anchor ? (
+        <AnchorNotFoundBoundary onAnchorNotFound={dropAnchor}>
+          <ConversationScreenContent
+            route={route}
+            anchor={anchor}
+            onExitAnchoredMode={exitAnchoredMode}
+          />
+        </AnchorNotFoundBoundary>
+      ) : (
+        <ConversationScreenContent
+          route={route}
+          anchor={null}
+          onExitAnchoredMode={exitAnchoredMode}
+        />
+      )}
     </ConversationContextProvider>
   )
 }
 
-function ConversationScreenContent({ route }: ConversationScreenProps) {
+interface ConversationScreenContentProps extends ConversationScreenProps {
+  anchor: string | null | undefined
+  onExitAnchoredMode: () => void
+}
+
+function ConversationScreenContent({
+  route,
+  anchor,
+  onExitAnchoredMode,
+}: ConversationScreenContentProps) {
   const styles = useStyles()
   const navigation = useNavigation()
   const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
     route.params
   const { data: conversation } = useConversation(route.params)
-  const { messages, fetchNextPage, hasNextPage } = useConversationMessages({
-    conversation_id,
-    reply_root_id,
-  })
+  const anchored = !!anchor
+  const {
+    messages,
+    fetchNextPage,
+    hasNextPage,
+    fetchPreviousPage,
+    hasPreviousPage,
+    isFetchingPreviousPage,
+    queryKey,
+  } = useConversationMessages({ conversation_id, reply_root_id, anchor })
+  const behindLatest = anchored && hasPreviousPage
+  const caughtUp = !hasPreviousPage
+  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
+  const readingHistory = showJumpToBottomButton
+  const skippedNewMessages = useRef(false)
+  const messageCaches = [
+    gatedMessageCache({
+      queryKey,
+      acceptNewMessages: caughtUp && !readingHistory,
+      onSkippedNewMessage: () => {
+        skippedNewMessages.current = true
+      },
+    }),
+  ]
+  const newestMessageId = messages[0]?.id
   useConversationJoltEvents({ conversationId: conversation_id })
-  useConversationMessagesJoltEvents({ conversationId: conversation_id })
+  useConversationMessagesJoltEvents({ conversationId: conversation_id, messageCaches })
   const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
-  useMarkLatestMessageRead({ conversation, messages })
+  useMarkLatestMessageRead({ conversation, messages, enabled: !behindLatest })
+  const fetchNewer = useFetchNewerMessages({ conversation_id, reply_root_id, queryKey })
+  useFetchNewerOnForeground({ fetchNewer, newestMessageId, enabled: anchored && caughtUp })
   const noMessages = messages.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
@@ -107,12 +166,8 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const muted = conversation.conversationMembership?.muted ?? conversation.muted
 
   const listRef = useRef<FlatList>(null)
-  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
-
-  const trackScroll = (event: any) => {
-    const offsetY = event.nativeEvent.contentOffset.y
-    setShowJumpToBottomButton(offsetY > 200)
-  }
+  const [hasDragged, setHasDragged] = useState(false)
+  const holdListPosition = behindLatest || readingHistory
 
   const { restOffset, onLayout, onContentSizeChange, onMomentumScrollEnd, onScrollEndDrag } =
     useRestAwayFromDismissEdge({
@@ -126,6 +181,35 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
     })
   }, [restOffset])
 
+  const exitAnchoredMode = useCallback(() => {
+    onExitAnchoredMode()
+    handleReturnToBottom()
+  }, [handleReturnToBottom, onExitAnchoredMode])
+  const jumpToLatest = useCallback(() => {
+    setShowJumpToBottomButton(false)
+    if (behindLatest) exitAnchoredMode()
+    else handleReturnToBottom()
+  }, [behindLatest, exitAnchoredMode, handleReturnToBottom])
+
+  const trackScroll = (event: any) => {
+    const offsetY = event.nativeEvent.contentOffset.y
+    setShowJumpToBottomButton(offsetY > 200)
+  }
+
+  const loadNewerMessages = () => {
+    if (!hasPreviousPage || isFetchingPreviousPage) return
+
+    setHasDragged(false)
+    fetchPreviousPage()
+  }
+
+  useEffect(() => {
+    if (readingHistory || !caughtUp || !newestMessageId || !skippedNewMessages.current) return
+
+    skippedNewMessages.current = false
+    fetchNewer(newestMessageId)
+  }, [caughtUp, fetchNewer, newestMessageId, readingHistory])
+
   useEffect(() => {
     if (reply_root_id) {
       navigation.setParams({
@@ -174,6 +258,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             conversationId={conversation_id}
             messages={messages}
             replyRootId={reply_root_id}
+            anchorMessageId={anchor}
             hasNextPage={hasNextPage}
             onEndReached={() => fetchNextPage()}
             onScroll={trackScroll}
@@ -181,9 +266,18 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             onContentSizeChange={onContentSizeChange}
             onScrollEndDrag={onScrollEndDrag}
             onMomentumScrollEnd={onMomentumScrollEnd}
+            onScrollBeginDrag={anchored ? () => setHasDragged(true) : undefined}
+            onStartReached={anchored && hasDragged ? loadNewerMessages : undefined}
+            onStartReachedThreshold={anchored ? 0.5 : undefined}
+            maintainVisibleContentPosition={
+              holdListPosition ? { minIndexForVisible: 0 } : undefined
+            }
           />
         )}
-        <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
+        <JumpToBottomButton
+          onPress={jumpToLatest}
+          visible={behindLatest || showJumpToBottomButton}
+        />
         {!noMessages && <TypingIndicator />}
         {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         <ConversationBottomBar
@@ -193,6 +287,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
           replyRootId={reply_root_id}
           currentlyEditingMessage={currentlyEditingMessage}
           onFlaggedInMessageForm={markHandledByMessageForm}
+          onBeforeSubmit={jumpToLatest}
         />
       </KeyboardView>
     </View>
@@ -206,6 +301,7 @@ interface ConversationBottomBarProps {
   replyRootId: string | null | undefined
   currentlyEditingMessage: MessageResource | undefined
   onFlaggedInMessageForm?: (id: string) => void
+  onBeforeSubmit?: () => void
 }
 
 function ConversationBottomBar({
@@ -215,6 +311,7 @@ function ConversationBottomBar({
   replyRootId,
   currentlyEditingMessage,
   onFlaggedInMessageForm,
+  onBeforeSubmit,
 }: ConversationBottomBarProps) {
   const messageLink = useMessageAvailableMembersAction(conversation)
 
@@ -233,6 +330,7 @@ function ConversationBottomBar({
       replyRootId={replyRootId}
       currentlyEditingMessage={currentlyEditingMessage}
       onFlaggedInMessageForm={onFlaggedInMessageForm}
+      onBeforeSubmit={onBeforeSubmit}
       key={
         currentlyEditingMessage
           ? `edit-message-form-${currentlyEditingMessage.id}`
@@ -247,6 +345,11 @@ function ConversationBottomBar({
   )
 }
 
+const isBeforeLatestMessage = (anchor?: string | null, latestMessageCreatedAt?: string) =>
+  !!anchor &&
+  !!latestMessageCreatedAt &&
+  decodeUlidTime(anchor) < Date.parse(latestMessageCreatedAt)
+
 interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource

package/src/types/api_primitives.ts

@@ -33,12 +33,14 @@ export interface NextPageCursor {
   idLte?: string
   idGt?: string
   idGte?: string
+  order?: 'asc' | 'desc'
 }
 
 export interface CollectionMeta {
   count: number
   totalCount: number
   next?: NextPageCursor
+  prev?: NextPageCursor
   parent?: ResourceObject
   [attributeName: string]: unknown
 }

package/src/types/resources/member.ts

@@ -6,6 +6,7 @@ export interface MemberResource {
   badges: MemberBadge[]
   child: boolean
   directMessagesDisabled?: boolean
+  canDirectMessage?: boolean
   gender: string | null
   role?: string
 }

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

@@ -170,6 +170,35 @@ describe('groupMessages — reply roots', () => {
 
     expect(findShadow(enriched, '02-rootA')).toMatchObject({ replyRoot: null })
   })
+
+  it.each([
+    ['is still saving', { pending: true }],
+    ['failed to save', { error: 'Failed to send message' }],
+  ])('keeps the saved snapshot while a root edit %s', (_label, unsavedState) => {
+    const snapshot = message('rootA', { replyRootId: 'rootA', text: 'saved' })
+    const messages = [
+      message('03', { replyRootId: 'rootA', replyRoot: snapshot }),
+      message('02'),
+      message('rootA', { replyRootId: 'rootA', text: 'unsaved', ...unsavedState }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect(findShadow(enriched, '03-rootA')).toMatchObject({ replyRoot: { text: 'saved' } })
+    expect((findEnriched(enriched, 'rootA') as MessageResource).text).toBe('unsaved')
+  })
+
+  it('shows the unsaved root edit when the reply carries no snapshot to fall back on', () => {
+    const messages = [
+      message('03', { replyRootId: 'rootA' }),
+      message('02'),
+      message('rootA', { replyRootId: 'rootA', text: 'unsaved', pending: true }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect(findShadow(enriched, '03-rootA')).toMatchObject({ replyRoot: { text: 'unsaved' } })
+  })
 })
 
 describe('groupMessages — system messages', () => {

package/src/utils/cache/__tests__/prepend_newer_page.test.ts

@@ -0,0 +1,35 @@
+import { prependNewerPage } from '../prepend_newer_page'
+
+const page = (ids: string[], next?: { idGt: string }) => ({
+  data: ids.map(id => ({ id, type: 'Message' })),
+  links: {},
+  meta: { count: ids.length, totalCount: ids.length, next },
+})
+const pageParam = { where: { id_gt: '01C' }, order: 'asc' }
+
+describe('prependNewerPage', () => {
+  const cached = { pages: [page(['01C', '01B']), page(['01A'])], pageParams: [{}, { offset: 1 }] }
+
+  it('prepends only the messages the cache does not already hold', () => {
+    const result = prependNewerPage(cached, page(['01C', '01D', '01E']), pageParam)
+
+    expect(result?.pages[0].data.map(m => m.id)).toEqual(['01D', '01E'])
+    expect(result?.pages).toHaveLength(3)
+    expect(result?.pageParams[0]).toEqual(pageParam)
+  })
+
+  it('leaves the cache alone when nothing new came back', () => {
+    expect(prependNewerPage(cached, page(['01C']), pageParam)).toBe(cached)
+  })
+
+  it('still prepends an empty page when the server reports more newer messages', () => {
+    const result = prependNewerPage(cached, page(['01C'], { idGt: '01C' }), pageParam)
+
+    expect(result?.pages[0].data).toEqual([])
+    expect(result?.pages[0].meta.next).toEqual({ idGt: '01C' })
+  })
+
+  it('does nothing without cached data', () => {
+    expect(prependNewerPage(undefined, page(['01D']), pageParam)).toBeUndefined()
+  })
+})

package/src/utils/cache/prepend_newer_page.ts

@@ -0,0 +1,22 @@
+import { InfiniteData } from '@tanstack/react-query'
+import { ApiCollection, ResourceObject } from '../../types'
+import { RequestData } from '../client'
+
+type PagesData<T extends ResourceObject> = InfiniteData<ApiCollection<T>, Partial<RequestData>>
+
+export function prependNewerPage<T extends ResourceObject>(
+  data: PagesData<T> | undefined,
+  page: ApiCollection<T>,
+  pageParam: Partial<RequestData>
+): PagesData<T> | undefined {
+  if (!data) return data
+
+  const knownIds = new Set(data.pages.flatMap(p => p.data.map(record => record.id)))
+  const fresh = page.data.filter(record => !knownIds.has(record.id))
+  if (fresh.length === 0 && !page.meta?.next) return data
+
+  return {
+    pages: [{ ...page, data: fresh }, ...data.pages],
+    pageParams: [pageParam, ...data.pageParams],
+  }
+}

package/src/utils/client/types.ts

@@ -65,4 +65,5 @@ export type RequestData = {
   data: Record<string, unknown>
   perPage: number
   offset: number
+  order: string
 }

package/src/utils/gated_message_cache.ts

@@ -0,0 +1,19 @@
+import type { MessagesCache } from '../hooks/use_conversation_messages_jolt_events'
+
+export const gatedMessageCache = ({
+  queryKey,
+  acceptNewMessages,
+  onSkippedNewMessage,
+}: {
+  queryKey: unknown[]
+  acceptNewMessages: boolean
+  onSkippedNewMessage?: () => void
+}): MessagesCache => ({
+  queryKey,
+  canUpdate: event => {
+    if (event !== 'message.created' || acceptNewMessages) return true
+
+    onSkippedNewMessage?.()
+    return false
+  },
+})

package/src/utils/generate_placeholder_ulid.ts

@@ -1,3 +1,5 @@
+import { ULID_CHARS } from './ulid'
+
 /**
  * The actual `ulid` library depends on a secure random number generator, which looks like it
  * may require a native dependency to polyfill in React Native.
@@ -5,8 +7,6 @@
  * implementation that doesn't require any native dependencies.
  */
 
-const ULID_CHARS = '0123456789ABCDEFGHJKMNPQRSTVWXYZ' // Crockford's Base32
-
 function encodeBase32(value: number, length: number) {
   let result = ''
   for (let i = 0; i < length; i++) {

package/src/utils/group_messages.ts

@@ -74,7 +74,10 @@ function resolveReplyRoot(
   messagesById: Map<string, MessageResource>
 ): MessageResource | null {
   if (!message.replyRootId || message.replyRootId === message.id) return null
-  return messagesById.get(message.replyRootId) ?? message.replyRoot ?? null
+  const loadedRoot = messagesById.get(message.replyRootId)
+  const loadedRootIsSaved = !!loadedRoot && !loadedRoot.pending && !loadedRoot.error
+  if (loadedRootIsSaved) return loadedRoot
+  return message.replyRoot ?? loadedRoot ?? null
 }
 
 function enrichSystemMessage(

package/src/utils/request/get_messages.ts

@@ -1,17 +1,22 @@
 import { getRequestQueryKey } from '../../hooks/use_suspense_api'
 import { getMessageFields, getMessagesInclude } from './messages_data_options'
 
+type MessagesRequestOptions = {
+  conversation_id: number
+  reply_root_id?: string | null
+  anchor?: string | null
+}
+
 export const getMessagesRequestArgs = ({
   conversation_id,
   reply_root_id,
-}: {
-  conversation_id: number
-  reply_root_id?: string | null
-}) => {
+  anchor,
+}: MessagesRequestOptions) => {
   const normalizedReplyRootId = reply_root_id ?? null
   const url = normalizedReplyRootId
     ? `/me/conversations/${conversation_id}/messages/${normalizedReplyRootId}/replies`
     : `/me/conversations/${conversation_id}/messages`
+  const anchored = anchor ? { where: { id_around: anchor } } : {}
 
   return {
     url,
@@ -19,18 +24,11 @@ export const getMessagesRequestArgs = ({
       perPage: 25,
       fields: getMessageFields,
       include: getMessagesInclude,
+      ...anchored,
     },
     reply_root_id: normalizedReplyRootId,
   }
 }
 
-export const getMessagesQueryKey = ({
-  conversation_id,
-  reply_root_id,
-}: {
-  conversation_id: number
-  reply_root_id?: string | null
-}) => {
-  const requestArgs = getMessagesRequestArgs({ conversation_id, reply_root_id })
-  return getRequestQueryKey(requestArgs)
-}
+export const getMessagesQueryKey = (options: MessagesRequestOptions) =>
+  getRequestQueryKey(getMessagesRequestArgs(options))

package/src/utils/ulid.ts

@@ -0,0 +1,11 @@
+export const ULID_CHARS = '0123456789ABCDEFGHJKMNPQRSTVWXYZ' // Crockford's Base32
+
+const TIME_LENGTH = 10
+
+export function decodeUlidTime(ulid: string): number {
+  return ulid
+    .slice(0, TIME_LENGTH)
+    .toUpperCase()
+    .split('')
+    .reduce((time, char) => time * 32 + ULID_CHARS.indexOf(char), 0)
+}