@planningcenter/chat-react-native 4.4.1-qa-staging.31 → 4.4.1-qa-1036.0

package/src/screens/group_notification_settings_screen.tsx

@@ -2,7 +2,7 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useEffect } from 'react'
-import { Platform, ScrollView, StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { useTheme } from '../hooks'
 import { platformFontWeightBold } from '../utils/styles'
@@ -38,7 +38,7 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
   }
 
   return (
-    <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.container}>
+    <View style={styles.container}>
       <View style={styles.sectionOuter}>
         <View style={styles.sectionInner}>
           <Heading variant="h2" style={styles.sectionHeading}>
@@ -76,7 +76,7 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
           )}
         </View>
       </PlatformPressable>
-    </ScrollView>
+    </View>
   )
 }
 

package/src/screens/notification_settings_screen.tsx

@@ -123,7 +123,6 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
   return (
     <View style={styles.listContainer}>
       <FlatList
-        contentInsetAdjustmentBehavior="automatic"
         data={listData as SectionListData}
         contentContainerStyle={styles.contentContainer}
         renderItem={({ item, index }) => {

package/src/screens/preferred_app_selection_screen.tsx

@@ -2,7 +2,7 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps } from '@react-navigation/native'
 import { useMutation } from '@tanstack/react-query'
 import React, { type PropsWithChildren } from 'react'
-import { Image, ScrollView, StyleSheet, View, type ViewStyle } from 'react-native'
+import { Image, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { useApiClient, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
@@ -45,7 +45,7 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
   const sectionTitle = chatType ? chatTypeLabel(chatType.title) : undefined
 
   return (
-    <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container}>
+    <View style={styles.container}>
       <View style={styles.section}>
         <Heading variant="h2" style={styles.sectionHeading}>
           {sectionTitle}
@@ -64,7 +64,7 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
           </PressableRow>
         ))}
       </View>
-    </ScrollView>
+    </View>
   )
 }
 
@@ -118,7 +118,7 @@ const PressableRow = ({
 
 const styles = StyleSheet.create({
   container: {
-    flexGrow: 1,
+    flex: 1,
   },
   section: {
     paddingTop: 24,

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

@@ -106,13 +106,12 @@ describe('SearchScreen', () => {
     fireEvent.changeText(input, ' budget ')
 
     expect(view.getByText('Search chat')).toBeTruthy()
-    const searchedTerms = () =>
-      new Set(mockUseSearchResults.mock.calls.map(([term]) => term).filter(term => term.trim()))
-    expect([...searchedTerms()]).toEqual([])
+    expect(mockUseSearchResults).not.toHaveBeenCalled()
 
     act(() => jest.advanceTimersByTime(200))
 
-    expect([...searchedTerms()]).toEqual(['budget'])
+    const searchedTerms = new Set(mockUseSearchResults.mock.calls.map(([term]) => term))
+    expect([...searchedTerms]).toEqual(['budget'])
     expect(view.queryByText('Search chat')).toBeNull()
     expect(view.getByLabelText('Loading results')).toBeTruthy()
   })
@@ -122,7 +121,10 @@ describe('SearchScreen', () => {
 
     const scrollView = view.UNSAFE_getByType(ScrollView)
     expect(scrollView.props.keyboardShouldPersistTaps).toBe('handled')
-    expect(scrollView.props.contentContainerStyle).toMatchObject({ flexGrow: 1 })
+    expect(scrollView.props.contentContainerStyle).toMatchObject({
+      flexGrow: 1,
+      justifyContent: 'center',
+    })
     expect(view.getByText('Search chat')).toBeTruthy()
   })
 

package/src/screens/search/components/__tests__/search_results_list.test.tsx

@@ -49,13 +49,9 @@ const messageResult = (id: string): MessageSearchResultResource => ({
   },
 })
 
-const slots = { header: <></>, prompt: <></> }
-
 const renderList = (state: Partial<SearchState>, onSettled = jest.fn()) => {
   mockUseSearchResults.mockReturnValue(searchState(state))
-  const list = () => (
-    <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} {...slots} />
-  )
+  const list = () => <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} />
   const view = render(list())
   const rerenderWith = (next: Partial<SearchState>) => {
     mockUseSearchResults.mockReturnValue(searchState(next))
@@ -134,7 +130,7 @@ describe('SearchResultsList', () => {
     const results = [conversationResult('1'), messageResult('1'), messageResult('2')]
     mockUseSearchResults.mockReturnValue(searchState({ results }))
     const view = render(
-      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} {...slots} />
+      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} />
     )
 
     fireEvent.press(view.getByLabelText(/^Message 2/))

package/src/screens/search/components/search_results_list.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
 import { Banner, Spinner, Text, TextButton } from '../../../components'
 import { useSearchResults } from '../../../hooks/use_search_results'
@@ -23,17 +23,9 @@ interface SearchResultsListProps {
   term: string
   onSelect: (result: SearchResultResource, position: number) => void
   onSettled: (term: string, counts: SearchResultCounts) => void
-  header: ReactElement
-  prompt: ReactElement
 }
 
-export function SearchResultsList({
-  term,
-  onSelect,
-  onSettled,
-  header,
-  prompt,
-}: SearchResultsListProps) {
+export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsListProps) {
   const {
     results,
     failedTypes,
@@ -44,10 +36,9 @@ export function SearchResultsList({
     hasNextPage,
     isFetchingNextPage,
   } = useSearchResults(term)
-  const searching = term.trim().length > 0
-  const conversationResults = searching ? results.filter(isConversationResult) : []
-  const messageResults = searching ? results.filter(isMessageResult) : []
-  const settled = searching && !isPending && !isError
+  const conversationResults = results.filter(isConversationResult)
+  const messageResults = results.filter(isMessageResult)
+  const settled = !isPending && !isError
 
   const settledTermRef = useRef<string | undefined>(undefined)
 
@@ -65,7 +56,6 @@ export function SearchResultsList({
     <FlatList
       data={messageResults}
       keyExtractor={item => item.id}
-      contentInsetAdjustmentBehavior="automatic"
       keyboardShouldPersistTaps="handled"
       keyboardDismissMode="on-drag"
       contentContainerStyle={styles.content}
@@ -74,20 +64,16 @@ export function SearchResultsList({
       )}
       ListHeaderComponent={
         <>
-          {header}
           {conversationResults.length > 0 && (
             <ConversationResults results={conversationResults} onSelect={onSelect} />
           )}
-          {searching && failedTypes.includes('conversation') && (
-            <SectionFailure type="conversation" />
-          )}
+          {failedTypes.includes('conversation') && <SectionFailure type="conversation" />}
           {messageResults.length > 0 && <ResultsSection title="Messages" />}
         </>
       }
       ListEmptyComponent={
         <ListEmpty
           term={term}
-          prompt={prompt}
           isError={isError}
           isPending={isPending}
           noResults={results.length === 0 && failedTypes.length === 0}
@@ -105,7 +91,7 @@ export function SearchResultsList({
               Try again
             </TextButton>
           )}
-          {searching && failedTypes.includes('message') && <SectionFailure type="message" />}
+          {failedTypes.includes('message') && <SectionFailure type="message" />}
         </>
       }
       onEndReached={() => {
@@ -118,15 +104,12 @@ export function SearchResultsList({
 
 interface ListEmptyProps {
   term: string
-  prompt: ReactElement
   isError: boolean
   isPending: boolean
   noResults: boolean
 }
 
-function ListEmpty({ term, prompt, isError, isPending, noResults }: ListEmptyProps) {
-  if (term.trim().length === 0) return <View style={styles.prompt}>{prompt}</View>
-
+function ListEmpty({ term, isError, isPending, noResults }: ListEmptyProps) {
   if (isError) {
     return <Banner appearance="error" description={SEARCH_ERROR_MESSAGE} style={styles.banner} />
   }
@@ -166,10 +149,6 @@ const styles = StyleSheet.create({
   content: {
     flexGrow: 1,
   },
-  prompt: {
-    flexGrow: 1,
-    justifyContent: 'center',
-  },
   banner: {
     margin: 16,
   },

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,
@@ -64,13 +64,19 @@ export function SearchScreen() {
   return (
     <KeyboardView>
       <View style={styles.container} testID="search-screen">
-        <SearchResultsList
-          term={debouncedTerm}
-          onSelect={openResult}
-          onSettled={publishSearch}
-          header={<SearchField term={term} onChange={setTerm} />}
-          prompt={<SearchPromptBlankState />}
-        />
+        <SearchField term={term} onChange={setTerm} />
+        {debouncedTerm.length > 0 ? (
+          <SearchResultsList
+            key={debouncedTerm}
+            term={debouncedTerm}
+            onSelect={openResult}
+            onSettled={publishSearch}
+          />
+        ) : (
+          <ScrollView contentContainerStyle={styles.prompt} keyboardShouldPersistTaps="handled">
+            <SearchPromptBlankState />
+          </ScrollView>
+        )}
       </View>
     </KeyboardView>
   )
@@ -80,4 +86,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  prompt: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
 })

package/src/screens/settings_screen.tsx

@@ -1,7 +1,7 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
-import { Platform, ScrollView, StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Heading, Icon, Text, VersionFooter } from '../components'
 import { Switch } from '../components/display/switch'
@@ -28,31 +28,29 @@ export function SettingsScreen({}: SettingsScreenProps) {
 
   return (
     <View style={styles.container}>
-      <ScrollView contentInsetAdjustmentBehavior="automatic">
-        <View style={styles.sectionOuter}>
-          <View style={styles.sectionHeader}>
-            <Heading variant="h2">Messages</Heading>
-          </View>
-          {directMessagesEligible && (
-            <View style={styles.settingRow}>
-              <View style={styles.settingRowText}>
-                <Text>Allow direct messages</Text>
-                <Text variant="tertiary">
-                  When off, you can't be added to new direct messages, and any you're already in
-                  will be turned off.
-                </Text>
-              </View>
-              <Switch
-                value={!directMessagesDisabled}
-                onValueChange={enabled => setDirectMessagesDisabled(!enabled)}
-                disabled={isMutating}
-              />
-            </View>
-          )}
-          <NavRow label="Notification settings" onPress={handleNotificationSettings} />
-          {appName !== 'services' && <NavRow label="Get help" onPress={handleGetHelp} />}
+      <View style={styles.sectionOuter}>
+        <View style={styles.sectionHeader}>
+          <Heading variant="h2">Messages</Heading>
         </View>
-      </ScrollView>
+        {directMessagesEligible && (
+          <View style={styles.settingRow}>
+            <View style={styles.settingRowText}>
+              <Text>Allow direct messages</Text>
+              <Text variant="tertiary">
+                When off, you can't be added to new direct messages, and any you're already in will
+                be turned off.
+              </Text>
+            </View>
+            <Switch
+              value={!directMessagesDisabled}
+              onValueChange={enabled => setDirectMessagesDisabled(!enabled)}
+              disabled={isMutating}
+            />
+          </View>
+        )}
+        <NavRow label="Notification settings" onPress={handleNotificationSettings} />
+        {appName !== 'services' && <NavRow label="Get help" onPress={handleGetHelp} />}
+      </View>
       <View style={styles.footer}>
         <VersionFooter />
       </View>
@@ -92,6 +90,8 @@ const useStyles = () => {
       flex: 1,
     },
     footer: {
+      flex: 1,
+      justifyContent: 'flex-end',
       paddingBottom: Math.max(insets.bottom, 8),
     },
     sectionOuter: {

package/src/screens/conversation_select_recipients/__tests__/conversation_select_direct_message_recipients_screen.test.tsx

@@ -1,83 +0,0 @@
-import { fireEvent, render } from '@testing-library/react-native'
-import React from 'react'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
-import { Log } from '../../../utils/native_adapters/configuration'
-import { ConversationSelectDirectMessageRecipientsScreen } from '../conversation_select_direct_message_recipients_screen'
-
-jest.mock('@react-navigation/native', () => ({
-  ...jest.requireActual('@react-navigation/native'),
-  useNavigation: () => ({ getParent: jest.fn() }),
-}))
-jest.mock('../../../hooks/use_features', () => ({
-  ...jest.requireActual('../../../hooks/use_features'),
-  useFeatures: () => ({ featureEnabled: () => false }),
-}))
-jest.mock('../../../hooks/use_debounced_search_term', () => ({
-  useDebouncedSearchTerm: (term: string) => term,
-}))
-jest.mock('../../../hooks/direct_messages/use_direct_message_conversation_validate', () => ({
-  useDirectMessageConversationValidate: () => ({ warnings: [], validationPending: false }),
-}))
-jest.mock('../../../hooks/direct_messages/use_find_or_create_direct_message_conversation', () => ({
-  useFindOrCreateDirectMessageConversation: () => ({
-    findOrCreateConversation: jest.fn(),
-    directMessageExists: false,
-    isFinding: false,
-    isError: false,
-  }),
-}))
-jest.mock('../../../hooks/direct_messages/use_direct_message_affiliations', () => ({
-  useDirectMessageAffiliations: () => ({
-    groups: new Map(),
-    teams: new Map(),
-    resultsDescription: null,
-  }),
-}))
-jest.mock('../../../hooks/direct_messages/use_direct_message_candidates', () => ({
-  useDirectMessageCandidates: (term: string, { throwOnError = true } = {}) => {
-    if (term && throwOnError) throw new Error('Network request failed')
-    return { data: undefined, isFetching: false, isError: term.length > 0 }
-  },
-}))
-jest.mock('../../../components/display/action_button', () => ({ ActionButton: () => null }))
-jest.mock('../../../components/display/keyboard_view', () => ({
-  ...jest.requireActual('../../../components/display/keyboard_view'),
-  KeyboardView: ({ children }: { children: React.ReactNode }) => children,
-}))
-
-const renderScreen = () =>
-  render(
-    <SafeAreaProvider
-      initialMetrics={{
-        frame: { x: 0, y: 0, width: 390, height: 844 },
-        insets: { top: 0, left: 0, right: 0, bottom: 0 },
-      }}
-    >
-      <ConversationSelectDirectMessageRecipientsScreen route={{ params: {} } as never} />
-    </SafeAreaProvider>
-  )
-
-describe('ConversationSelectDirectMessageRecipientsScreen', () => {
-  let reportError: jest.SpyInstance
-  let consoleError: jest.SpyInstance
-
-  beforeEach(() => {
-    reportError = jest.spyOn(Log, 'reportError').mockImplementation(() => {})
-    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {})
-  })
-
-  afterEach(() => {
-    reportError.mockRestore()
-    consoleError.mockRestore()
-  })
-
-  it('reports a failed search and shows the banner while keeping the To field', () => {
-    const view = renderScreen()
-
-    fireEvent.changeText(view.getByPlaceholderText('Search'), 'pi')
-
-    expect(view.getByText("Couldn't load people right now. Try again.")).toBeTruthy()
-    expect(view.getByPlaceholderText('Search').props.value).toBe('pi')
-    expect(reportError).toHaveBeenCalledTimes(1)
-  })
-})