@planningcenter/chat-react-native 4.4.1-qa-staging.11 → 4.4.1-qa-staging.13

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

@@ -1,12 +1,15 @@
+import JoltClient from '@planningcenter/jolt-client'
+import { JoltSubscription } from '@planningcenter/jolt-client/dist/types/JoltSubscription'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { render, waitFor } from '@testing-library/react-native'
 import React, { PropsWithChildren, Suspense } from 'react'
+import { AppState, AppStateStatus } from 'react-native'
 import { buildTestQueryClient } from '../../__utils__/query_client'
 import { ChatContext, ChatContextValue } from '../../contexts/chat_context'
 import { Session } from '../../utils'
 import { Client } from '../../utils/client'
 import { ResponseError } from '../../utils/response_error'
-import { useJoltClient } from '../use_jolt'
+import { useJoltClient, useJoltForegroundPing } from '../use_jolt'
 
 let caught: unknown
 
@@ -68,3 +71,77 @@ describe('useJoltClient', () => {
     expect((caught as ResponseError).status).toBe(401)
   })
 })
+
+describe('useJoltForegroundPing', () => {
+  const addEventListener = AppState.addEventListener as jest.Mock
+  const confirmedSubscription = {} as JoltSubscription
+
+  const PingProbe = () => {
+    useJoltForegroundPing()
+    return null
+  }
+
+  const renderForegroundPing = (joltClient: Partial<JoltClient>) => {
+    const queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+    queryClient.setQueryData(['jolt-client', 'wss://jolt.test', 'a-real-token'], joltClient)
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <PingProbe />
+      </QueryClientProvider>
+    )
+
+    const [, onChange] = addEventListener.mock.calls.at(-1) as [
+      string,
+      (_state: AppStateStatus) => void,
+    ]
+
+    return onChange
+  }
+
+  beforeEach(() => {
+    addEventListener.mockClear()
+  })
+
+  it('pings the jolt client once when the app returns to the foreground', () => {
+    const ping = jest.fn()
+    const onChange = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+
+    onChange('background')
+    onChange('active')
+
+    expect(ping).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not ping when there are no confirmed subscriptions', () => {
+    const ping = jest.fn()
+    const onChange = renderForegroundPing({ ping, subscriptions: [] })
+
+    onChange('background')
+    onChange('active')
+
+    expect(ping).not.toHaveBeenCalled()
+  })
+
+  it('does not ping when the app leaves the foreground', () => {
+    const ping = jest.fn()
+    const onChange = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+
+    onChange('inactive')
+    onChange('background')
+
+    expect(ping).not.toHaveBeenCalled()
+  })
+
+  it('swallows errors from pinging a closed socket', () => {
+    const ping = jest.fn(() => {
+      throw new Error('No WebSocket')
+    })
+    const onChange = renderForegroundPing({ ping, subscriptions: [confirmedSubscription] })
+
+    onChange('background')
+
+    expect(() => onChange('active')).not.toThrow()
+    expect(ping).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -0,0 +1,49 @@
+import { act, renderHook, waitFor } from '@testing-library/react-native'
+import { AccessibilityInfo, EmitterSubscription } from 'react-native'
+import { useReduceMotion } from '../use_reduce_motion'
+
+type ReduceMotionListener = (enabled: boolean) => void
+
+describe('useReduceMotion', () => {
+  let listener: ReduceMotionListener | undefined
+  const remove = jest.fn()
+
+  beforeEach(() => {
+    listener = undefined
+    remove.mockClear()
+    jest.spyOn(AccessibilityInfo, 'isReduceMotionEnabled').mockResolvedValue(true)
+    const addEventListener: typeof AccessibilityInfo.addEventListener = (_event, handler) => {
+      listener = handler as ReduceMotionListener
+      return { remove } as unknown as EmitterSubscription
+    }
+    jest.spyOn(AccessibilityInfo, 'addEventListener').mockImplementation(addEventListener)
+  })
+
+  afterEach(() => jest.restoreAllMocks())
+
+  it('seeds from the system setting', async () => {
+    const { result } = renderHook(() => useReduceMotion())
+
+    expect(result.current).toBe(false)
+    await waitFor(() => expect(result.current).toBe(true))
+  })
+
+  it('follows reduceMotionChanged while mounted', async () => {
+    const { result } = renderHook(() => useReduceMotion())
+    await waitFor(() => expect(result.current).toBe(true))
+
+    act(() => listener?.(false))
+    expect(result.current).toBe(false)
+
+    act(() => listener?.(true))
+    expect(result.current).toBe(true)
+  })
+
+  it('removes the listener on unmount', () => {
+    const { unmount } = renderHook(() => useReduceMotion())
+
+    expect(remove).not.toHaveBeenCalled()
+    unmount()
+    expect(remove).toHaveBeenCalledTimes(1)
+  })
+})

package/src/hooks/index.ts

@@ -23,6 +23,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_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_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,36 @@ 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 {}
+    })
+}
+
+export const useJoltForegroundPing = () => {
+  const queryClient = useQueryClient()
+
+  useEffect(() => {
+    let previousState: AppStateStatus = AppState.currentState
+    const subscription = AppState.addEventListener('change', nextState => {
+      if (nextState === 'active' && previousState !== 'active') {
+        pingSubscribedJoltClients(queryClient)
+      }
+      previousState = nextState
+    })
+
+    return () => subscription.remove()
+  }, [queryClient])
+}
+
 export function useJoltChannel(
   channelName: string,
   enabled: boolean = true

package/src/hooks/use_reduce_motion.ts

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

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -1,6 +1,6 @@
 import { act, fireEvent, render } from '@testing-library/react-native'
 import React from 'react'
-import { Keyboard } from 'react-native'
+import { Keyboard, ScrollView } from 'react-native'
 import type { useSearchResults } from '../../../hooks/use_search_results'
 import type {
   ConversationSearchResultResource,
@@ -116,6 +116,18 @@ describe('SearchScreen', () => {
     expect(view.getByLabelText('Loading results')).toBeTruthy()
   })
 
+  it('lets the prompt scroll while taps still reach the field', () => {
+    const view = render(<SearchScreen />)
+
+    const scrollView = view.UNSAFE_getByType(ScrollView)
+    expect(scrollView.props.keyboardShouldPersistTaps).toBe('handled')
+    expect(scrollView.props.contentContainerStyle).toMatchObject({
+      flexGrow: 1,
+      justifyContent: 'center',
+    })
+    expect(view.getByText('Search chat')).toBeTruthy()
+  })
+
   it('returns to the prompt as soon as the term is cleared', () => {
     const view = render(<SearchScreen />)
     const input = view.getByLabelText(inputLabel)

package/src/screens/search/search_screen.tsx

@@ -4,7 +4,7 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
 import React, { useRef, useState } from 'react'
-import { Keyboard, StyleSheet, View } from 'react-native'
+import { Keyboard, ScrollView, StyleSheet, View } from 'react-native'
 import { KeyboardView } from '../../components'
 import {
   composeOptions,
@@ -73,7 +73,9 @@ export function SearchScreen() {
             onSettled={publishSearch}
           />
         ) : (
-          <SearchPromptBlankState />
+          <ScrollView contentContainerStyle={styles.prompt} keyboardShouldPersistTaps="handled">
+            <SearchPromptBlankState />
+          </ScrollView>
         )}
       </View>
     </KeyboardView>
@@ -84,4 +86,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  prompt: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
 })