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

package/src/hooks/use_scroll_tracking.ts

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,43 @@
+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/screens/conversation_screen.tsx

@@ -8,8 +8,9 @@ import {
   useTheme as useNavigationTheme,
   useRoute,
 } from '@react-navigation/native'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { FlatList, Platform, StyleSheet, View } from 'react-native'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ActivityIndicator, FlatList, Platform, StyleSheet, View } from 'react-native'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
 import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
@@ -23,24 +24,43 @@ import {
 import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
 import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
+import { UnreadDivider } from '../components/conversation/unread_divider'
 import { KeyboardView } from '../components/display/keyboard_view'
 import BlankState from '../components/primitive/blank_state_primitive'
-import { ConversationContextProvider } from '../contexts/conversation_context'
+import {
+  ConversationContextProvider,
+  useConversationContext,
+} from '../contexts/conversation_context'
 import { useTheme } from '../hooks'
 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 { useFeatures } from '../hooks/use_features'
+import { useFlatListViewability } from '../hooks/use_flat_list_viewability'
+import { useJumpToBottomAction } from '../hooks/use_jump_to_bottom_action'
+import { useJumpToUnreadAnchor } from '../hooks/use_jump_to_unread_anchor'
+import { useJumpToUnreadGates } from '../hooks/use_jump_to_unread_gates'
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
   normalizeAnalyticsMetadata,
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
-import { MessageResource } from '../types'
+import { useScrollTracking } from '../hooks/use_scroll_tracking'
+import { useTrackHighestSeenMessage } from '../hooks/use_track_highest_seen_message'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { getRelativeDateStatus } from '../utils/date'
-import dayjs from '../utils/dayjs'
+import {
+  groupMessages,
+  UNREAD_DIVIDER_KEY,
+  type DateSeparator,
+  type EnrichedMessage,
+} from '../utils/group_messages'
+import {
+  detectDividerExitTowardNewer,
+  reportViewableMessages,
+  type ViewabilityObserver,
+} from '../utils/message_viewability'
 import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
 import { isSystemMessage } from '../utils/system_messages'
 
@@ -61,6 +81,9 @@ export type ConversationRouteProps = {
 
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
+const extractItemKey = (item: EnrichedMessage) => String(item.id)
+const maintainVisibleContentPosition = { minIndexForVisible: 0 }
+
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const { conversation_id, message_id, reply_root_id } = route.params
 
@@ -73,7 +96,8 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   })
 
   const lastReadMessageSortKey = conversation.conversationMembership?.lastReadMessageSortKey ?? null
-  const jumpToUnreadAnchor = featureEnabled('jump_to_unread') ? lastReadMessageSortKey : null
+  const jumpToUnreadAnchor =
+    featureEnabled('jump_to_unread') && !reply_root_id ? lastReadMessageSortKey : null
   const initialMessageId = message_id ?? jumpToUnreadAnchor
   const initialMessageIdIsAnchor = !!initialMessageId && !message_id
 
@@ -92,29 +116,49 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
 function ConversationScreenContent({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
-  const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
-    route.params
+  const {
+    conversation_id: conversationId,
+    editing_message_id: editingMessageId,
+    reply_root_id: replyRootId,
+    reply_root_author_name: replyRootAuthorName,
+  } = route.params
   const { data: conversation } = useConversation(route.params)
-  const { messages, refetch, isRefetching, fetchOlderMessages } = useConversationMessages({
-    conversation_id,
-    reply_root_id,
-  })
-  useConversationJoltEvents({ conversationId: conversation_id })
-  useConversationMessagesJoltEvents({ conversationId: conversation_id })
+  const {
+    messages,
+    fetchOlderMessages,
+    fetchNewerMessages,
+    hasMoreNewerMessages,
+    isFetchingNewerMessages,
+    cancelFetchNewerMessages,
+  } = useConversationMessages({ conversation_id: conversationId, reply_root_id: replyRootId })
+
+  const { jumpToUnreadActive } = useJumpToUnreadGates()
+  const { initialMessageId } = useConversationContext()
+
+  useConversationJoltEvents({ conversationId })
+  useConversationMessagesJoltEvents({ conversationId })
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const messagesWithSeparators = groupMessages({
-    ms: messages,
-    inReplyScreen: !!reply_root_id,
-  })
-  const noMessages = messagesWithSeparators.length === 0
+  const { onMessageSeen } = useTrackHighestSeenMessage()
+
+  const items = useMemo(
+    () =>
+      groupMessages({
+        ms: messages,
+        inReplyScreen: !!replyRootId,
+        jumpToUnreadActive,
+        initialMessageId,
+      }),
+    [messages, replyRootId, jumpToUnreadActive, initialMessageId]
+  )
+  const noMessages = items.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 currentlyEditingMessage = messages.find(m => String(m.id) === String(editingMessageId))
+  const replyRootAuthorFirstName = replyRootAuthorName?.split(' ')[0]
   const replyHeaderTitle = replyRootAuthorFirstName
     ? `Reply to ${replyRootAuthorFirstName}`
     : 'Reply'
@@ -122,21 +166,96 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const muted = conversation.conversationMembership?.muted ?? conversation.muted
 
   const listRef = useRef<FlatList>(null)
-  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
+  const [dividerScrolledPast, setDividerScrolledPast] = useState(false)
+
+  const observers = useMemo<ViewabilityObserver<EnrichedMessage>[]>(
+    () => [
+      reportViewableMessages(onMessageSeen),
+      detectDividerExitTowardNewer({
+        dividerKey: UNREAD_DIVIDER_KEY,
+        initialMessageId,
+        onExited: () => setDividerScrolledPast(true),
+      }),
+    ],
+    [onMessageSeen, initialMessageId]
+  )
 
-  const trackScroll = (event: any) => {
-    const offsetY = event.nativeEvent.contentOffset.y
-    setShowJumpToBottomButton(offsetY > 200)
-  }
+  const { viewabilityConfigCallbackPairs, onScrollBeginDrag: viewabilityOnScrollBeginDrag } =
+    useFlatListViewability({ observers })
+  const {
+    onContentSizeChange,
+    onScrollToIndexFailed,
+    onScrollBeginDrag: anchorOnScrollBeginDrag,
+  } = useJumpToUnreadAnchor({ listRef, items })
+  const onScrollBeginDrag = useCallback(() => {
+    viewabilityOnScrollBeginDrag()
+    anchorOnScrollBeginDrag()
+  }, [viewabilityOnScrollBeginDrag, anchorOnScrollBeginDrag])
+  const { onScroll, showJumpToBottomButton } = useScrollTracking({
+    hasMoreNewerMessages,
+    isFetchingNewerMessages,
+    fetchNewerMessages,
+    cancelFetchNewerMessages,
+  })
+  const { handleJumpToBottom, isJumpingToBottom } = useJumpToBottomAction({ listRef })
+
+  const listHeader = useMemo(
+    () => (
+      <View>
+        {isFetchingNewerMessages && (
+          <Animated.View
+            entering={FadeIn.duration(750)}
+            exiting={FadeOut.duration(750)}
+            style={styles.loadingFooter}
+            accessibilityRole="progressbar"
+            accessibilityLabel="Loading more messages"
+          >
+            <ActivityIndicator />
+          </Animated.View>
+        )}
+        <View style={styles.listHeader} />
+      </View>
+    ),
+    [isFetchingNewerMessages, styles.loadingFooter, styles.listHeader]
+  )
 
-  const handleReturnToBottom = useCallback(() => {
-    listRef.current?.scrollToOffset({
-      offset: 0,
-    })
-  }, [])
+  const renderItem = useCallback(
+    ({ item }: { item: EnrichedMessage }) => {
+      if (item.type === 'DateSeparator') return <InlineDateSeparator {...item} />
+      if (item.type === 'UnreadDivider') return <UnreadDivider scrolledPast={dividerScrolledPast} />
+      if (item.type === 'ReplyShadowMessage') {
+        return (
+          <ReplyShadowMessage
+            {...item}
+            conversation_id={conversationId}
+            inReplyScreen={!!replyRootId}
+          />
+        )
+      }
+      if (isSystemMessage(item)) {
+        return <SystemMessage message={item} conversationId={conversationId} />
+      }
+      return (
+        <Message
+          {...item}
+          canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
+          conversation_id={conversationId}
+          latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
+          inReplyScreen={!!replyRootId}
+        />
+      )
+    },
+    [
+      dividerScrolledPast,
+      conversationId,
+      replyRootId,
+      canDeleteNonAuthoredMessages,
+      conversation?.latestReadMessageSortKey,
+    ]
+  )
 
   useEffect(() => {
-    if (reply_root_id) {
+    if (replyRootId) {
       navigation.setParams({
         title: replyHeaderTitle,
       })
@@ -148,7 +267,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         muted,
       })
     }
-  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle, muted])
+  }, [navigation, title, badges, conversation?.deleted, replyRootId, replyHeaderTitle, muted])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -179,53 +298,32 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             inverted
             ref={listRef}
             contentContainerStyle={styles.listContainer}
-            refreshing={isRefetching}
-            onRefresh={refetch}
-            data={messagesWithSeparators}
-            keyExtractor={item => item.id}
-            onScroll={trackScroll}
-            scrollEventThrottle={10}
-            renderItem={({ item }) => {
-              if (item.type === 'DateSeparator') {
-                return <InlineDateSeparator {...item} />
-              }
-
-              if (item.type === 'ReplyShadowMessage') {
-                return (
-                  <ReplyShadowMessage
-                    {...item}
-                    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}
-                />
-              )
-            }}
+            maintainVisibleContentPosition={maintainVisibleContentPosition}
+            data={items}
+            keyExtractor={extractItemKey}
+            onScroll={onScroll}
+            onScrollBeginDrag={onScrollBeginDrag}
+            scrollEventThrottle={64}
+            viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs}
+            onContentSizeChange={onContentSizeChange}
+            onScrollToIndexFailed={onScrollToIndexFailed}
+            renderItem={renderItem}
             onEndReached={() => fetchOlderMessages()}
-            ListHeaderComponent={<View style={styles.listHeader} />}
+            ListHeaderComponent={listHeader}
           />
         )}
-        <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
+        <JumpToBottomButton
+          onPress={handleJumpToBottom}
+          visible={showJumpToBottomButton}
+          loading={isJumpingToBottom}
+        />
         {!noMessages && <TypingIndicator />}
         {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         {canReply ? (
           <MessageForm.Root
             replyRootAuthorFirstName={replyRootAuthorFirstName}
             conversation={conversation}
-            replyRootId={reply_root_id}
+            replyRootId={replyRootId}
             currentlyEditingMessage={currentlyEditingMessage}
             // We use a separate key so that it remounts component when switching between new
             // and edit message. This simplifies internal state handling.
@@ -248,8 +346,6 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   )
 }
 
-export type DateSeparator = { type: 'DateSeparator'; id: string; date: string }
-
 function InlineDateSeparator({ date }: DateSeparator) {
   const styles = useDateSeparatorStyles()
   const { isThisYear } = getRelativeDateStatus(date)
@@ -288,130 +384,6 @@ const useDateSeparatorStyles = () => {
   })
 }
 
-type ReplyShadowMessage = {
-  type: 'ReplyShadowMessage'
-  id: string
-  messageId: string
-  isReplyShadowMessage: boolean
-  nextRendersAuthor: boolean
-}
-
-interface GroupMessagesProps {
-  ms: MessageResource[]
-  inReplyScreen?: boolean
-}
-
-export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
-  let enrichedMessages: (MessageResource | DateSeparator | ReplyShadowMessage)[] = []
-  let encounteredOneOfMyMessages = false
-
-  ms.forEach((message, i) => {
-    const prevMessage = ms[i + 1]
-    const nextMessage = ms[i - 1]
-    const date = dayjs(message.createdAt).format('YYYY-MM-DD')
-
-    const prevMessageIsDateSeparator =
-      prevMessage && date !== dayjs(prevMessage.createdAt).format('YYYY-MM-DD')
-
-    if (isSystemMessage(message)) {
-      message.myLatestInConversation = false
-      message.lastInGroup = true
-      message.renderAuthor = false
-      message.nextRendersAuthor = nextMessage?.renderAuthor
-      message.isReplyShadowMessage = false
-      message.nextIsReplyShadowMessage = false
-      message.threadPosition = null
-      enrichedMessages.push(message)
-      if (prevMessageIsDateSeparator) {
-        enrichedMessages.push({ type: 'DateSeparator', id: `day-divider-${message.id}`, date })
-      }
-      return
-    }
-
-    const inThread = message.replyRootId !== null
-    const nextMessageInThread = nextMessage?.replyRootId !== null
-    const threadRoot = message.replyRootId === message.id
-    const nextMessageThreadRoot = nextMessage?.replyRootId === nextMessage?.id
-    const prevMessageDifferentThread = message.replyRootId !== prevMessage?.replyRootId
-    const nextMessageDifferentThread = message.replyRootId !== nextMessage?.replyRootId
-    const prevMessageDifferentAuthor = message.author?.id !== prevMessage?.author?.id
-    const nextMessageDifferentAuthor = message.author?.id !== nextMessage?.author?.id
-    const prevMessageMoreThan5Minutes =
-      prevMessage &&
-      new Date(message.createdAt).getTime() - new Date(prevMessage.createdAt).getTime() > 60000 * 5
-    const nextMessageMoreThan5Minutes =
-      nextMessage &&
-      new Date(nextMessage.createdAt).getTime() - new Date(message.createdAt).getTime() > 60000 * 5
-    const nextMessageIsDateSeparator =
-      nextMessage && date !== dayjs(nextMessage.createdAt).format('YYYY-MM-DD')
-    const insertReplyShadowMessage =
-      message.replyRootId &&
-      !threadRoot &&
-      (prevMessageDifferentThread || prevMessageIsDateSeparator)
-    const lastInGroup =
-      !nextMessage ||
-      nextMessageDifferentAuthor ||
-      nextMessageMoreThan5Minutes ||
-      nextMessageDifferentThread ||
-      nextMessageIsDateSeparator
-    const renderAuthor =
-      !message.mine &&
-      (!prevMessage ||
-        prevMessageDifferentAuthor ||
-        prevMessageMoreThan5Minutes ||
-        prevMessageDifferentThread ||
-        prevMessageIsDateSeparator)
-    const nextIsReplyShadowMessage =
-      nextMessageInThread &&
-      !nextMessageThreadRoot &&
-      (nextMessageDifferentThread || nextMessageIsDateSeparator)
-
-    if (message.mine && !encounteredOneOfMyMessages) {
-      encounteredOneOfMyMessages = true
-      message.myLatestInConversation = true
-    } else {
-      message.myLatestInConversation = false
-    }
-    message.lastInGroup = lastInGroup
-    message.renderAuthor = renderAuthor
-    message.threadPosition = null
-    message.nextRendersAuthor = nextMessage?.renderAuthor
-    message.isReplyShadowMessage = false
-    message.nextIsReplyShadowMessage = nextIsReplyShadowMessage
-
-    if (!inReplyScreen && inThread) {
-      message.prevIsMyReply = prevMessage?.mine
-      message.nextIsMyReply = nextMessage?.mine
-
-      const firstInThread = threadRoot
-      const lastInThread = nextMessageDifferentThread || nextMessageIsDateSeparator
-
-      if (firstInThread && lastInThread)
-        message.threadPosition = null // ensures we don't render a connector for root replies that aren't immediately followed up a reply
-      else if (firstInThread) message.threadPosition = 'first'
-      else if (lastInThread) message.threadPosition = 'last'
-      else message.threadPosition = 'center'
-    }
-
-    enrichedMessages.push(message)
-
-    if (insertReplyShadowMessage) {
-      enrichedMessages.push({
-        type: 'ReplyShadowMessage',
-        id: `${message.id}-${message.replyRootId}`,
-        messageId: message.replyRootId!,
-        isReplyShadowMessage: true,
-        nextRendersAuthor: message?.renderAuthor,
-      })
-    }
-
-    if (!prevMessage || date !== dayjs(prevMessage.createdAt).format('YYYY-MM-DD')) {
-      enrichedMessages.push({ type: 'DateSeparator', id: `day-divider-${message.id}`, date })
-    }
-  })
-
-  return enrichedMessages
-}
 interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource
@@ -506,6 +478,10 @@ const useStyles = () => {
       // Just whitespace to provide space where the typing indicator can be
       height: 16,
     },
+    loadingFooter: {
+      paddingVertical: 12,
+      alignItems: 'center',
+    },
   })
 }