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

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,
+  ])
 }

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