@planningcenter/chat-react-native 3.35.0-rc.3 → 3.35.0-rc.5

package/src/__tests__/hooks/use_mark_latest_message_read.test.tsx

@@ -0,0 +1,154 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { renderHook } from '@testing-library/react-native'
+import React, { useEffect } from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import {
+  ConversationContextProvider,
+  useConversationContext,
+} from '../../contexts/conversation_context'
+import * as appStateModule from '../../hooks/use_app_state'
+import * as conversationsActionsModule from '../../hooks/use_conversations_actions'
+import * as featuresModule from '../../hooks/use_features'
+import { useMarkLatestMessageRead } from '../../hooks/use_mark_latest_message_read'
+import { ConversationResource } from '../../types'
+
+const conversation = {
+  id: 1,
+  type: 'Conversation',
+  unreadCount: 3,
+  unreadReactionCount: 0,
+  conversationMembership: { lastReadMessageSortKey: '01A' },
+} as unknown as ConversationResource
+
+interface WrapperProps {
+  replyRootId?: string | null
+  initialMessageIdIsAnchor?: boolean
+  atEndOfMessageHistory?: boolean
+}
+
+const createWrapper = ({
+  replyRootId = null,
+  initialMessageIdIsAnchor = false,
+  atEndOfMessageHistory = !initialMessageIdIsAnchor,
+}: WrapperProps = {}) => {
+  const queryClient = buildTestQueryClient()
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <ConversationContextProvider
+        conversationId={1}
+        currentPageReplyRootId={replyRootId}
+        initialMessageId={initialMessageIdIsAnchor ? '01A' : null}
+        initialMessageIdIsAnchor={initialMessageIdIsAnchor}
+      >
+        <AtEndPrimer atEndOfMessageHistory={atEndOfMessageHistory}>{children}</AtEndPrimer>
+      </ConversationContextProvider>
+    </QueryClientProvider>
+  )
+  return Wrapper
+}
+
+const AtEndPrimer = ({
+  atEndOfMessageHistory,
+  children,
+}: {
+  atEndOfMessageHistory: boolean
+  children: React.ReactNode
+}) => {
+  const { setAtEndOfMessageHistory } = useConversationContext()
+  useEffect(() => {
+    setAtEndOfMessageHistory(atEndOfMessageHistory)
+  }, [atEndOfMessageHistory, setAtEndOfMessageHistory])
+  return <>{children}</>
+}
+
+const mockFeatures = (enabled: boolean) => {
+  jest.spyOn(featuresModule, 'useFeatures').mockReturnValue({
+    features: [],
+    featureEnabled: () => enabled,
+  })
+}
+
+const mockMarkRead = () => {
+  const markRead = jest.fn()
+  jest.spyOn(conversationsActionsModule, 'useConversationsMarkRead').mockReturnValue({
+    markRead,
+    read: false,
+  } as unknown as ReturnType<typeof conversationsActionsModule.useConversationsMarkRead>)
+  return markRead
+}
+
+const mockAppState = (state: string = 'active') => {
+  jest.spyOn(appStateModule, 'useAppState').mockReturnValue(state)
+}
+
+describe('useMarkLatestMessageRead', () => {
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('fires markRead when JTU is off (backward compat preserved)', () => {
+    mockAppState()
+    mockFeatures(false)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper(),
+    })
+
+    expect(markRead).toHaveBeenCalledWith(true)
+  })
+
+  it('does NOT fire markRead when in a reply view (parity fix, ships flag-off)', () => {
+    mockAppState()
+    mockFeatures(false)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper({ replyRootId: 'root-1' }),
+    })
+
+    expect(markRead).not.toHaveBeenCalled()
+  })
+
+  it('does NOT fire markRead when JTU is active and user is not at end of history', () => {
+    mockAppState()
+    mockFeatures(true)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper({
+        initialMessageIdIsAnchor: true,
+        atEndOfMessageHistory: false,
+      }),
+    })
+
+    expect(markRead).not.toHaveBeenCalled()
+  })
+
+  it('fires markRead when JTU is active and user reaches end of history', () => {
+    mockAppState()
+    mockFeatures(true)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper({
+        initialMessageIdIsAnchor: true,
+        atEndOfMessageHistory: true,
+      }),
+    })
+
+    expect(markRead).toHaveBeenCalledWith(true)
+  })
+
+  it('does NOT fire when app state is not active', () => {
+    mockAppState('background')
+    mockFeatures(false)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper(),
+    })
+
+    expect(markRead).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,54 @@
+import { buildTestQueryClient } from '../../../__utils__/query_client'
+import { hasUnloadedNewerPages } from '../../../utils/cache/messages_cache'
+
+const queryKey = ['messages-test']
+
+const buildClient = (data: unknown) => {
+  const client = buildTestQueryClient()
+  client.setQueryData(queryKey, data)
+  return client
+}
+
+describe('hasUnloadedNewerPages', () => {
+  it('returns false when the query has no cached data', () => {
+    const client = buildTestQueryClient()
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(false)
+  })
+
+  it('returns false when pages[0] has no next.idGt cursor', () => {
+    const client = buildClient({
+      pageParams: [{}],
+      pages: [{ data: [], links: {}, meta: { count: 0, totalCount: 0 } }],
+    })
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(false)
+  })
+
+  it('returns false when next exists but idGt is absent', () => {
+    const client = buildClient({
+      pageParams: [{}],
+      pages: [{ data: [], links: {}, meta: { count: 0, totalCount: 0, next: { idLt: '01A' } } }],
+    })
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(false)
+  })
+
+  it('returns true when pages[0].meta.next.idGt is set', () => {
+    const client = buildClient({
+      pageParams: [{}],
+      pages: [
+        { data: [], links: {}, meta: { count: 0, totalCount: 0, next: { idGt: '01KQSTAY' } } },
+      ],
+    })
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(true)
+  })
+
+  it('inspects only the first page (the newest side after sort)', () => {
+    const client = buildClient({
+      pageParams: [{}, {}],
+      pages: [
+        { data: [], links: {}, meta: { count: 0, totalCount: 0 } },
+        { data: [], links: {}, meta: { count: 0, totalCount: 0, next: { idGt: '01KQSTAY' } } },
+      ],
+    })
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(false)
+  })
+})

package/src/components/conversation/jump_to_bottom_button.tsx

@@ -1,12 +1,13 @@
 import { useEffect } from 'react'
-import { View, Pressable, StyleSheet } from 'react-native'
+import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native'
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  interpolate,
   Extrapolation,
+  interpolate,
   ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
+  withTiming,
 } from 'react-native-reanimated'
 import { useTheme } from '../../hooks'
 import { platformFontWeightMedium } from '../../utils'
@@ -15,11 +16,17 @@ import { Icon, Text } from '../display'
 interface JumpToBottomButtonProps {
   onPress: () => void
   visible: boolean
+  loading?: boolean
 }
 
-export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps) => {
+export const JumpToBottomButton = ({
+  onPress,
+  visible,
+  loading = false,
+}: JumpToBottomButtonProps) => {
   const styles = useStyles()
   const progress = useSharedValue(0)
+  const loadingProgress = useSharedValue(0)
 
   useEffect(() => {
     progress.value = withSpring(visible ? 1 : 0, {
@@ -31,6 +38,13 @@ export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps
     })
   }, [visible, progress])
 
+  useEffect(() => {
+    loadingProgress.value = withTiming(loading ? 1 : 0, {
+      duration: 750,
+      reduceMotion: ReduceMotion.System,
+    })
+  }, [loading, loadingProgress])
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
       opacity: progress.value,
@@ -45,16 +59,34 @@ export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps
     }
   })
 
+  const iconStyle = useAnimatedStyle(() => ({ opacity: 1 - loadingProgress.value }))
+  const spinnerStyle = useAnimatedStyle(() => ({ opacity: loadingProgress.value }))
+
   return (
     <View>
-      <Animated.View style={[styles.container, animatedStyle]}>
+      <Animated.View
+        style={[styles.container, animatedStyle]}
+        pointerEvents={visible ? 'auto' : 'none'}
+      >
         <Pressable
           onPress={onPress}
+          disabled={loading}
+          accessibilityRole="button"
+          accessibilityLabel="Jump to most recent message"
+          accessibilityState={{ busy: loading }}
+          hitSlop={hitSlop}
           style={({ pressed }) => [styles.button, pressed && styles.pressed]}
         >
-          <Icon name="general.downArrow" style={styles.icon} />
+          <View style={styles.glyph}>
+            <Animated.View style={[styles.glyphLayer, iconStyle]}>
+              <Icon name="general.downArrow" style={styles.icon} />
+            </Animated.View>
+            <Animated.View style={[styles.glyphLayer, spinnerStyle]}>
+              <ActivityIndicator size="small" color={styles.icon.color} style={styles.spinner} />
+            </Animated.View>
+          </View>
           <Text variant="tertiary" style={styles.text}>
-            Jump to bottom
+            {loading ? 'Jumping to latest…' : 'Jump to bottom'}
           </Text>
         </Pressable>
       </Animated.View>
@@ -62,6 +94,8 @@ export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps
   )
 }
 
+const hitSlop = { top: 12, bottom: 12, left: 12, right: 12 }
+
 const useStyles = () => {
   const { colors } = useTheme()
 
@@ -93,10 +127,25 @@ const useStyles = () => {
       color: colors.fillColorNeutral100Inverted,
       fontWeight: platformFontWeightMedium,
     },
+    glyph: {
+      width: 14,
+      height: 14,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    glyphLayer: {
+      position: 'absolute',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
     icon: {
       color: colors.fillColorNeutral100Inverted,
       fontSize: 14,
     },
+    spinner: {
+      width: 14,
+      height: 14,
+    },
     pressed: {
       transform: [{ scale: 0.95 }],
     },

package/src/components/conversation/reply_shadow_message.tsx

@@ -28,7 +28,7 @@ import {
 import { Avatar, Icon, IconProps, Image, Text } from '../display'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 
-interface ReplyShadowMessageProps extends MessageResource {
+interface ReplyShadowMessageProps {
   messageId: string
   conversation_id: number
   inReplyScreen?: boolean
@@ -86,7 +86,9 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
   }
 
   const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''
-  const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${messageText || ''} ${timestamp} ${replyCountText}`
+  const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${
+    messageText || ''
+  } ${timestamp} ${replyCountText}`
 
   return (
     <Pressable

package/src/components/conversation/unread_divider.tsx

@@ -0,0 +1,90 @@
+import { StyleSheet, View } from 'react-native'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import Svg, { Defs, Path, Pattern, Rect } from 'react-native-svg'
+import { useConversationContext } from '../../contexts/conversation_context'
+import { useTheme } from '../../hooks'
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../../utils/styles'
+import { Text } from '../display'
+
+interface UnreadDividerProps {
+  scrolledPast?: boolean
+}
+
+const WAVE_WIDTH = 16
+const WAVE_HEIGHT = 8
+const FADE_DURATION = 750
+
+export function UnreadDivider({ scrolledPast = false }: UnreadDividerProps) {
+  const styles = useStyles()
+  const { atEndOfMessageHistory } = useConversationContext()
+
+  if (scrolledPast || atEndOfMessageHistory) return null
+
+  return (
+    <Animated.View
+      entering={FadeIn.duration(FADE_DURATION)}
+      exiting={FadeOut.duration(FADE_DURATION)}
+      style={styles.container}
+      accessibilityRole="header"
+      accessibilityLabel="Unread messages start here"
+    >
+      <SquigglyLine />
+      <Text variant="footnote" style={styles.label}>
+        New
+      </Text>
+      <SquigglyLine />
+    </Animated.View>
+  )
+}
+
+function SquigglyLine() {
+  const { colors } = useTheme()
+  return (
+    <View style={squigglyStyle.container}>
+      <Svg width="100%" height={WAVE_HEIGHT}>
+        <Defs>
+          <Pattern
+            id="wave"
+            x="0"
+            y="0"
+            width={WAVE_WIDTH}
+            height={WAVE_HEIGHT}
+            patternUnits="userSpaceOnUse"
+          >
+            <Path
+              d="M 0 4 Q 4 0 8 4 T 16 4"
+              stroke={colors.interaction}
+              strokeWidth={1.5}
+              fill="none"
+            />
+          </Pattern>
+        </Defs>
+        <Rect x="0" y="0" width="100%" height={WAVE_HEIGHT} fill="url(#wave)" />
+      </Svg>
+    </View>
+  )
+}
+
+const squigglyStyle = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: WAVE_HEIGHT,
+  },
+})
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+      paddingVertical: 8,
+      gap: 8,
+    },
+    label: {
+      color: colors.interaction,
+      fontWeight: '600',
+    },
+  })
+}

package/src/contexts/conversation_context.tsx

@@ -1,11 +1,4 @@
-import React, {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
 
 interface ConversationContextValue {
   conversationId: number
@@ -13,6 +6,8 @@ interface ConversationContextValue {
   initialMessageId: string | null
   setInitialMessageId: (id: string | null) => void
   initialMessageIdIsAnchor: boolean
+  atEndOfMessageHistory: boolean
+  setAtEndOfMessageHistory: (atEnd: boolean) => void
 }
 
 interface ConversationContextProviderProps extends PropsWithChildren {
@@ -28,6 +23,8 @@ const ConversationContext = createContext<ConversationContextValue>({
   initialMessageId: null,
   setInitialMessageId: () => {},
   initialMessageIdIsAnchor: false,
+  atEndOfMessageHistory: false,
+  setAtEndOfMessageHistory: () => {},
 })
 
 export const ConversationContextProvider = ({
@@ -38,10 +35,7 @@ export const ConversationContextProvider = ({
   initialMessageIdIsAnchor = false,
 }: ConversationContextProviderProps) => {
   const [initialMessageId, setInitialMessageId] = useState(initialMessageIdProp)
-
-  useEffect(() => {
-    setInitialMessageId(initialMessageIdProp)
-  }, [initialMessageIdProp])
+  const [atEndOfMessageHistory, setAtEndOfMessageHistory] = useState(false)
 
   const value = useMemo(
     () => ({
@@ -50,8 +44,16 @@ export const ConversationContextProvider = ({
       initialMessageId,
       setInitialMessageId,
       initialMessageIdIsAnchor,
+      atEndOfMessageHistory,
+      setAtEndOfMessageHistory,
     }),
-    [conversationId, currentPageReplyRootId, initialMessageId, initialMessageIdIsAnchor]
+    [
+      conversationId,
+      currentPageReplyRootId,
+      initialMessageId,
+      initialMessageIdIsAnchor,
+      atEndOfMessageHistory,
+    ]
   )
 
   return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>

package/src/hooks/use_conversation_messages.ts

@@ -1,10 +1,11 @@
 import {
   AnyUseSuspenseInfiniteQueryOptions,
   InfiniteData,
+  useQueryClient,
   useSuspenseInfiniteQuery,
   useSuspenseQueries,
 } from '@tanstack/react-query'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useConversationContext } from '../contexts/conversation_context'
 import { ApiCollection, MessageResource } from '../types'
 import {
@@ -38,8 +39,14 @@ export const useConversationMessages = (
   const { initialMessageId } = useConversationContext()
   const anchored = !reply_root_id && !!initialMessageId
 
-  const requestArgs = getMessagesRequestArgs({ conversation_id, reply_root_id })
-  const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
+  const requestArgs = useMemo(
+    () => getMessagesRequestArgs({ conversation_id, reply_root_id }),
+    [conversation_id, reply_root_id]
+  )
+  const queryKey = useMemo(
+    () => getMessagesQueryKey({ conversation_id, reply_root_id }),
+    [conversation_id, reply_root_id]
+  )
 
   const fetchPage = (pageParam: MessagesPageParam) => {
     const data = {
@@ -80,6 +87,7 @@ export const useConversationMessages = (
     hasNextPage,
     fetchPreviousPage,
     hasPreviousPage,
+    isFetchingPreviousPage,
   } = useSuspenseInfiniteQuery<
     ApiCollection<MessageResource>,
     Response,
@@ -99,6 +107,12 @@ export const useConversationMessages = (
 
   const messages = useMemo(() => sortAndFilterMessages(data.pages), [data.pages])
 
+  const queryClient = useQueryClient()
+  const cancelFetchNewerMessages = useCallback(
+    () => queryClient.cancelQueries({ queryKey }),
+    [queryClient, queryKey]
+  )
+
   return {
     messages,
     refetch,
@@ -107,6 +121,8 @@ export const useConversationMessages = (
     hasMoreOlderMessages: hasNextPage,
     fetchNewerMessages: fetchPreviousPage,
     hasMoreNewerMessages: hasPreviousPage,
+    isFetchingNewerMessages: isFetchingPreviousPage,
+    cancelFetchNewerMessages,
     queryKey,
   }
 }

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -12,6 +12,7 @@ import {
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
   getThreadedMessagesQueryKey,
+  hasUnloadedNewerPages,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
@@ -52,10 +53,10 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       }
     }
 
-    // Update the main conversation cache
-    updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
+    if (e.event === 'message.updated' || !hasUnloadedNewerPages(queryClient, messagesQueryKey)) {
+      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,

package/src/hooks/use_conversations_actions.ts

@@ -98,6 +98,21 @@ export const useConversationsMute = ({ conversation }: { conversation: Conversat
   }
 }
 
+export const useConversationsMarkReadUpTo = ({ conversationId }: { conversationId: number }) => {
+  const apiClient = useApiClient()
+
+  return useMutation({
+    mutationKey: ['markReadUpTo', conversationId],
+    mutationFn: async ({ sortKey }: { sortKey: string }) =>
+      apiClient.chat.post({
+        url: `/me/conversations/${conversationId}/mark_read_up_to`,
+        data: {
+          data: { type: 'Conversation', attributes: { sort_key: sortKey } },
+        },
+      }),
+  })
+}
+
 export const useMarkAllRead = () => {
   const apiClient = useApiClient()
   const { args } = useConversationsContext()

package/src/hooks/use_flat_list_viewability.ts

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useRef } from 'react'
+import type { ViewToken } from 'react-native'
+import type { ViewabilityObserver } from '../utils/message_viewability'
+
+interface UseFlatListViewabilityArgs<Item> {
+  observers: ViewabilityObserver<Item>[]
+  itemVisiblePercentThreshold?: number
+}
+
+export function useFlatListViewability<Item>({
+  observers,
+  itemVisiblePercentThreshold = 50,
+}: UseFlatListViewabilityArgs<Item>) {
+  const userHasScrolledRef = useRef(false)
+  const observersRef = useRef(observers)
+
+  useEffect(() => {
+    observersRef.current = observers
+  })
+
+  const onScrollBeginDrag = useCallback(() => {
+    userHasScrolledRef.current = true
+  }, [])
+
+  const viewabilityConfigCallbackPairs = useRef([
+    {
+      viewabilityConfig: { itemVisiblePercentThreshold },
+      onViewableItemsChanged: ({
+        viewableItems,
+        changed,
+      }: {
+        viewableItems: ViewToken[]
+        changed: ViewToken[]
+      }) => {
+        const event = {
+          viewableItems: viewableItems.map(toEntry<Item>),
+          changed: changed.map(toEntry<Item>),
+          userHasScrolled: userHasScrolledRef.current,
+        }
+        for (const observer of observersRef.current) observer(event)
+      },
+    },
+  ]).current
+
+  return { viewabilityConfigCallbackPairs, onScrollBeginDrag }
+}
+
+function toEntry<Item>(token: ViewToken) {
+  return { key: token.key, isViewable: !!token.isViewable, item: token.item as Item }
+}