@planningcenter/chat-react-native 4.2.1-qa-staging.0 → 4.2.1-qa-staging.2

package/src/components/conversation/message_list.tsx

@@ -1,5 +1,6 @@
 import { date as formatDate } from '@planningcenter/datetime-fmt'
-import React, { RefObject } from 'react'
+import { noop } from 'lodash'
+import React, { RefObject, useRef } from 'react'
 import { FlatList, FlatListProps, StyleSheet, View } from 'react-native'
 import { useTheme } from '../../hooks'
 import { ConversationResource } from '../../types/resources/conversation'
@@ -21,6 +22,9 @@ type ScrollHandlers = Pick<
   | 'onContentSizeChange'
   | 'onScrollEndDrag'
   | 'onMomentumScrollEnd'
+  | 'onScrollBeginDrag'
+  | 'onStartReached'
+  | 'onStartReachedThreshold'
   | 'maintainVisibleContentPosition'
 >
 
@@ -30,6 +34,7 @@ interface MessageListProps extends ScrollHandlers {
   conversationId: number
   messages: MessageResource[]
   replyRootId?: string | null
+  anchorMessageId?: string | null
   hasNextPage: boolean
   onEndReached: () => void
 }
@@ -43,6 +48,7 @@ export function MessageList({
   conversationId,
   messages,
   replyRootId,
+  anchorMessageId,
   hasNextPage,
   onEndReached,
   onScroll,
@@ -50,6 +56,9 @@ export function MessageList({
   onContentSizeChange,
   onScrollEndDrag,
   onMomentumScrollEnd,
+  onScrollBeginDrag,
+  onStartReached,
+  onStartReachedThreshold,
   maintainVisibleContentPosition,
 }: MessageListProps) {
   const styles = useStyles()
@@ -58,6 +67,40 @@ export function MessageList({
     conversation.memberAbility?.canDeleteNonAuthoredMessages ?? false
   const latestRead = conversation.latestReadMessageSortKey
   const messagesWithSeparators = groupMessages({ ms: messages, inReplyScreen })
+  const anchorIndex = anchorMessageId
+    ? messagesWithSeparators.findIndex(item => item.id === anchorMessageId)
+    : -1
+  const layoutHeight = useRef(0)
+  const contentHeight = useRef(0)
+  const userHasScrolled = useRef(false)
+
+  const pinAnchorToBottomEdge = () => {
+    if (anchorIndex < 0 || userHasScrolled.current) return
+    const scrollable = layoutHeight.current > 0 && contentHeight.current > layoutHeight.current
+    if (!scrollable) return
+
+    listRef.current?.scrollToIndex({ index: anchorIndex, viewPosition: 0, animated: false })
+  }
+
+  const handleLayout: FlatListProps<EnrichedMessage>['onLayout'] = event => {
+    onLayout?.(event)
+    layoutHeight.current = event.nativeEvent.layout.height
+    pinAnchorToBottomEdge()
+  }
+
+  const handleContentSizeChange: FlatListProps<EnrichedMessage>['onContentSizeChange'] = (
+    width,
+    height
+  ) => {
+    onContentSizeChange?.(width, height)
+    contentHeight.current = height
+    pinAnchorToBottomEdge()
+  }
+
+  const handleScrollBeginDrag: FlatListProps<EnrichedMessage>['onScrollBeginDrag'] = event => {
+    userHasScrolled.current = true
+    onScrollBeginDrag?.(event)
+  }
 
   return (
     <FlatList
@@ -67,8 +110,9 @@ export function MessageList({
       data={messagesWithSeparators}
       keyExtractor={item => item.id}
       onScroll={onScroll}
-      onLayout={onLayout}
-      onContentSizeChange={onContentSizeChange}
+      onLayout={handleLayout}
+      onContentSizeChange={handleContentSizeChange}
+      onScrollToIndexFailed={noop}
       onScrollEndDrag={onScrollEndDrag}
       onMomentumScrollEnd={onMomentumScrollEnd}
       scrollEventThrottle={10}
@@ -108,6 +152,9 @@ export function MessageList({
         )
       }}
       onEndReached={onEndReached}
+      onScrollBeginDrag={handleScrollBeginDrag}
+      onStartReached={onStartReached}
+      onStartReachedThreshold={onStartReachedThreshold}
       maintainVisibleContentPosition={maintainVisibleContentPosition}
       ListHeaderComponent={<View style={styles.listHeader} />}
     />

package/src/hooks/use_conversation_messages.ts

@@ -2,21 +2,43 @@ 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 { getNewerPageParam } from './paginator_meta'
 import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
+type Options = {
+  conversation_id: number
+  reply_root_id?: string | null
+  anchor?: string | null
+}
+
 export const useConversationMessages = (
-  { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string | null },
+  { conversation_id, reply_root_id, anchor }: Options,
   opts?: SuspensePaginatorOptions
 ) => {
-  const { data, refetch, isRefetching, fetchNextPage, hasNextPage } =
-    useSuspensePaginator<MessageResource>(
-      getMessagesRequestArgs({ conversation_id, reply_root_id }),
-      {
-        structuralSharing: replaceEqualById,
-        ...opts,
-      }
-    )
-  const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
+  const {
+    data,
+    refetch,
+    isRefetching,
+    fetchNextPage,
+    hasNextPage,
+    fetchPreviousPage,
+    hasPreviousPage,
+    isFetchingPreviousPage,
+  } = useSuspensePaginator<MessageResource>(
+    getMessagesRequestArgs({ conversation_id, reply_root_id, anchor }),
+    {
+      structuralSharing: replaceEqualById,
+      ...(anchor
+        ? {
+            getPreviousPageParam: (page, _pages, pageParam) => getNewerPageParam(page, pageParam),
+            gcTime: 0,
+            staleTime: Infinity,
+          }
+        : {}),
+      ...opts,
+    }
+  )
+  const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id, anchor })
   const messages = useMemo(
     () =>
       data
@@ -29,5 +51,15 @@ export const useConversationMessages = (
     [data]
   )
 
-  return { messages, refetch, isRefetching, fetchNextPage, hasNextPage, queryKey }
+  return {
+    messages,
+    refetch,
+    isRefetching,
+    fetchNextPage,
+    hasNextPage,
+    fetchPreviousPage,
+    hasPreviousPage,
+    isFetchingPreviousPage,
+    queryKey,
+  }
 }

package/src/hooks/use_fetch_newer_on_foreground.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react'
+import { useAppState } from './use_app_state'
+
+type Options = {
+  fetchNewer: (newestMessageId: string) => void
+  newestMessageId?: string
+  enabled: boolean
+}
+
+export const useFetchNewerOnForeground = ({ fetchNewer, newestMessageId, enabled }: Options) => {
+  const appState = useAppState()
+  const wasInBackground = useRef(false)
+
+  useEffect(() => {
+    if (appState !== 'active') {
+      wasInBackground.current = true
+      return
+    }
+    const returnedToForeground = wasInBackground.current
+    wasInBackground.current = false
+    if (!returnedToForeground || !enabled || !newestMessageId) return
+
+    fetchNewer(newestMessageId)
+  }, [appState, enabled, fetchNewer, newestMessageId])
+}

package/src/hooks/use_mark_latest_message_read.ts

@@ -7,9 +7,10 @@ import { useConversationsMarkRead } from './use_conversations_actions'
 interface Props {
   conversation: ConversationResource
   messages: MessageResource[]
+  enabled?: boolean
 }
 
-export function useMarkLatestMessageRead({ conversation }: Props) {
+export function useMarkLatestMessageRead({ conversation, enabled = true }: Props) {
   const firedOnce = useRef<boolean>(false)
   const { markRead } = useConversationsMarkRead({ conversation })
   const debouncedMarkRead = useMemo(
@@ -24,10 +25,10 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
   const isActive = appState === 'active'
 
   useEffect(() => {
-    if (!isActive || !shouldMarkRead) return
+    if (!enabled || !isActive || !shouldMarkRead) return
 
     firedOnce.current = true
 
     debouncedMarkRead(true)
-  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReaction])
+  }, [debouncedMarkRead, enabled, isActive, shouldMarkRead, unreadReaction])
 }

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'
@@ -31,6 +32,7 @@ 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,
@@ -43,6 +45,7 @@ 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
@@ -51,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
@@ -61,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,
@@ -75,28 +86,59 @@ 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, queryKey } = 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: !readingHistory,
+      acceptNewMessages: caughtUp && !readingHistory,
       onSkippedNewMessage: () => {
         skippedNewMessages.current = true
       },
@@ -107,8 +149,9 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   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
@@ -123,11 +166,8 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const muted = conversation.conversationMembership?.muted ?? conversation.muted
 
   const listRef = useRef<FlatList>(null)
-
-  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({
@@ -141,17 +181,34 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
     })
   }, [restOffset])
 
+  const exitAnchoredMode = useCallback(() => {
+    onExitAnchoredMode()
+    handleReturnToBottom()
+  }, [handleReturnToBottom, onExitAnchoredMode])
   const jumpToLatest = useCallback(() => {
     setShowJumpToBottomButton(false)
-    handleReturnToBottom()
-  }, [handleReturnToBottom])
+    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 || !newestMessageId || !skippedNewMessages.current) return
+    if (readingHistory || !caughtUp || !newestMessageId || !skippedNewMessages.current) return
 
     skippedNewMessages.current = false
     fetchNewer(newestMessageId)
-  }, [fetchNewer, newestMessageId, readingHistory])
+  }, [caughtUp, fetchNewer, newestMessageId, readingHistory])
 
   useEffect(() => {
     if (reply_root_id) {
@@ -201,6 +258,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             conversationId={conversation_id}
             messages={messages}
             replyRootId={reply_root_id}
+            anchorMessageId={anchor}
             hasNextPage={hasNextPage}
             onEndReached={() => fetchNextPage()}
             onScroll={trackScroll}
@@ -208,10 +266,18 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             onContentSizeChange={onContentSizeChange}
             onScrollEndDrag={onScrollEndDrag}
             onMomentumScrollEnd={onMomentumScrollEnd}
-            maintainVisibleContentPosition={readingHistory ? { minIndexForVisible: 0 } : undefined}
+            onScrollBeginDrag={anchored ? () => setHasDragged(true) : undefined}
+            onStartReached={anchored && hasDragged ? loadNewerMessages : undefined}
+            onStartReachedThreshold={anchored ? 0.5 : undefined}
+            maintainVisibleContentPosition={
+              holdListPosition ? { minIndexForVisible: 0 } : undefined
+            }
           />
         )}
-        <JumpToBottomButton onPress={jumpToLatest} visible={showJumpToBottomButton} />
+        <JumpToBottomButton
+          onPress={jumpToLatest}
+          visible={behindLatest || showJumpToBottomButton}
+        />
         {!noMessages && <TypingIndicator />}
         {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         <ConversationBottomBar
@@ -279,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/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/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)
+}