@planningcenter/chat-react-native 4.2.0 → 4.2.1-qa-staging.1

package/src/hooks/paginator_meta.ts

@@ -1,13 +1,37 @@
-import { NextPageCursor } from '../types/api_primitives'
+import { ApiCollection, NextPageCursor, ResourceObject } from '../types/api_primitives'
 import { RequestData } from '../utils/client'
 
 export const getNextPageParamFromMeta = (
   next: NextPageCursor = {}
 ): Partial<RequestData> | undefined => {
-  if (next.idLt) return { where: { id_lt: next.idLt } }
-  if (next.idGt) return { where: { id_gt: next.idGt } }
-  if (next.idLte) return { where: { id_lte: next.idLte } }
-  if (next.idGte) return { where: { id_gte: next.idGte } }
+  if (next.idLt) return withOrder({ where: { id_lt: next.idLt } }, next.order)
+  if (next.idGt) return withOrder({ where: { id_gt: next.idGt } }, next.order)
+  if (next.idLte) return withOrder({ where: { id_lte: next.idLte } }, next.order)
+  if (next.idGte) return withOrder({ where: { id_gte: next.idGte } }, next.order)
   if (next.offset) return { offset: Number(next.offset) }
   return undefined
 }
+
+const withOrder = (param: Partial<RequestData>, order: NextPageCursor['order']) =>
+  order ? { ...param, order } : param
+
+const BOUND_KEYS = ['id_lt', 'id_lte', 'id_gt', 'id_gte', 'id_around']
+
+export const mergePageWhere = (
+  argsWhere: RequestData['where'] = {},
+  pageWhere: RequestData['where'] = {}
+): RequestData['where'] => {
+  const pageHasCursor = BOUND_KEYS.some(key => key in pageWhere)
+  const base = pageHasCursor
+    ? Object.fromEntries(Object.entries(argsWhere).filter(([key]) => !BOUND_KEYS.includes(key)))
+    : argsWhere
+  return { ...base, ...pageWhere }
+}
+
+export const getNewerPageParam = (
+  page: ApiCollection<ResourceObject>,
+  pageParam: Partial<RequestData> | undefined
+): Partial<RequestData> | undefined => {
+  const isAscendingPage = pageParam?.order === 'asc'
+  return getNextPageParamFromMeta(isAscendingPage ? page.meta?.next : page.meta?.prev)
+}

package/src/hooks/use_api.ts

@@ -4,7 +4,7 @@ import { ChatContext } from '../contexts/chat_context'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client'
 import { ResponseError, throwResponseError } from '../utils/response_error'
-import { getNextPageParamFromMeta } from './paginator_meta'
+import { getNextPageParamFromMeta, mergePageWhere } from './paginator_meta'
 import { App, useApiClient } from './use_api_client'
 import { getRequestQueryKey, RequestQueryKey } from './use_suspense_api'
 
@@ -61,12 +61,11 @@ export const useApiPaginator = <T extends ResourceObject>(
   >({
     queryKey: getRequestQueryKey(args),
     queryFn: ({ pageParam }) => {
-      const pageParmWhere = pageParam?.where || {}
-      const argsWhere = args.data.where || {}
-      const where = { ...argsWhere, ...pageParmWhere }
+      const where = mergePageWhere(args.data.where, pageParam?.where)
       const app = args.app || 'chat'
       const offset = pageParam?.offset || args.data.offset
-      const data = { ...args.data, where, offset }
+      const order = pageParam?.order || args.data.order
+      const data = { ...args.data, where, offset, order }
 
       return apiClient[app].get<ApiCollection<T>>({ url: args.url, data }).catch(throwResponseError)
     },

package/src/hooks/use_conversation_messages.ts

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

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -1,4 +1,4 @@
-import { InfiniteData, useQueryClient } from '@tanstack/react-query'
+import { hashKey, InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { ApiCollection, MessageResource } from '../types'
 import { JoltReactionEvent, JoltTypingEvent } from '../types/jolt_events'
 import {
@@ -24,16 +24,49 @@ 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
+}
+
 interface Props {
   conversationId: number
+  messageCaches?: MessagesCache[]
+}
+
+export const resolveMessageCaches = (defaults: unknown[][], overrides: MessagesCache[]) => {
+  const overrideByHash = new Map(overrides.map(cache => [hashKey(cache.queryKey), cache]))
+  const defaultHashes = new Set(defaults.map(hashKey))
+  const resolved = defaults.map(queryKey => overrideByHash.get(hashKey(queryKey)) ?? { queryKey })
+  const extras = overrides.filter(cache => !defaultHashes.has(hashKey(cache.queryKey)))
+  return [...resolved, ...extras]
 }
 
-export function useConversationMessagesJoltEvents({ conversationId }: Props) {
+export const queryKeysForEvent = (
+  event: MessagesJoltEvent,
+  defaults: unknown[][],
+  overrides: MessagesCache[]
+) =>
+  resolveMessageCaches(defaults, overrides)
+    .filter(cache => !cache.canUpdate || cache.canUpdate(event))
+    .map(cache => cache.queryKey)
+
+export function useConversationMessagesJoltEvents({ conversationId, messageCaches = [] }: Props) {
   const queryClient = useQueryClient()
   const currentPerson = useCurrentPerson()
   const joltChannel = useJoltChannel(`chat.conversations.${conversationId}`)
   const messagesRequestArgs = getMessagesRequestArgs({ conversation_id: conversationId })
   const messagesQueryKey = getRequestQueryKey(messagesRequestArgs)
+  const cachesTouchedBy = (replyRootId?: string | null): unknown[][] =>
+    replyRootId
+      ? [messagesQueryKey, getThreadedMessagesQueryKey(conversationId, replyRootId)]
+      : [messagesQueryKey]
   const apiClient = useApiClient()
 
   const { addTypingEvent, removeTypingEventById, removeAllTypingEventsByAuthorId } =
@@ -54,21 +87,16 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       }
     }
 
-    // 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)
-      }
+    const targetQueryKeys = queryKeysForEvent(
+      e.event,
+      cachesTouchedBy(data.reply_root_id),
+      messageCaches
+    )
+    targetQueryKeys.forEach(queryKey =>
+      updateCacheWithMessage(queryClient, queryKey, message, e.event)
+    )
+    if (isReplyRootUpdate) {
+      targetQueryKeys.forEach(queryKey => updateCacheReplyRoots(queryClient, queryKey, message))
     }
 
     // Update individual message query cache so reply shadow messages update immediately
@@ -88,34 +116,23 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       currentPersonId: currentPerson.id,
     })
 
-    // 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 =>
+    queryKeysForEvent(
+      'message.destroyed',
+      cachesTouchedBy(data.reply_root_id),
+      messageCaches
+    ).forEach(queryKey =>
+      queryClient.setQueryData<QueryData>(queryKey, prev =>
         deleteRecordInPagesData({ data: prev, record: message })
       )
-    }
+    )
   }
 
   const handleReactionJoltEvent = async (e: JoltReactionEvent) => {
-    // 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',
+      cachesTouchedBy(e.data.data.reply_root_id),
+      messageCaches
+    ).forEach(queryKey => updateCacheWithReaction(queryClient, queryKey, e, currentPerson.id))
   }
 
   const handleTypingEvent = async (e: JoltTypingEvent) => {

package/src/hooks/use_direct_message_eligibility.ts

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiResource, MemberResource } from '../types'
+import { useApiClient } from './use_api_client'
+
+export interface DirectMessageEligibility {
+  canDirectMessage: boolean
+  directMessagesDisabled: boolean
+}
+
+export function useDirectMessageEligibility({
+  groupId,
+  personId,
+  enabled = true,
+}: {
+  groupId: string
+  personId: number
+  enabled?: boolean
+}) {
+  const apiClient = useApiClient()
+  const url = `/me/groups/${groupId}/members/${personId}`
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['chat', url, 'direct_message_eligibility'],
+    queryFn: () =>
+      apiClient.chat.get({
+        url,
+        data: { fields: { Member: ['can_direct_message', 'direct_messages_disabled'] } },
+      }) as Promise<ApiResource<MemberResource>>,
+    enabled,
+    retry: false,
+  })
+
+  const member = data?.data
+  const eligibility: DirectMessageEligibility | undefined = member && {
+    canDirectMessage: member.canDirectMessage ?? false,
+    directMessagesDisabled: member.directMessagesDisabled ?? false,
+  }
+
+  return { eligibility, isLoading, isError }
+}

package/src/hooks/use_fetch_newer_messages.ts

@@ -0,0 +1,37 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { ApiCollection, MessageResource } from '../types'
+import { prependNewerPage } from '../utils/cache/prepend_newer_page'
+import { RequestData } from '../utils/client'
+import { getMessagesRequestArgs } from '../utils/request/get_messages'
+import { useApiClient } from './use_api_client'
+
+type Options = {
+  conversation_id: number
+  reply_root_id?: string | null
+  queryKey: unknown[]
+}
+
+export const useFetchNewerMessages = ({ conversation_id, reply_root_id, queryKey }: Options) => {
+  const queryClient = useQueryClient()
+  const apiClient = useApiClient()
+
+  return useCallback(
+    (newestMessageId: string) => {
+      const { url, data } = getMessagesRequestArgs({ conversation_id, reply_root_id })
+      const where = { id_gt: newestMessageId }
+      const pageParam: Partial<RequestData> = { where, order: 'asc' }
+
+      return apiClient.chat
+        .get<ApiCollection<MessageResource>>({ url, data: { ...data, where, order: 'asc' } })
+        .then(page => {
+          queryClient.setQueryData<Parameters<typeof prependNewerPage<MessageResource>>[0]>(
+            queryKey,
+            prev => prependNewerPage(prev, page, pageParam)
+          )
+        })
+        .catch(() => {})
+    },
+    [apiClient, conversation_id, queryClient, queryKey, reply_root_id]
+  )
+}

package/src/hooks/use_fetch_newer_on_foreground.ts

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

package/src/hooks/use_mark_latest_message_read.ts

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

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

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

@@ -45,6 +45,7 @@ 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(!!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)
 
@@ -52,6 +53,7 @@ export const ServicesForm = ({
   useEffect(() => {
     setSelectedTeamIds(initialState)
     setSelectedPlanId(initialPlanId)
+    setFilterByPlan(!!initialPlanId)
   }, [initialState, initialPlanId])
 
   const removeSelection = useCallback(
@@ -61,9 +63,7 @@ export const ServicesForm = ({
     [selectedTeamIds]
   )
 
-  const [filerByPlan, setFilterByPlan] = useState(false)
-
-  const activePlanId = filerByPlan ? selectedPlanId : undefined
+  const activePlanId = filterByPlan ? selectedPlanId : undefined
 
   const { payload, isLoading: isLoadingPayload } = useServicesChatConversationPayload({
     teamIds: selectedTeamIds,
@@ -79,7 +79,7 @@ export const ServicesForm = ({
 
   const { members, isError: isMemberError } = useTeamMembersForNewConversation({
     teamIds: selectedTeamIds,
-    planId: selectedPlanId,
+    planId: activePlanId,
   })
   const adultMembers = useMemo(() => members.filter(member => !member.child), [members])
 
@@ -118,7 +118,7 @@ export const ServicesForm = ({
             removeSelection={removeSelection}
             selectedPlanId={selectedPlanId}
             setSelectedPlanId={setSelectedPlanId}
-            filterByPlan={filerByPlan}
+            filterByPlan={filterByPlan}
             setFilterByPlan={setFilterByPlan}
             members={members}
             isMemberError={isMemberError}