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

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -1,6 +1,6 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StackActions, useNavigation } from '@react-navigation/native'
-import { RefObject, useRef, useState } from 'react'
+import { ReactElement, RefObject, useRef, useState } from 'react'
 import { FlatList, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { Avatar, Badge, Banner, Icon, KeyboardView, Spinner, Text } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
@@ -92,38 +92,31 @@ export function ConversationSelectDirectMessageRecipientsScreen({
 
   return (
     <KeyboardView>
-      {isError && (
-        <Banner
-          appearance="error"
-          description="There was an issue starting the conversation. Please try again."
-          style={styles.errorBanner}
-        />
-      )}
-      <ToField
-        selectedPeople={selectedPeople}
-        searchTerm={searchTerm}
-        onSearchChange={setSearchTerm}
-        onRemove={removePerson}
-        onClear={() => setSelectedPeople(new Map())}
-        searchInputRef={searchInputRef}
-      />
       <View style={styles.candidateResultsContainer}>
-        <ComponentErrorBoundary
-          key={debouncedTerm}
-          fallback={
-            <Banner
-              appearance="error"
-              description="Couldn't load people right now. Try again."
-              style={styles.errorBanner}
-            />
+        <CandidateResults
+          term={debouncedTerm}
+          selectedPeople={selectedPeople}
+          onSelect={selectPerson}
+          header={
+            <>
+              {isError && (
+                <Banner
+                  appearance="error"
+                  description="There was an issue starting the conversation. Please try again."
+                  style={styles.errorBanner}
+                />
+              )}
+              <ToField
+                selectedPeople={selectedPeople}
+                searchTerm={searchTerm}
+                onSearchChange={setSearchTerm}
+                onRemove={removePerson}
+                onClear={() => setSelectedPeople(new Map())}
+                searchInputRef={searchInputRef}
+              />
+            </>
           }
-        >
-          <CandidateResults
-            term={debouncedTerm}
-            selectedPeople={selectedPeople}
-            onSelect={selectPerson}
-          />
-        </ComponentErrorBoundary>
+        />
       </View>
       <ActionButton
         title={buttonText}
@@ -214,53 +207,74 @@ function CandidateResults({
   term,
   selectedPeople,
   onSelect,
+  header,
 }: {
   term: string
   selectedPeople: Map<string, DirectMessageCandidateResource>
   onSelect: (candidate: DirectMessageCandidateResource) => void
+  header: ReactElement
 }) {
   const styles = useStyles()
-  const { data, isFetching } = useDirectMessageCandidates(term)
+  const { data, isFetching, isError } = useDirectMessageCandidates(term, { throwOnError: false })
   const { groups, teams, resultsDescription } = useDirectMessageAffiliations()
 
-  if (term.length < 1) {
-    if (selectedPeople.size > 0) return null
+  const unselectedCandidates = (data?.data ?? []).filter(c => !selectedPeople.has(c.id))
+  const hasTruncated = (data?.meta.totalCount ?? 0) > (data?.data.length ?? 0)
+  const isAtLimit = selectedPeople.size >= MAX_RECIPIENTS
+  const showsResults = term.length >= 1 && !isAtLimit && !isError && unselectedCandidates.length > 0
 
-    return (
-      <View style={styles.emptyState}>
-        <Icon name="churchCenter.people" size={40} style={styles.emptyStateIcon} />
-        <Text style={styles.emptyStateTitle}>Search for people to direct message</Text>
-        <Text variant="secondary" style={styles.emptyStateSubtitle}>
-          Start a conversation with people in your groups and teams.
-        </Text>
-      </View>
-    )
-  }
+  const emptyState = (() => {
+    if (showsResults) return null
 
-  const isAtLimit = selectedPeople.size >= MAX_RECIPIENTS
+    if (term.length < 1) {
+      if (selectedPeople.size > 0) return null
 
-  if (isAtLimit) {
-    return (
-      <View style={styles.emptyState}>
-        <Text variant="secondary" style={styles.emptyStateSubtitle}>
-          You can add up to {MAX_RECIPIENTS} people to a direct message.
-        </Text>
-      </View>
-    )
-  }
+      return (
+        <View style={styles.emptyState}>
+          <Icon name="churchCenter.people" size={40} style={styles.emptyStateIcon} />
+          <Text style={styles.emptyStateTitle}>Search for people to direct message</Text>
+          <Text variant="secondary" style={styles.emptyStateSubtitle}>
+            Start a conversation with people in your groups and teams.
+          </Text>
+        </View>
+      )
+    }
 
-  const unselectedCandidates = (data?.data ?? []).filter(c => !selectedPeople.has(c.id))
-  const hasTruncated = (data?.meta.totalCount ?? 0) > (data?.data.length ?? 0)
+    if (isError) {
+      return (
+        <ComponentErrorBoundary
+          key={term}
+          fallback={
+            <Banner
+              appearance="error"
+              description="Couldn't load people right now. Try again."
+              style={styles.errorBanner}
+            />
+          }
+        >
+          <CandidateSearchError term={term} />
+        </ComponentErrorBoundary>
+      )
+    }
 
-  if (isFetching && unselectedCandidates.length === 0) {
-    return (
-      <View style={styles.emptyState}>
-        <Spinner />
-      </View>
-    )
-  }
+    if (isAtLimit) {
+      return (
+        <View style={styles.emptyState}>
+          <Text variant="secondary" style={styles.emptyStateSubtitle}>
+            You can add up to {MAX_RECIPIENTS} people to a direct message.
+          </Text>
+        </View>
+      )
+    }
+
+    if (isFetching) {
+      return (
+        <View style={styles.emptyState}>
+          <Spinner />
+        </View>
+      )
+    }
 
-  if (!isFetching && unselectedCandidates.length === 0) {
     return (
       <View style={styles.emptyState}>
         <Icon name="general.search" size={32} style={styles.emptyStateIcon} />
@@ -270,13 +284,16 @@ function CandidateResults({
         </Text>
       </View>
     )
-  }
+  })()
 
   return (
     <CandidateList
-      candidates={unselectedCandidates}
-      hasTruncated={hasTruncated}
-      description={resultsDescription}
+      header={header}
+      candidates={showsResults ? unselectedCandidates : []}
+      hasTruncated={showsResults && hasTruncated}
+      description={showsResults ? resultsDescription : null}
+      showsHeading={showsResults}
+      emptyState={emptyState}
       groups={groups}
       teams={teams}
       onSelect={onSelect}
@@ -284,6 +301,11 @@ function CandidateResults({
   )
 }
 
+function CandidateSearchError({ term }: { term: string }) {
+  useDirectMessageCandidates(term)
+  return null
+}
+
 function candidateBadges(candidate: DirectMessageCandidateResource) {
   const badges = []
   if (candidate.directMessagesDisabled) badges.push({ title: 'DMs off' })
@@ -309,16 +331,22 @@ function candidateAffiliationNames(
 }
 
 function CandidateList({
+  header,
   candidates,
   hasTruncated,
   description,
+  showsHeading,
+  emptyState,
   groups,
   teams,
   onSelect,
 }: {
+  header: ReactElement
   candidates: DirectMessageCandidateResource[]
   hasTruncated: boolean
   description: string | null
+  showsHeading: boolean
+  emptyState: ReactElement | null
   groups: Map<number, string>
   teams: Map<number, string>
   onSelect: (candidate: DirectMessageCandidateResource) => void
@@ -330,6 +358,7 @@ function CandidateList({
   return (
     <FlatList<DirectMessageCandidateResource>
       data={available}
+      contentInsetAdjustmentBehavior="automatic"
       keyboardShouldPersistTaps="handled"
       keyExtractor={item => item.id}
       renderItem={({ item }) => (
@@ -340,7 +369,13 @@ function CandidateList({
           onSelect={() => onSelect(item)}
         />
       )}
-      ListHeaderComponent={<ResultsHeading description={description} />}
+      ListHeaderComponent={
+        <>
+          {header}
+          {showsHeading && <ResultsHeading description={description} />}
+        </>
+      }
+      ListEmptyComponent={emptyState}
       ListFooterComponent={
         <>
           {dmDisabled.length > 0 && (

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -60,6 +60,7 @@ export const ConversationSelectGroupRecipientsScreen = ({
 
   return (
     <SectionList<GroupsGroupResource, GroupsSection>
+      contentInsetAdjustmentBehavior="automatic"
       sections={sections}
       keyExtractor={item => item.id.toString()}
       stickySectionHeadersEnabled={false}

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -32,6 +32,7 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
 
   return (
     <FlatList
+      contentInsetAdjustmentBehavior="automatic"
       data={serviceTypes}
       keyExtractor={item => item.id.toString()}
       contentContainerStyle={styles.contentContainer}

package/src/screens/get_help_screen.tsx

@@ -1,6 +1,6 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { useCallback, useMemo } from 'react'
-import { Alert, Linking, StyleSheet, View } from 'react-native'
+import { Alert, Linking, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, PressableRow, Text, TextInlineButton } from '../components'
 import { useApiGet, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
@@ -56,7 +56,7 @@ export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
   }, [navigation])
 
   return (
-    <View style={[styles.container]}>
+    <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container}>
       {appSpecificHelpUrls.length > 0 && (
         <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
           How-to articles
@@ -90,7 +90,7 @@ export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
           to the development team.
         </Text>
       </View>
-    </View>
+    </ScrollView>
   )
 }
 
@@ -145,7 +145,7 @@ const useStyles = () => {
 
   return StyleSheet.create({
     container: {
-      flex: 1,
+      flexGrow: 1,
     },
     text: {
       paddingVertical: 4,

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, StyleSheet, View } from 'react-native'
+import { Platform, ScrollView, 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 (
-    <View style={styles.container}>
+    <ScrollView contentInsetAdjustmentBehavior="automatic" 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>
-    </View>
+    </ScrollView>
   )
 }
 

package/src/screens/notification_settings_screen.tsx

@@ -123,6 +123,7 @@ 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, StyleSheet, View, type ViewStyle } from 'react-native'
+import { Image, ScrollView, 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 (
-    <View style={styles.container}>
+    <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container}>
       <View style={styles.section}>
         <Heading variant="h2" style={styles.sectionHeading}>
           {sectionTitle}
@@ -64,7 +64,7 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
           </PressableRow>
         ))}
       </View>
-    </View>
+    </ScrollView>
   )
 }
 
@@ -118,7 +118,7 @@ const PressableRow = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flexGrow: 1,
   },
   section: {
     paddingTop: 24,

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

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

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

@@ -49,9 +49,13 @@ 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} />
+  const list = () => (
+    <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} {...slots} />
+  )
   const view = render(list())
   const rerenderWith = (next: Partial<SearchState>) => {
     mockUseSearchResults.mockReturnValue(searchState(next))
@@ -130,7 +134,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()} />
+      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} {...slots} />
     )
 
     fireEvent.press(view.getByLabelText(/^Message 2/))

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { ReactElement, 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,9 +23,17 @@ 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 }: SearchResultsListProps) {
+export function SearchResultsList({
+  term,
+  onSelect,
+  onSettled,
+  header,
+  prompt,
+}: SearchResultsListProps) {
   const {
     results,
     failedTypes,
@@ -36,9 +44,10 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
     hasNextPage,
     isFetchingNextPage,
   } = useSearchResults(term)
-  const conversationResults = results.filter(isConversationResult)
-  const messageResults = results.filter(isMessageResult)
-  const settled = !isPending && !isError
+  const searching = term.trim().length > 0
+  const conversationResults = searching ? results.filter(isConversationResult) : []
+  const messageResults = searching ? results.filter(isMessageResult) : []
+  const settled = searching && !isPending && !isError
 
   const settledTermRef = useRef<string | undefined>(undefined)
 
@@ -56,6 +65,7 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
     <FlatList
       data={messageResults}
       keyExtractor={item => item.id}
+      contentInsetAdjustmentBehavior="automatic"
       keyboardShouldPersistTaps="handled"
       keyboardDismissMode="on-drag"
       contentContainerStyle={styles.content}
@@ -64,16 +74,20 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
       )}
       ListHeaderComponent={
         <>
+          {header}
           {conversationResults.length > 0 && (
             <ConversationResults results={conversationResults} onSelect={onSelect} />
           )}
-          {failedTypes.includes('conversation') && <SectionFailure type="conversation" />}
+          {searching && 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}
@@ -91,7 +105,7 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
               Try again
             </TextButton>
           )}
-          {failedTypes.includes('message') && <SectionFailure type="message" />}
+          {searching && failedTypes.includes('message') && <SectionFailure type="message" />}
         </>
       }
       onEndReached={() => {
@@ -104,12 +118,15 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
 
 interface ListEmptyProps {
   term: string
+  prompt: ReactElement
   isError: boolean
   isPending: boolean
   noResults: boolean
 }
 
-function ListEmpty({ term, isError, isPending, noResults }: ListEmptyProps) {
+function ListEmpty({ term, prompt, isError, isPending, noResults }: ListEmptyProps) {
+  if (term.trim().length === 0) return <View style={styles.prompt}>{prompt}</View>
+
   if (isError) {
     return <Banner appearance="error" description={SEARCH_ERROR_MESSAGE} style={styles.banner} />
   }
@@ -149,6 +166,10 @@ 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, ScrollView, StyleSheet, View } from 'react-native'
+import { Keyboard, StyleSheet, View } from 'react-native'
 import { KeyboardView } from '../../components'
 import {
   composeOptions,
@@ -64,19 +64,13 @@ export function SearchScreen() {
   return (
     <KeyboardView>
       <View style={styles.container} testID="search-screen">
-        <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>
-        )}
+        <SearchResultsList
+          term={debouncedTerm}
+          onSelect={openResult}
+          onSettled={publishSearch}
+          header={<SearchField term={term} onChange={setTerm} />}
+          prompt={<SearchPromptBlankState />}
+        />
       </View>
     </KeyboardView>
   )
@@ -86,8 +80,4 @@ 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, StyleSheet, View } from 'react-native'
+import { Platform, ScrollView, 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,29 +28,31 @@ export function SettingsScreen({}: SettingsScreenProps) {
 
   return (
     <View style={styles.container}>
-      <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}
-            />
+      <ScrollView contentInsetAdjustmentBehavior="automatic">
+        <View style={styles.sectionOuter}>
+          <View style={styles.sectionHeader}>
+            <Heading variant="h2">Messages</Heading>
           </View>
-        )}
-        <NavRow label="Notification settings" onPress={handleNotificationSettings} />
-        {appName !== 'services' && <NavRow label="Get help" onPress={handleGetHelp} />}
-      </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>
+      </ScrollView>
       <View style={styles.footer}>
         <VersionFooter />
       </View>
@@ -90,8 +92,6 @@ const useStyles = () => {
       flex: 1,
     },
     footer: {
-      flex: 1,
-      justifyContent: 'flex-end',
       paddingBottom: Math.max(insets.bottom, 8),
     },
     sectionOuter: {