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

package/src/hooks/use_conversation_messages.ts

@@ -2,52 +2,21 @@ 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 { ResponseError } from '../utils/response_error'
-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 anchoredRetry = (failureCount: number, error: unknown) => {
-  const status = error instanceof ResponseError ? error.status : undefined
-  if (status === 404 || status === 429) return false
-
-  return failureCount < 3
-}
-
 export const useConversationMessages = (
-  { conversation_id, reply_root_id, anchor }: Options,
+  { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string | null },
   opts?: SuspensePaginatorOptions
 ) => {
-  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,
-            retry: anchoredRetry,
-          }
-        : {}),
-      ...opts,
-    }
-  )
-  const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id, anchor })
+  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 messages = useMemo(
     () =>
       data
@@ -60,15 +29,5 @@ export const useConversationMessages = (
     [data]
   )
 
-  return {
-    messages,
-    refetch,
-    isRefetching,
-    fetchNextPage,
-    hasNextPage,
-    fetchPreviousPage,
-    hasPreviousPage,
-    isFetchingPreviousPage,
-    queryKey,
-  }
+  return { messages, refetch, isRefetching, fetchNextPage, hasNextPage, queryKey }
 }

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -12,69 +12,28 @@ import {
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
   updateCacheReplyRoots,
+  getThreadedMessagesQueryKey,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
 import { getMessageQueryKey } from '../utils/request/get_message'
-import { getMessagesQueryKey } from '../utils/request/get_messages'
+import { getMessagesRequestArgs } from '../utils/request/get_messages'
 import { useApiClient } from './use_api_client'
 import { useCurrentPerson } from './use_current_person'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
+import { getRequestQueryKey } from './use_suspense_api'
 import { TYPING_TIMEOUT_INTERVAL, useTypingStatusCache } from './use_typing_status_cache'
 
-export type MessagesJoltEvent =
-  | 'message.created'
-  | 'message.updated'
-  | 'message.destroyed'
-  | 'reaction'
-
-export interface MessagesCache {
-  queryKey: unknown[]
-  canUpdate?: (event: MessagesJoltEvent) => boolean
-}
-
-export interface MessagesView {
-  replyRootId: string | null
-  cache: MessagesCache
-}
-
-type MessageEventData = { sort_key: string; reply_root_id?: string | null }
-
 interface Props {
   conversationId: number
-  replyRootId?: string | null
-  messageCache?: MessagesCache
 }
 
-const belongsToView = (replyRootId: string | null, data: MessageEventData) =>
-  replyRootId === null || data.reply_root_id === replyRootId || data.sort_key === replyRootId
-
-export const queryKeysForEvent = (
-  event: MessagesJoltEvent,
-  view: MessagesView,
-  data: MessageEventData
-) => {
-  const accepted = !view.cache.canUpdate || view.cache.canUpdate(event)
-  return belongsToView(view.replyRootId, data) && accepted ? [view.cache.queryKey] : []
-}
-
-export function useConversationMessagesJoltEvents({
-  conversationId,
-  replyRootId = null,
-  messageCache,
-}: Props) {
+export function useConversationMessagesJoltEvents({ conversationId }: Props) {
   const queryClient = useQueryClient()
   const currentPerson = useCurrentPerson()
   const joltChannel = useJoltChannel(`chat.conversations.${conversationId}`)
-  const view: MessagesView = {
-    replyRootId,
-    cache: messageCache ?? {
-      queryKey: getMessagesQueryKey({
-        conversation_id: conversationId,
-        reply_root_id: replyRootId,
-      }),
-    },
-  }
+  const messagesRequestArgs = getMessagesRequestArgs({ conversation_id: conversationId })
+  const messagesQueryKey = getRequestQueryKey(messagesRequestArgs)
   const apiClient = useApiClient()
 
   const { addTypingEvent, removeTypingEventById, removeAllTypingEventsByAuthorId } =
@@ -95,12 +54,21 @@ export function useConversationMessagesJoltEvents({
       }
     }
 
-    const targetQueryKeys = queryKeysForEvent(e.event, view, data)
-    targetQueryKeys.forEach(queryKey =>
-      updateCacheWithMessage(queryClient, queryKey, message, e.event)
-    )
-    if (isReplyRootUpdate) {
-      targetQueryKeys.forEach(queryKey => updateCacheReplyRoots(queryClient, queryKey, message))
+    // Update the main conversation cache
+    updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
+
+    // If message has a reply_root_id, also update the threaded cache
+    if (data.reply_root_id) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
+        conversationId,
+        data.reply_root_id
+      )
+      updateCacheWithMessage(queryClient, threadedMessagesQueryKey, message, e.event)
+
+      if (isReplyRootUpdate) {
+        updateCacheReplyRoots(queryClient, messagesQueryKey, message)
+        updateCacheReplyRoots(queryClient, threadedMessagesQueryKey, message)
+      }
     }
 
     // Update individual message query cache so reply shadow messages update immediately
@@ -120,21 +88,34 @@ export function useConversationMessagesJoltEvents({
       currentPersonId: currentPerson.id,
     })
 
-    queryKeysForEvent('message.destroyed', view, data).forEach(queryKey =>
-      queryClient.setQueryData<QueryData>(queryKey, prev =>
+    // Update the main conversation cache
+    queryClient.setQueryData<QueryData>(messagesQueryKey, prev =>
+      deleteRecordInPagesData({ data: prev, record: message })
+    )
+
+    // If message has a reply_root_id, also update the threaded cache
+    if (data.reply_root_id) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
+        conversationId,
+        data.reply_root_id
+      )
+      queryClient.setQueryData<QueryData>(threadedMessagesQueryKey, prev =>
         deleteRecordInPagesData({ data: prev, record: message })
       )
-    )
+    }
   }
 
   const handleReactionJoltEvent = async (e: JoltReactionEvent) => {
-    const data = {
-      sort_key: e.data.data.message_sort_key,
-      reply_root_id: e.data.data.reply_root_id,
+    // Update the main conversation cache and capture the reply_root_id if present
+    updateCacheWithReaction(queryClient, messagesQueryKey, e, currentPerson.id)
+
+    const replyRootId = e.data.data.reply_root_id
+
+    // If the message has a reply_root_id, also update the threaded cache
+    if (replyRootId) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(conversationId, replyRootId)
+      updateCacheWithReaction(queryClient, threadedMessagesQueryKey, e, currentPerson.id)
     }
-    queryKeysForEvent('reaction', view, data).forEach(queryKey =>
-      updateCacheWithReaction(queryClient, queryKey, e, currentPerson.id)
-    )
   }
 
   const handleTypingEvent = async (e: JoltTypingEvent) => {

package/src/hooks/use_mark_latest_message_read.ts

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

package/src/hooks/use_message_create_or_update.ts

@@ -1,6 +1,5 @@
 import { InfiniteData, useMutation } from '@tanstack/react-query'
 import { chatQueryClient } from '../contexts/api_provider'
-import { useConversationContext } from '../contexts/conversation_context'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { DenormalizedAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource_for_create'
 import {
@@ -36,12 +35,6 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
   const isEditing = !isNewMessage(message)
   const apiClient = useApiClient()
   const currentPerson = useCurrentPerson()
-  const { messagesQueryKey } = useConversationContext()
-  const liveQueryKey = getMessagesQueryKey({
-    conversation_id: conversationId,
-    reply_root_id: replyRootId,
-  })
-  const queryKey = isEditing ? (messagesQueryKey ?? liveQueryKey) : liveQueryKey
 
   const mutation = useMutation({
     mutationFn: ({ text, attachments, idempotentKey }: ResolvedMessageMutationVariables) => {
@@ -86,7 +79,6 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
           message,
           text,
           replyRootId,
-          queryKey,
         })
 
         return { message: optimisticMessage }
@@ -110,6 +102,10 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
 
       // Add error to the optimistic message from the cache on error
       if (optimisticMessage) {
+        const queryKey = getMessagesQueryKey({
+          conversation_id: conversationId,
+          reply_root_id: replyRootId,
+        })
         chatQueryClient.setQueryData(
           queryKey,
           (data: InfiniteData<ApiCollection<MessageResource>> | undefined) =>
@@ -129,6 +125,10 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
       const { message: optimisticMessage } = context || {}
       const updatedMessage = result.data
       type QueryData = InfiniteData<ApiCollection<MessageResource>>
+      const queryKey = getMessagesQueryKey({
+        conversation_id: conversationId,
+        reply_root_id: replyRootId,
+      })
 
       // First remove the optimistic message if it exists
       if (optimisticMessage) {

package/src/hooks/use_message_reaction_toggle.ts

@@ -1,7 +1,6 @@
 import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { Alert } from 'react-native'
-import { useConversationContext } from '../contexts/conversation_context'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { updateRecordInPagesData, REACTION_EMOJIS } from '../utils'
@@ -31,8 +30,7 @@ export function useMessageReactionToggle({
 }: UseMessageReactionToggleProps) {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
-  const { messagesQueryKey } = useConversationContext()
-  const queryKey = messagesQueryKey ?? getMessagesQueryKey({ conversation_id })
+  const queryKey = getMessagesQueryKey({ conversation_id })
   const message_id = message.id
 
   const toggleReaction = useCallback(

package/src/hooks/use_suspense_api.ts

@@ -10,7 +10,7 @@ import { FailedResponse } from '../types/api_primitives'
 import { Log } from '../utils'
 import { GetRequest, RequestData } from '../utils/client'
 import { throwResponseError } from '../utils/response_error'
-import { getNextPageParamFromMeta, mergePageWhere } from './paginator_meta'
+import { getNextPageParamFromMeta } from './paginator_meta'
 import { App, useApiClient } from './use_api_client'
 
 interface SuspenseGetOptions extends GetRequest {
@@ -65,11 +65,12 @@ export const useSuspensePaginator = <T extends ResourceObject>(
     queryFn: ({ pageParam }) => {
       Log.info('useSuspenseGet', { pageParam })
 
-      const where = mergePageWhere(args.data.where, pageParam?.where)
+      const pageParmWhere = pageParam?.where || {}
+      const argsWhere = args.data.where || {}
+      const where = { ...argsWhere, ...pageParmWhere }
       const app = args.app || 'chat'
       const offset = pageParam?.offset || args.data.offset
-      const order = pageParam?.order || args.data.order
-      const data = { ...args.data, where, offset, order }
+      const data = { ...args.data, where, offset }
 
       return apiClient[app]
         .get<ApiCollection<T>>({

package/src/screens/conversation_new/components/services_form.tsx

@@ -45,7 +45,6 @@ export const ServicesForm = ({
   const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
   const safetyLockEnabled = featureEnabled(availableFeatures.conversation_safety_lock)
   const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)
-  const [filterByPlan, setFilterByPlan] = useState<boolean>(!!initialPlanId)
   const initialState = useMemo(() => uniq(initialTeamIds) || [], [initialTeamIds]) // Uniq here because services can send duplicates in the teams_i_lead response.
   const [selectedTeamIds, setSelectedTeamIds] = useState<number[]>(initialState)
 
@@ -53,7 +52,6 @@ export const ServicesForm = ({
   useEffect(() => {
     setSelectedTeamIds(initialState)
     setSelectedPlanId(initialPlanId)
-    setFilterByPlan(!!initialPlanId)
   }, [initialState, initialPlanId])
 
   const removeSelection = useCallback(
@@ -63,7 +61,9 @@ export const ServicesForm = ({
     [selectedTeamIds]
   )
 
-  const activePlanId = filterByPlan ? selectedPlanId : undefined
+  const [filerByPlan, setFilterByPlan] = useState(false)
+
+  const activePlanId = filerByPlan ? selectedPlanId : undefined
 
   const { payload, isLoading: isLoadingPayload } = useServicesChatConversationPayload({
     teamIds: selectedTeamIds,
@@ -79,7 +79,7 @@ export const ServicesForm = ({
 
   const { members, isError: isMemberError } = useTeamMembersForNewConversation({
     teamIds: selectedTeamIds,
-    planId: activePlanId,
+    planId: selectedPlanId,
   })
   const adultMembers = useMemo(() => members.filter(member => !member.child), [members])
 
@@ -118,7 +118,7 @@ export const ServicesForm = ({
             removeSelection={removeSelection}
             selectedPlanId={selectedPlanId}
             setSelectedPlanId={setSelectedPlanId}
-            filterByPlan={filterByPlan}
+            filterByPlan={filerByPlan}
             setFilterByPlan={setFilterByPlan}
             members={members}
             isMemberError={isMemberError}

package/src/screens/conversation_screen.tsx

@@ -7,11 +7,10 @@ import {
   useTheme as useNavigationTheme,
   useRoute,
 } from '@react-navigation/native'
-import React, { startTransition, useCallback, useEffect, useRef, useState } from 'react'
+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 } 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,9 +30,6 @@ 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 { useHeldBackMessages } from '../hooks/use_held_back_messages'
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
   analyticsEvents,
@@ -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 { newestPersistedMessageId } from '../utils/cache/messages_cache'
-import { gatedMessageCache } from '../utils/gated_message_cache'
-import { getMessagesQueryKey } from '../utils/request/get_messages'
-import { decodeUlidTime } from '../utils/ulid'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -57,7 +49,6 @@ 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
@@ -68,16 +59,9 @@ export type ConversationRouteProps = {
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
-  const { conversation_id, reply_root_id, initial_message_id } = route.params
+  const { conversation_id, reply_root_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,
@@ -88,83 +72,27 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
     <ConversationContextProvider
       conversationId={conversation_id}
       currentPageReplyRootId={reply_root_id ?? null}
-      messagesQueryKey={getMessagesQueryKey({ conversation_id, reply_root_id, anchor })}
     >
-      {anchor ? (
-        <AnchorNotFoundBoundary onAnchorNotFound={dropAnchor}>
-          <ConversationScreenContent
-            route={route}
-            anchor={anchor}
-            onExitAnchoredMode={exitAnchoredMode}
-          />
-        </AnchorNotFoundBoundary>
-      ) : (
-        <ConversationScreenContent
-          route={route}
-          anchor={null}
-          onExitAnchoredMode={exitAnchoredMode}
-        />
-      )}
+      <ConversationScreenContent route={route} />
     </ConversationContextProvider>
   )
 }
 
-interface ConversationScreenContentProps extends ConversationScreenProps {
-  anchor: string | null | undefined
-  onExitAnchoredMode: () => void
-}
-
-function ConversationScreenContent({
-  route,
-  anchor,
-  onExitAnchoredMode,
-}: ConversationScreenContentProps) {
+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 { data: conversation } = useConversation(route.params)
-  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 newestMessageId = newestPersistedMessageId(messages)
-  const fetchNewer = useFetchNewerMessages({
+  const { messages, fetchNextPage, hasNextPage } = useConversationMessages({
     conversation_id,
     reply_root_id,
-    queryKey,
-    onTooFarBehind: anchored ? onExitAnchoredMode : undefined,
-  })
-  const { onSkippedNewMessage } = useHeldBackMessages({
-    fetchNewer,
-    newestMessageId,
-    readingHistory,
-    caughtUp,
   })
   useConversationJoltEvents({ conversationId: conversation_id })
-  useConversationMessagesJoltEvents({
-    conversationId: conversation_id,
-    replyRootId: reply_root_id ?? null,
-    messageCache: gatedMessageCache({
-      queryKey,
-      acceptNewMessages: caughtUp && !readingHistory,
-      onSkippedNewMessage,
-    }),
-  })
+  useConversationMessagesJoltEvents({ conversationId: conversation_id })
   const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
-  useMarkLatestMessageRead({ conversation, messages, enabled: !behindLatest })
-  useFetchNewerOnForeground({ fetchNewer, newestMessageId, enabled: anchored && caughtUp })
+  useMarkLatestMessageRead({ conversation, messages })
   const noMessages = messages.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
@@ -179,8 +107,12 @@ function ConversationScreenContent({
   const muted = conversation.conversationMembership?.muted ?? conversation.muted
 
   const listRef = useRef<FlatList>(null)
-  const [hasDragged, setHasDragged] = useState(false)
-  const holdListPosition = behindLatest || readingHistory
+  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
+
+  const trackScroll = (event: any) => {
+    const offsetY = event.nativeEvent.contentOffset.y
+    setShowJumpToBottomButton(offsetY > 200)
+  }
 
   const { restOffset, onLayout, onContentSizeChange, onMomentumScrollEnd, onScrollEndDrag } =
     useRestAwayFromDismissEdge({
@@ -194,28 +126,6 @@ function ConversationScreenContent({
     })
   }, [restOffset])
 
-  const exitAnchoredMode = useCallback(() => {
-    onExitAnchoredMode()
-    handleReturnToBottom()
-  }, [handleReturnToBottom, onExitAnchoredMode])
-  const jumpToLatest = useCallback(() => {
-    setShowJumpToBottomButton(false)
-    if (anchored) exitAnchoredMode()
-    else handleReturnToBottom()
-  }, [anchored, 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 (reply_root_id) {
       navigation.setParams({
@@ -264,7 +174,6 @@ function ConversationScreenContent({
             conversationId={conversation_id}
             messages={messages}
             replyRootId={reply_root_id}
-            anchorMessageId={anchor}
             hasNextPage={hasNextPage}
             onEndReached={() => fetchNextPage()}
             onScroll={trackScroll}
@@ -272,18 +181,9 @@ function ConversationScreenContent({
             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={jumpToLatest}
-          visible={behindLatest || showJumpToBottomButton}
-        />
+        <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
         {!noMessages && <TypingIndicator />}
         {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         <ConversationBottomBar
@@ -293,7 +193,6 @@ function ConversationScreenContent({
           replyRootId={reply_root_id}
           currentlyEditingMessage={currentlyEditingMessage}
           onFlaggedInMessageForm={markHandledByMessageForm}
-          onBeforeSubmit={jumpToLatest}
         />
       </KeyboardView>
     </View>
@@ -307,7 +206,6 @@ interface ConversationBottomBarProps {
   replyRootId: string | null | undefined
   currentlyEditingMessage: MessageResource | undefined
   onFlaggedInMessageForm?: (id: string) => void
-  onBeforeSubmit?: () => void
 }
 
 function ConversationBottomBar({
@@ -317,7 +215,6 @@ function ConversationBottomBar({
   replyRootId,
   currentlyEditingMessage,
   onFlaggedInMessageForm,
-  onBeforeSubmit,
 }: ConversationBottomBarProps) {
   const messageLink = useMessageAvailableMembersAction(conversation)
 
@@ -336,7 +233,6 @@ function ConversationBottomBar({
       replyRootId={replyRootId}
       currentlyEditingMessage={currentlyEditingMessage}
       onFlaggedInMessageForm={onFlaggedInMessageForm}
-      onBeforeSubmit={onBeforeSubmit}
       key={
         currentlyEditingMessage
           ? `edit-message-form-${currentlyEditingMessage.id}`
@@ -351,11 +247,6 @@ 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/screens/message_actions_screen.tsx

@@ -9,7 +9,6 @@ import { useReactionStyles } from '../components/conversation/message_reaction'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
-import { useConversationMessageLookup } from '../hooks/use_conversation_message_lookup'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
@@ -42,8 +41,11 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     isSystemMessage,
   } = route.params
 
-  const { refetch } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
-  const message = useConversationMessageLookup({ conversation_id, message_id })
+  const { messages, refetch } = useConversationMessages(
+    { conversation_id },
+    { refetchOnMount: false }
+  )
+  const message = messages.find(m => m.id === message_id)
 
   if (!message) return null