@planningcenter/chat-react-native 4.4.0-rc.7 → 4.4.0

package/src/hooks/groups/use_group_members_for_new_conversation.ts

@@ -1,15 +1,14 @@
+import { keepPreviousData } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { MemberResource, ResourceObject } from '../../types'
 import { GroupsGroupMemberResource } from '../../types/resources/groups/groups_member_resource_with_person'
+import { useApiPaginator } from '../use_api'
 import { useEnrichPeople } from '../use_enrich_people'
-import { useSuspensePaginator } from '../use_suspense_api'
 
-type UseSuspensePaginatorResult<T extends ResourceObject> = ReturnType<
-  typeof useSuspensePaginator<T>
->
+type UseApiPaginatorResult<T extends ResourceObject> = ReturnType<typeof useApiPaginator<T>>
 
 export type GroupMembersForNewConversationResult = Omit<
-  UseSuspensePaginatorResult<GroupsGroupMemberResource>, // We are passing our own "members" data shape
+  UseApiPaginatorResult<GroupsGroupMemberResource>, // We are passing our own "members" data shape
   'data'
 > & {
   data: MemberResource[]
@@ -24,19 +23,25 @@ export function useGroupMembersForNewConversation({
   id: number
   gender: string | null
 }) {
-  const response = useSuspensePaginator<GroupsGroupMemberResource>({
-    url: `/me/groups/${id}/memberships`,
-    data: {
-      perPage: 100,
-      include: ['person'],
-      fields: {
-        Membership: ['person, role'],
-        Person: ['avatar_url', 'name', 'first_name', 'last_name', 'child', 'gender'],
+  const response = useApiPaginator<GroupsGroupMemberResource>(
+    {
+      url: `/me/groups/${id}/memberships`,
+      data: {
+        perPage: 100,
+        include: ['person'],
+        fields: {
+          Membership: ['person, role'],
+          Person: ['avatar_url', 'name', 'first_name', 'last_name', 'child', 'gender'],
+        },
+        ...(gender ? { where: { gender } } : {}),
       },
-      ...(gender ? { where: { gender } } : {}),
+      app: 'groups',
     },
-    app: 'groups',
-  })
+    {
+      throwOnError: (_error, query) => query.state.data === undefined,
+      placeholderData: keepPreviousData,
+    }
+  )
 
   const { data: memberships = [] } = response
   const personIds = useMemo(() => memberships.map(m => +m.person.id), [memberships])

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export { useApiClient } from './use_api_client'
 export * from './use_api'
 export * from './use_app_state'
 export * from './use_async_storage'
+export * from './use_can_browse_archived_conversations'
 export * from './use_at_font_scale_breakpoint'
 export * from './use_chat_permissions'
 export * from './use_create_android_ripple_color'
@@ -16,6 +17,7 @@ export * from './use_groups_groups'
 export * from './use_groups'
 export * from './use_selected_chip_background_color'
 export * from './use_interaction_tinted_background_color'
+export * from './use_manual_archiving_enabled'
 export * from './use_message_reaction_toggle'
 export * from './use_new_conversation_entry'
 export * from './use_organization'
@@ -23,6 +25,7 @@ export * from './use_people_person'
 export * from './use_preview_avatar_diameter'
 export * from './use_product_analytics'
 export * from './use_qualified_by_age'
+export * from './use_reduce_motion'
 export * from './use_scalable_number_of_lines'
 export * from './use_submit_age_check'
 export * from './use_suspense_api'

package/src/hooks/use_animated_message_background_color.ts

@@ -10,6 +10,7 @@ import {
   Easing,
   ReduceMotion,
 } from 'react-native-reanimated'
+import { useReduceMotion } from './use_reduce_motion'
 import { useTheme } from './use_theme'
 
 const FLASH_IN_MS = 150
@@ -18,10 +19,12 @@ const FLASH_OUT_MS = 1500
 
 export function useAnimatedMessageBackgroundColor() {
   const { colors } = useTheme()
+  const reduceMotion = useReduceMotion()
   const pressProgress = useSharedValue(0)
   const flashProgress = useSharedValue(0)
 
-  const tintColor = colors.fillColorNeutral050Base
+  const tintColor =
+    colors.name === 'dark' ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base
   const tintsOnPress = Platform.OS === 'ios'
 
   const animatedBackgroundColor = useAnimatedStyle(() => {
@@ -53,12 +56,12 @@ export function useAnimatedMessageBackgroundColor() {
         withTiming(0, {
           duration: FLASH_OUT_MS,
           easing: Easing.out(Easing.ease),
-          reduceMotion: ReduceMotion.System,
+          reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,
         }),
         ReduceMotion.Never
       )
     )
-  }, [flashProgress])
+  }, [flashProgress, reduceMotion])
 
   return {
     animatedBackgroundColor,

package/src/hooks/use_api.ts

@@ -1,4 +1,10 @@
-import { InfiniteData, useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import {
+  InfiniteData,
+  keepPreviousData,
+  Query,
+  useInfiniteQuery,
+  useQuery,
+} from '@tanstack/react-query'
 import { useContext } from 'react'
 import { ChatContext } from '../contexts/chat_context'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
@@ -16,7 +22,8 @@ export type ApiGetQueryOptions = {
   staleTime?: number
   gcTime?: number
   enabled?: boolean
-  throwOnError?: boolean | ((error: ResponseError) => boolean)
+  throwOnError?: boolean | ((error: ResponseError, query: Query<any, ResponseError>) => boolean)
+  placeholderData?: typeof keepPreviousData
 }
 
 export const useApiGet = <T extends ResourceObject | ResourceObject[]>(

package/src/hooks/use_can_browse_archived_conversations.ts

@@ -0,0 +1,17 @@
+import { CurrentPersonResource } from '../types'
+import { FIVE_MINUTES } from '../utils/time'
+import { useApiGet } from './use_api'
+import { currentPersonRequestArgs } from './use_current_person'
+import { useManualArchivingEnabled } from './use_manual_archiving_enabled'
+
+export const useCanBrowseArchivedConversations = (): boolean => {
+  const manualArchivingEnabled = useManualArchivingEnabled()
+  const { data: person, isFetched } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs, {
+    enabled: manualArchivingEnabled,
+    staleTime: FIVE_MINUTES,
+  })
+
+  if (!manualArchivingEnabled || !isFetched) return false
+
+  return person?.canBrowseArchivedConversations ?? false
+}

package/src/hooks/use_clear_conversation_filters.ts

@@ -0,0 +1,16 @@
+import { useNavigation } from '@react-navigation/native'
+import { useCallback } from 'react'
+
+export function useClearConversationFilters() {
+  const navigation = useNavigation()
+
+  return useCallback(() => {
+    navigation.setParams({
+      title: undefined,
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+      show_direct_messages: undefined,
+      show_archived: undefined,
+    })
+  }, [navigation])
+}

package/src/hooks/use_conversation.ts

@@ -1,11 +1,13 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
+import { Alert } from 'react-native'
 import { ApiResource, ConversationResource } from '../types'
 import { transformGetToPost } from '../utils/client/request_helpers'
 import { Haptic } from '../utils/native_adapters'
 import { getConversationsRequestArgs } from '../utils/request/conversation'
 import { useApiClient } from './use_api_client'
-import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
+import { useCurrentPersonCache } from './use_current_person'
+import { getRequestQueryKey, SuspenseGetQueryOptions, useSuspenseGet } from './use_suspense_api'
 
 export const getConversationRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
   url: `/me/conversations/${conversation_id}`,
@@ -49,6 +51,8 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'can_reply',
         'can_delete_non_authored_messages',
         'can_message_available_members',
+        'can_archive',
+        'can_unarchive',
       ],
       ConversationMembership: [
         'last_read_message_sort_key',
@@ -70,10 +74,13 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
   },
 })
 
-export const useConversation = ({ conversation_id }: { conversation_id: number }) => {
+export const useConversation = (
+  { conversation_id }: { conversation_id: number },
+  options?: SuspenseGetQueryOptions<ConversationResource>
+) => {
   const args = getConversationRequestArgs({ conversation_id })
 
-  return useSuspenseGet<ConversationResource>(args)
+  return useSuspenseGet<ConversationResource>(args, options)
 }
 
 export const useConversationMute = ({ conversation_id }: { conversation_id: number }) => {
@@ -179,6 +186,40 @@ export const useConversationDelete = ({ conversation_id }: { conversation_id: nu
   })
 }
 
+export const useConversationArchive = ({ conversation_id }: { conversation_id: number }) => {
+  const apiClient = useApiClient()
+  const queryClient = useQueryClient()
+  const currentPersonCache = useCurrentPersonCache()
+  const conversationQueryKey = getRequestQueryKey(getConversationRequestArgs({ conversation_id }))
+  const { url } = getConversationsRequestArgs()
+
+  const { mutate: setArchived, ...mutation } = useMutation({
+    mutationKey: ['archiveConversation'],
+    mutationFn: async (archived: boolean) => {
+      const action = archived ? 'archive' : 'unarchive'
+
+      return apiClient.chat.post({
+        url: `/me/conversations/${conversation_id}/${action}`,
+        data: { data: { type: 'Conversation', attributes: {} } },
+      })
+    },
+    onSuccess: (_response, archived) => {
+      Haptic.notificationSuccess()
+      if (archived) currentPersonCache.update({ canBrowseArchivedConversations: true })
+      queryClient.invalidateQueries({ queryKey: [url] })
+      return queryClient.invalidateQueries({ queryKey: conversationQueryKey })
+    },
+    onError: (_error, archived) => {
+      Alert.alert(
+        'Oops',
+        `Couldn't ${archived ? 'archive' : 'unarchive'} this conversation. Please try again.`
+      )
+    },
+  })
+
+  return { setArchived, ...mutation }
+}
+
 export const useConversationDisableReplies = ({ conversation_id }: { conversation_id: number }) => {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()

package/src/hooks/use_conversation_messages.ts

@@ -72,6 +72,8 @@ export const useConversationMessages = (
     [data]
   )
 
+  useEnsureWindowOpenedAtAnchor({ conversation_id, reply_root_id, anchor })
+
   // Once nothing newer remains, the top of the window is the live edge. Without this,
   // a refetch would replay from the anchor and drop rows Jolt has added since.
   useEffect(() => {
@@ -82,8 +84,6 @@ export const useConversationMessages = (
     }
   }, [infiniteData, queryClient, queryKey])
 
-  useEnsureWindowHoldsAnchor({ conversation_id, reply_root_id, anchor })
-
   return {
     messages,
     behind,
@@ -97,7 +97,7 @@ export const useConversationMessages = (
   }
 }
 
-const useEnsureWindowHoldsAnchor = ({ conversation_id, reply_root_id, anchor }: Options) => {
+const useEnsureWindowOpenedAtAnchor = ({ conversation_id, reply_root_id, anchor }: Options) => {
   const queryClient = useQueryClient()
 
   useEffect(() => {
@@ -105,8 +105,10 @@ const useEnsureWindowHoldsAnchor = ({ conversation_id, reply_root_id, anchor }:
 
     const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
     const cached = queryClient.getQueryData<MessagesWindow>(queryKey)
-    const holdsAnchor = cached?.pages.some(page => page.data.some(m => m.id === anchor))
-    if (cached && !holdsAnchor) {
+    if (!cached) return
+
+    const openedAtAnchor = cached.pageParams[0]?.where?.id_around === anchor
+    if (!openedAtAnchor) {
       queryClient.resetQueries({ queryKey, exact: true })
     }
   }, [anchor, conversation_id, reply_root_id, queryClient])

package/src/hooks/use_current_person.ts

@@ -18,6 +18,7 @@ export const currentPersonRequestArgs = {
         'age_qualification_status',
         'direct_messages_disabled',
         'direct_messages_eligible',
+        'can_browse_archived_conversations',
         'under_18',
       ],
     },

package/src/hooks/use_jolt.ts

@@ -7,8 +7,9 @@ import {
   FetchSubscribeToken,
   JoltSubscription,
 } from '@planningcenter/jolt-client/dist/types/JoltSubscription'
-import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+import { QueryClient, useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo } from 'react'
+import { AppState, AppStateStatus } from 'react-native'
 import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
 import type { JoltSubscriptionPattern } from '../types/jolt_events'
@@ -125,6 +126,61 @@ export const useJoltClient = (): JoltClient | undefined => {
   return joltClient
 }
 
+const pingSubscribedJoltClients = (queryClient: QueryClient) => {
+  queryClient
+    .getQueryCache()
+    .findAll({ queryKey: ['jolt-client'] })
+    .forEach(query => {
+      const joltClient = query.state.data as JoltClient | undefined
+      if (!joltClient || joltClient.subscriptions.length === 0) return
+
+      try {
+        joltClient.ping()
+      } catch {}
+    })
+}
+
+const foregroundPingListeners = new Map<QueryClient, { mounts: number; remove: () => void }>()
+
+const subscribeToForegroundPing = (queryClient: QueryClient) => {
+  const existing = foregroundPingListeners.get(queryClient)
+  if (existing) {
+    existing.mounts += 1
+    return
+  }
+
+  let previousState: AppStateStatus = AppState.currentState
+  const subscription = AppState.addEventListener('change', nextState => {
+    if (nextState === 'active' && previousState !== 'active') {
+      pingSubscribedJoltClients(queryClient)
+    }
+    previousState = nextState
+  })
+
+  foregroundPingListeners.set(queryClient, { mounts: 1, remove: () => subscription.remove() })
+}
+
+const unsubscribeFromForegroundPing = (queryClient: QueryClient) => {
+  const existing = foregroundPingListeners.get(queryClient)
+  if (!existing) return
+
+  existing.mounts -= 1
+  if (existing.mounts > 0) return
+
+  existing.remove()
+  foregroundPingListeners.delete(queryClient)
+}
+
+export const useJoltForegroundPing = () => {
+  const queryClient = useQueryClient()
+
+  useEffect(() => {
+    subscribeToForegroundPing(queryClient)
+
+    return () => unsubscribeFromForegroundPing(queryClient)
+  }, [queryClient])
+}
+
 export function useJoltChannel(
   channelName: string,
   enabled: boolean = true

package/src/hooks/use_manual_archiving_enabled.ts

@@ -0,0 +1,10 @@
+import { availableFeatures, useFeatures } from './use_features'
+
+export function useManualArchivingEnabled() {
+  const { featureEnabled } = useFeatures()
+
+  return (
+    featureEnabled(availableFeatures.manual_archiving) ||
+    featureEnabled(availableFeatures.manual_archiving_rollout)
+  )
+}

package/src/hooks/use_mark_latest_message_read.ts

@@ -20,15 +20,16 @@ export function useMarkLatestMessageRead({ conversation, enabled = true }: Props
   const unreadCount = conversation.unreadCount
   const unreadReaction = conversation.unreadReaction
 
-  const shouldMarkRead = Boolean(unreadCount >= 1 || unreadReaction || !firedOnce.current)
+  const shouldMarkRead =
+    !firedOnce.current || (enabled && Boolean(unreadCount >= 1 || unreadReaction))
   const appState = useAppState()
   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_reduce_motion.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+import { AccessibilityInfo } from 'react-native'
+import { useReducedMotion } from 'react-native-reanimated'
+
+export const useReduceMotion = () => {
+  const [reduceMotion, setReduceMotion] = useState(useReducedMotion())
+
+  useEffect(() => {
+    AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion)
+
+    const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion)
+
+    return () => {
+      subscription.remove()
+    }
+  }, [])
+
+  return reduceMotion
+}

package/src/hooks/use_unarchive_conversation_action.ts

@@ -0,0 +1,24 @@
+import { ConversationResource } from '../types'
+import { isArchivedConversation } from '../utils/archived_conversation'
+import { useConversationArchive } from './use_conversation'
+import { availableFeatures, useFeatures } from './use_features'
+
+export function useUnarchiveConversationAction(conversation: ConversationResource) {
+  const { featureEnabled } = useFeatures()
+  const { setArchived, isPending } = useConversationArchive({ conversation_id: conversation.id })
+  const manualArchivingEnabled =
+    featureEnabled(availableFeatures.manual_archiving) ||
+    featureEnabled(availableFeatures.manual_archiving_rollout)
+  const canUnarchive =
+    manualArchivingEnabled &&
+    isArchivedConversation(conversation) &&
+    !!conversation.memberAbility?.canUnarchive
+
+  if (!canUnarchive) return undefined
+
+  return {
+    label: 'Unarchive',
+    onPress: () => setArchived(false),
+    loading: isPending,
+  }
+}