@planningcenter/chat-react-native 3.45.1-qa-staging.8 → 3.45.1-qa-staging.10

package/src/components/conversation/message_list.tsx

@@ -0,0 +1,157 @@
+import { date as formatDate } from '@planningcenter/datetime-fmt'
+import React, { RefObject } from 'react'
+import { FlatList, FlatListProps, StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+import { ConversationResource } from '../../types/resources/conversation'
+import { MessageResource } from '../../types/resources/message'
+import { getRelativeDateStatus } from '../../utils/date'
+import { groupMessages, type DateSeparator, type EnrichedMessage } from '../../utils/group_messages'
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../../utils/styles'
+import { isSystemMessage } from '../../utils/system_messages'
+import { Text } from '../display'
+import { ConversationStartBanner } from './conversation_start_banner'
+import { Message } from './message'
+import { ReplyShadowMessage } from './reply_shadow_message'
+import { SystemMessage } from './system_message'
+
+type ScrollHandlers = Pick<
+  FlatListProps<EnrichedMessage>,
+  'onScroll' | 'onLayout' | 'onContentSizeChange' | 'onScrollEndDrag' | 'onMomentumScrollEnd'
+>
+
+interface MessageListProps extends ScrollHandlers {
+  listRef: RefObject<FlatList | null>
+  conversation: ConversationResource
+  conversationId: number
+  messages: MessageResource[]
+  replyRootId?: string | null
+  hasNextPage: boolean
+  onEndReached: () => void
+}
+
+/** MessageList
+ * The inverted list of messages, reply previews, and date separators for a conversation
+ */
+export function MessageList({
+  listRef,
+  conversation,
+  conversationId,
+  messages,
+  replyRootId,
+  hasNextPage,
+  onEndReached,
+  onScroll,
+  onLayout,
+  onContentSizeChange,
+  onScrollEndDrag,
+  onMomentumScrollEnd,
+}: MessageListProps) {
+  const styles = useStyles()
+  const inReplyScreen = !!replyRootId
+  const canDeleteNonAuthoredMessages =
+    conversation.memberAbility?.canDeleteNonAuthoredMessages ?? false
+  const latestRead = conversation.latestReadMessageSortKey
+  const messagesWithSeparators = groupMessages({ ms: messages, inReplyScreen })
+
+  return (
+    <FlatList
+      inverted
+      ref={listRef}
+      contentContainerStyle={styles.listContainer}
+      data={messagesWithSeparators}
+      keyExtractor={item => item.id}
+      onScroll={onScroll}
+      onLayout={onLayout}
+      onContentSizeChange={onContentSizeChange}
+      onScrollEndDrag={onScrollEndDrag}
+      onMomentumScrollEnd={onMomentumScrollEnd}
+      scrollEventThrottle={10}
+      ListFooterComponent={
+        hasNextPage ? null : (
+          <ConversationStartBanner conversation={conversation} hasMessages={true} />
+        )
+      }
+      renderItem={({ item }) => {
+        if (item.type === 'DateSeparator') {
+          return <InlineDateSeparator {...item} />
+        }
+
+        if (item.type === 'ReplyShadowMessage') {
+          return (
+            <ReplyShadowMessage
+              {...(item as any)}
+              conversation_id={conversationId}
+              inReplyScreen={inReplyScreen}
+            />
+          )
+        }
+
+        if (isSystemMessage(item)) {
+          return <SystemMessage message={item} conversationId={conversationId} />
+        }
+
+        const readByOthers = item.mine && !!latestRead && item.id <= latestRead
+        return (
+          <Message
+            {...item}
+            canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
+            conversation_id={conversationId}
+            readByOthers={readByOthers}
+            inReplyScreen={inReplyScreen}
+          />
+        )
+      }}
+      onEndReached={onEndReached}
+      ListHeaderComponent={<View style={styles.listHeader} />}
+    />
+  )
+}
+
+function InlineDateSeparator({ date }: DateSeparator) {
+  const styles = useDateSeparatorStyles()
+  const { isThisYear } = getRelativeDateStatus(date)
+  const showYear = !isThisYear
+  const dateStamp = formatDate(date, { style: 'long', year: showYear })
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.separator} />
+      <Text variant="footnote" style={styles.dateText}>
+        {dateStamp}
+      </Text>
+      <View style={styles.separator} />
+    </View>
+  )
+}
+
+const useDateSeparatorStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+      paddingVertical: 16,
+    },
+    separator: {
+      flex: 1,
+      height: 1,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.borderColorDefaultBase,
+    },
+    dateText: {
+      paddingHorizontal: 8,
+    },
+  })
+}
+
+const useStyles = () =>
+  StyleSheet.create({
+    listContainer: {
+      paddingVertical: 12,
+    },
+    listHeader: {
+      // Just whitespace to provide space where the typing indicator can be
+      height: 16,
+    },
+  })

package/src/components/conversation/message_read_receipts.tsx

@@ -1,17 +1,15 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useTheme } from '../../hooks'
-import { MessageResource } from '../../types'
 import { Icon, Text } from '../display'
 
 interface Props {
-  message: MessageResource
-  latestReadMessageSortKey?: string
+  read?: boolean
 }
 
-export function MessageReadReceipts({ message, latestReadMessageSortKey }: Props) {
+export function MessageReadReceipts({ read }: Props) {
   const styles = useStyles()
-  if (!latestReadMessageSortKey || message.id > latestReadMessageSortKey) {
+  if (!read) {
     return (
       <View style={styles.badgeContainer}>
         <Icon name="general.check" style={styles.icon} />

package/src/components/conversation/reply_shadow_message.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import { some } from 'lodash'
-import React from 'react'
+import React, { memo } from 'react'
 import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
 import Animated from 'react-native-reanimated'
 import {
@@ -37,7 +37,7 @@ interface ReplyShadowMessageProps extends MessageResource {
   nextRendersAuthor: boolean
 }
 
-export function ReplyShadowMessage({
+export const ReplyShadowMessage = memo(function ReplyShadowMessageRow({
   conversation_id,
   inReplyScreen,
   messageId,
@@ -59,7 +59,7 @@ export function ReplyShadowMessage({
   }
 
   return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />
-}
+})
 
 interface ShadowMessageContentProps extends MessageResource {
   conversation_id: number

package/src/hooks/use_conversation_messages.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { MessageResource } from '../types'
+import { replaceEqualById } from '../utils/replace_equal_by_id'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
 import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
@@ -10,7 +11,10 @@ export const useConversationMessages = (
   const { data, refetch, isRefetching, fetchNextPage, hasNextPage } =
     useSuspensePaginator<MessageResource>(
       getMessagesRequestArgs({ conversation_id, reply_root_id }),
-      opts
+      {
+        structuralSharing: replaceEqualById,
+        ...opts,
+      }
     )
   const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
   const messages = useMemo(

package/src/screens/conversation_screen.tsx

@@ -1,4 +1,3 @@
-import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
   CommonActions,
@@ -11,24 +10,21 @@ import {
 import React, { 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, Text } from '../components'
+import { Badge, Icon } from '../components'
 import { ConversationStartBanner } from '../components/conversation/conversation_start_banner'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
-import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
+import { MessageList } from '../components/conversation/message_list'
 import {
   ConversationDisabledBanner,
   LeaderMessagesDisabledBanner,
   MemberMessagesDisabledBanner,
 } from '../components/conversation/messages_disabled_banners'
-import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
-import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
 import { KeyboardView } from '../components/display/keyboard_view'
 import { useHeaderSlotReserve } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
-import { useTheme } from '../hooks'
 import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
@@ -45,10 +41,6 @@ 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 { getRelativeDateStatus } from '../utils/date'
-import { groupMessages, type DateSeparator } from '../utils/group_messages'
-import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
-import { isSystemMessage } from '../utils/system_messages'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -101,16 +93,11 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const messagesWithSeparators = groupMessages({
-    ms: messages,
-    inReplyScreen: !!reply_root_id,
-  })
-  const noMessages = messagesWithSeparators.length === 0
+  const noMessages = messages.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
   const canReply = memberAbility?.canReply
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
-  const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
   const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
   const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
   const replyHeaderTitle = replyRootAuthorFirstName
@@ -181,54 +168,19 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             <ConversationStartBanner conversation={conversation} hasMessages={false} />
           </View>
         ) : (
-          <FlatList
-            inverted
-            ref={listRef}
-            contentContainerStyle={styles.listContainer}
-            data={messagesWithSeparators}
-            keyExtractor={item => item.id}
+          <MessageList
+            listRef={listRef}
+            conversation={conversation}
+            conversationId={conversation_id}
+            messages={messages}
+            replyRootId={reply_root_id}
+            hasNextPage={hasNextPage}
+            onEndReached={() => fetchNextPage()}
             onScroll={trackScroll}
             onLayout={onLayout}
             onContentSizeChange={onContentSizeChange}
             onScrollEndDrag={onScrollEndDrag}
             onMomentumScrollEnd={onMomentumScrollEnd}
-            scrollEventThrottle={10}
-            ListFooterComponent={
-              hasNextPage ? null : (
-                <ConversationStartBanner conversation={conversation} hasMessages={true} />
-              )
-            }
-            renderItem={({ item }) => {
-              if (item.type === 'DateSeparator') {
-                return <InlineDateSeparator {...item} />
-              }
-
-              if (item.type === 'ReplyShadowMessage') {
-                return (
-                  <ReplyShadowMessage
-                    {...(item as any)}
-                    conversation_id={conversation_id}
-                    inReplyScreen={!!reply_root_id}
-                  />
-                )
-              }
-
-              if (isSystemMessage(item)) {
-                return <SystemMessage message={item} conversationId={conversation_id} />
-              }
-
-              return (
-                <Message
-                  {...item}
-                  canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
-                  conversation_id={conversation_id}
-                  latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
-                  inReplyScreen={!!reply_root_id}
-                />
-              )
-            }}
-            onEndReached={() => fetchNextPage()}
-            ListHeaderComponent={<View style={styles.listHeader} />}
           />
         )}
         <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
@@ -295,44 +247,6 @@ function ConversationBottomBar({
   )
 }
 
-function InlineDateSeparator({ date }: DateSeparator) {
-  const styles = useDateSeparatorStyles()
-  const { isThisYear } = getRelativeDateStatus(date)
-  const showYear = !isThisYear
-  const dateStamp = formatDate(date, { style: 'long', year: showYear })
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.separator} />
-      <Text variant="footnote" style={styles.dateText}>
-        {dateStamp}
-      </Text>
-      <View style={styles.separator} />
-    </View>
-  )
-}
-
-const useDateSeparatorStyles = () => {
-  const theme = useTheme()
-  return StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      flexDirection: 'row',
-      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
-      paddingVertical: 16,
-    },
-    separator: {
-      flex: 1,
-      height: 1,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.borderColorDefaultBase,
-    },
-    dateText: {
-      paddingHorizontal: 8,
-    },
-  })
-}
-
 interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource
@@ -429,13 +343,6 @@ const useStyles = () => {
       flex: 1,
       justifyContent: 'center',
     },
-    listContainer: {
-      paddingVertical: 12,
-    },
-    listHeader: {
-      // Just whitespace to provide space where the typing indicator can be
-      height: 16,
-    },
   })
 }
 

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

@@ -0,0 +1,73 @@
+import { replaceEqualById } from '../replace_equal_by_id'
+
+type Record = { type: 'Message'; id: string; text: string; attachments: string[] }
+type Pages = { pages: { data: Record[]; links: {}; meta: {} }[]; pageParams: unknown[] }
+
+const record = (id: string, text = id): Record => ({ type: 'Message', id, text, attachments: [] })
+const pagesOf = (...pages: Record[][]): Pages => ({
+  pages: pages.map(data => ({ data, links: {}, meta: {} })),
+  pageParams: pages.map(() => ({})),
+})
+
+const share = (prev: Pages, next: Pages) => replaceEqualById(prev, next) as Pages
+
+describe('replaceEqualById', () => {
+  it('returns the previous data when nothing changed', () => {
+    const prev = pagesOf([record('c'), record('b')], [record('a')])
+    const next = pagesOf([record('c'), record('b')], [record('a')])
+
+    expect(share(prev, next)).toBe(prev)
+  })
+
+  it('keeps every existing record when one is inserted at the head', () => {
+    const [c, b] = [record('c'), record('b')]
+    const prev = pagesOf([c, b])
+    const next = pagesOf([record('d'), record('c'), record('b')])
+
+    const result = share(prev, next)
+
+    expect(result.pages[0].data[1]).toBe(c)
+    expect(result.pages[0].data[2]).toBe(b)
+    expect(result.pages[0].data[0].id).toBe('d')
+  })
+
+  it('keeps the survivors when a record is removed', () => {
+    const [c, b, a] = [record('c'), record('b'), record('a')]
+    const prev = pagesOf([c, b, a])
+    const next = pagesOf([record('c'), record('a')])
+
+    const result = share(prev, next)
+
+    expect(result.pages[0].data).toEqual([c, a])
+    expect(result.pages[0].data[0]).toBe(c)
+    expect(result.pages[0].data[1]).toBe(a)
+  })
+
+  it('replaces only the changed record and keeps its untouched nested references', () => {
+    const b = record('b')
+    const prev = pagesOf([record('c'), b])
+    const next = pagesOf([record('c'), { ...record('b', 'edited'), attachments: [] }])
+
+    const result = share(prev, next)
+
+    expect(result.pages[0].data[0]).toBe(prev.pages[0].data[0])
+    expect(result.pages[0].data[1]).not.toBe(b)
+    expect(result.pages[0].data[1].text).toBe('edited')
+    expect(result.pages[0].data[1].attachments).toBe(b.attachments)
+  })
+
+  it('keeps untouched pages when only another page changed', () => {
+    const prev = pagesOf([record('c')], [record('a')])
+    const next = pagesOf([record('d'), record('c')], [record('a')])
+
+    const result = share(prev, next)
+
+    expect(result.pages[1]).toBe(prev.pages[1])
+  })
+
+  it('returns the new data when there is nothing to share with', () => {
+    const next = pagesOf([record('a')])
+
+    expect(replaceEqualById(undefined, next)).toBe(next)
+  })
+})

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

@@ -59,13 +59,12 @@ describe('updateCacheReplyRoots', () => {
     expect(other.replyRoot?.text).toBe('other')
   })
 
-  it('leaves the cache untouched when no reply carries the root', () => {
+  it('ignores replies without an inline root', () => {
     const queryClient = new QueryClient()
-    seedPages(queryClient, [message('01', { replyRootId: 'rootB' })])
-    const before = pageMessages(queryClient)
+    seedPages(queryClient, [message('01', { replyRootId: 'rootA' })])
 
     updateCacheReplyRoots(queryClient, queryKey, message('rootA', { replyRootId: 'rootA' }))
 
-    expect(pageMessages(queryClient)).toBe(before)
+    expect(pageMessages(queryClient)[0].replyRoot).toBeUndefined()
   })
 })

package/src/utils/replace_equal_by_id.ts

@@ -0,0 +1,42 @@
+import { InfiniteData, replaceEqualDeep } from '@tanstack/react-query'
+import { ApiCollection, ResourceObject } from '../types'
+
+type Pages = InfiniteData<ApiCollection<ResourceObject>>
+
+/** replaceEqualById
+ * TanStack's default structural sharing compares arrays by index, so an insert or
+ * delete gives every shifted record a new identity. Match by id instead.
+ */
+export function replaceEqualById(oldData: unknown, newData: unknown): unknown {
+  const prev = oldData as Pages | undefined
+  const next = newData as Pages
+  if (!prev?.pages || !next?.pages) return replaceEqualDeep(prev, next)
+
+  const prevById = new Map<ResourceObject['id'], ResourceObject>()
+  prev.pages.forEach(page => page.data.forEach(record => prevById.set(record.id, record)))
+
+  let changed = prev.pages.length !== next.pages.length
+  const pages = next.pages.map((page, index) => {
+    const prevPage = prev.pages[index]
+    const data = page.data.map(record => {
+      const previous = prevById.get(record.id)
+      return previous ? replaceEqualDeep(previous, record) : record
+    })
+    const links = replaceEqualDeep(prevPage?.links, page.links)
+    const meta = replaceEqualDeep(prevPage?.meta, page.meta)
+    const sameRecords =
+      !!prevPage &&
+      data.length === prevPage.data.length &&
+      data.every((record, i) => record === prevPage.data[i])
+
+    if (prevPage && sameRecords && links === prevPage.links && meta === prevPage.meta) {
+      return prevPage
+    }
+    changed = true
+    return { ...page, data, links, meta }
+  })
+  const pageParams = replaceEqualDeep(prev.pageParams, next.pageParams)
+
+  if (!changed && pageParams === prev.pageParams) return prev
+  return { ...next, pages, pageParams }
+}