@planningcenter/chat-react-native 4.2.0-rc.5 → 4.2.1-qa-staging.0

package/src/screens/conversation_screen.tsx

@@ -30,6 +30,7 @@ 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 { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
   analyticsEvents,
@@ -41,6 +42,7 @@ 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'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -84,15 +86,29 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   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({
+  const { messages, fetchNextPage, hasNextPage, queryKey } = useConversationMessages({
     conversation_id,
     reply_root_id,
   })
+  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
+  const readingHistory = showJumpToBottomButton
+  const skippedNewMessages = useRef(false)
+  const messageCaches = [
+    gatedMessageCache({
+      queryKey,
+      acceptNewMessages: !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 })
+  const fetchNewer = useFetchNewerMessages({ conversation_id, reply_root_id, queryKey })
   const noMessages = messages.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
@@ -107,7 +123,6 @@ 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
@@ -126,6 +141,18 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
     })
   }, [restOffset])
 
+  const jumpToLatest = useCallback(() => {
+    setShowJumpToBottomButton(false)
+    handleReturnToBottom()
+  }, [handleReturnToBottom])
+
+  useEffect(() => {
+    if (readingHistory || !newestMessageId || !skippedNewMessages.current) return
+
+    skippedNewMessages.current = false
+    fetchNewer(newestMessageId)
+  }, [fetchNewer, newestMessageId, readingHistory])
+
   useEffect(() => {
     if (reply_root_id) {
       navigation.setParams({
@@ -181,9 +208,10 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             onContentSizeChange={onContentSizeChange}
             onScrollEndDrag={onScrollEndDrag}
             onMomentumScrollEnd={onMomentumScrollEnd}
+            maintainVisibleContentPosition={readingHistory ? { minIndexForVisible: 0 } : undefined}
           />
         )}
-        <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
+        <JumpToBottomButton onPress={jumpToLatest} visible={showJumpToBottomButton} />
         {!noMessages && <TypingIndicator />}
         {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         <ConversationBottomBar
@@ -193,6 +221,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
           replyRootId={reply_root_id}
           currentlyEditingMessage={currentlyEditingMessage}
           onFlaggedInMessageForm={markHandledByMessageForm}
+          onBeforeSubmit={jumpToLatest}
         />
       </KeyboardView>
     </View>
@@ -206,6 +235,7 @@ interface ConversationBottomBarProps {
   replyRootId: string | null | undefined
   currentlyEditingMessage: MessageResource | undefined
   onFlaggedInMessageForm?: (id: string) => void
+  onBeforeSubmit?: () => void
 }
 
 function ConversationBottomBar({
@@ -215,6 +245,7 @@ function ConversationBottomBar({
   replyRootId,
   currentlyEditingMessage,
   onFlaggedInMessageForm,
+  onBeforeSubmit,
 }: ConversationBottomBarProps) {
   const messageLink = useMessageAvailableMembersAction(conversation)
 
@@ -233,6 +264,7 @@ function ConversationBottomBar({
       replyRootId={replyRootId}
       currentlyEditingMessage={currentlyEditingMessage}
       onFlaggedInMessageForm={onFlaggedInMessageForm}
+      onBeforeSubmit={onBeforeSubmit}
       key={
         currentlyEditingMessage
           ? `edit-message-form-${currentlyEditingMessage.id}`

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/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(