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

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 }
+}

package/src/hooks/use_jump_to_bottom_action.ts

@@ -0,0 +1,75 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
+import type { FlatList } from 'react-native'
+import { useConversationContext } from '../contexts/conversation_context'
+import { ApiCollection, MessageResource } from '../types'
+import { Haptic } from '../utils/native_adapters'
+import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
+import { useApiClient } from './use_api_client'
+import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
+
+const LATEST_PAGE_SIZE = 25
+
+export function useJumpToBottomAction({ listRef }: { listRef: RefObject<FlatList | null> }) {
+  const { jumpToUnreadEnabled } = useJumpToUnreadGates()
+  const { conversationId, currentPageReplyRootId, initialMessageId, setInitialMessageId } =
+    useConversationContext()
+  const queryClient = useQueryClient()
+  const apiClient = useApiClient()
+  const [isJumpingToBottom, setIsJumpingToBottom] = useState(false)
+
+  const mountedRef = useRef(true)
+  useEffect(
+    () => () => {
+      mountedRef.current = false
+    },
+    []
+  )
+
+  const handleJumpToBottom = useCallback(() => {
+    Haptic.impactLight()
+    listRef.current?.scrollToOffset({ offset: 0, animated: true })
+
+    if (!jumpToUnreadEnabled || !initialMessageId) return
+
+    const queryKey = getMessagesQueryKey({
+      conversation_id: conversationId,
+      reply_root_id: currentPageReplyRootId,
+    })
+    const args = getMessagesRequestArgs({
+      conversation_id: conversationId,
+      reply_root_id: currentPageReplyRootId,
+    })
+
+    setIsJumpingToBottom(true)
+
+    queryClient
+      .cancelQueries({ queryKey })
+      .then(() =>
+        apiClient.chat.get<ApiCollection<MessageResource>>({
+          url: args.url,
+          data: { ...args.data, perPage: LATEST_PAGE_SIZE },
+        })
+      )
+      .then(latest => {
+        if (!mountedRef.current) return
+        queryClient.setQueryData(queryKey, { pages: [latest], pageParams: [{}] })
+        setInitialMessageId(null)
+        listRef.current?.scrollToOffset({ offset: 0, animated: false })
+      })
+      .finally(() => {
+        if (mountedRef.current) setIsJumpingToBottom(false)
+      })
+  }, [
+    jumpToUnreadEnabled,
+    initialMessageId,
+    setInitialMessageId,
+    queryClient,
+    apiClient,
+    conversationId,
+    currentPageReplyRootId,
+    listRef,
+  ])
+
+  return { handleJumpToBottom, isJumpingToBottom }
+}

package/src/hooks/use_jump_to_unread_anchor.ts

@@ -0,0 +1,68 @@
+import { RefObject, useCallback, useEffect, useRef } from 'react'
+import type { FlatList } from 'react-native'
+import { useConversationContext } from '../contexts/conversation_context'
+import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
+
+interface UseJumpToUnreadAnchorArgs<T> {
+  listRef: RefObject<FlatList<T> | null>
+  items: T[]
+}
+
+interface ScrollToIndexFailInfo {
+  index: number
+  highestMeasuredFrameIndex: number
+  averageItemLength: number
+}
+
+export function useJumpToUnreadAnchor<T extends { id?: string | number }>({
+  listRef,
+  items,
+}: UseJumpToUnreadAnchorArgs<T>) {
+  const { jumpToUnreadActive } = useJumpToUnreadGates()
+  const { initialMessageId } = useConversationContext()
+  const hasAnchoredRef = useRef(false)
+  const userTouchedRef = useRef(false)
+  const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
+      retryTimerRef.current = null
+    }
+  }, [])
+
+  const onScrollBeginDrag = useCallback(() => {
+    userTouchedRef.current = true
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current)
+      retryTimerRef.current = null
+    }
+  }, [])
+
+  const onContentSizeChange = useCallback(() => {
+    if (hasAnchoredRef.current) return
+    if (!jumpToUnreadActive || !initialMessageId) return
+    if (userTouchedRef.current) return
+    const index = items.findIndex(item => String(item.id ?? '') === initialMessageId)
+    if (index < 0) return
+    hasAnchoredRef.current = true
+    listRef.current?.scrollToIndex({ index, viewPosition: 0.25, animated: false })
+  }, [jumpToUnreadActive, initialMessageId, items, listRef])
+
+  const onScrollToIndexFailed = useCallback(
+    (info: ScrollToIndexFailInfo) => {
+      if (userTouchedRef.current) return
+      const offset = info.averageItemLength * info.index
+      listRef.current?.scrollToOffset({ offset, animated: false })
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
+      retryTimerRef.current = setTimeout(() => {
+        retryTimerRef.current = null
+        if (userTouchedRef.current) return
+        listRef.current?.scrollToIndex({ index: info.index, viewPosition: 0.25, animated: false })
+      }, 50)
+    },
+    [listRef]
+  )
+
+  return { onScrollBeginDrag, onContentSizeChange, onScrollToIndexFailed }
+}

package/src/hooks/use_jump_to_unread_gates.ts

@@ -0,0 +1,10 @@
+import { useConversationContext } from '../contexts/conversation_context'
+import { useFeatures } from './use_features'
+
+export function useJumpToUnreadGates() {
+  const { featureEnabled } = useFeatures()
+  const { initialMessageIdIsAnchor } = useConversationContext()
+  const jumpToUnreadEnabled = featureEnabled('jump_to_unread')
+  const jumpToUnreadActive = jumpToUnreadEnabled && initialMessageIdIsAnchor
+  return { jumpToUnreadEnabled, jumpToUnreadActive }
+}

package/src/hooks/use_mark_latest_message_read.ts

@@ -1,15 +1,19 @@
 import { debounce } from 'lodash'
 import { useEffect, useMemo, useRef } from 'react'
+import { useConversationContext } from '../contexts/conversation_context'
 import { ConversationResource, MessageResource } from '../types'
 import { useAppState } from './use_app_state'
 import { useConversationsMarkRead } from './use_conversations_actions'
+import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
 
 interface Props {
   conversation: ConversationResource
-  messages: MessageResource[]
+  messages?: MessageResource[]
 }
 
 export function useMarkLatestMessageRead({ conversation }: Props) {
+  const { jumpToUnreadActive } = useJumpToUnreadGates()
+  const { currentPageReplyRootId, atEndOfMessageHistory } = useConversationContext()
   const firedOnce = useRef<boolean>(false)
   const { markRead } = useConversationsMarkRead({ conversation })
   const debouncedMarkRead = useMemo(
@@ -25,10 +29,20 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
 
   useEffect(() => {
     if (!isActive || !shouldMarkRead) return
+    if (currentPageReplyRootId) return
+    if (jumpToUnreadActive && !atEndOfMessageHistory) return
 
     firedOnce.current = true
 
     debouncedMarkRead(true)
     // keeping unreadReactionCount in the dependency array to watch for changes
-  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReactionCount])
+  }, [
+    debouncedMarkRead,
+    isActive,
+    shouldMarkRead,
+    unreadReactionCount,
+    currentPageReplyRootId,
+    jumpToUnreadActive,
+    atEndOfMessageHistory,
+  ])
 }