@planningcenter/chat-react-native 4.4.1-qa-1036.2 → 4.4.1-qa-staging.42

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,20 +74,27 @@ 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}
-          isError={isError}
-          isPending={isPending}
-          noResults={results.length === 0 && failedTypes.length === 0}
-        />
+        searching ? (
+          <ListEmpty
+            term={term}
+            isError={isError}
+            isPending={isPending}
+            noResults={results.length === 0 && failedTypes.length === 0}
+          />
+        ) : (
+          <View style={styles.prompt}>{prompt}</View>
+        )
       }
       ListFooterComponent={
         <>
@@ -91,7 +108,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={() => {
@@ -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: {

package/src/utils/__tests__/membership_sync_info_text.test.ts

@@ -0,0 +1,15 @@
+import { membershipSyncInfoText } from '../membership_sync_info_text'
+
+describe('membershipSyncInfoText', () => {
+  it('explains membership sync and history visibility for a group', () => {
+    expect(membershipSyncInfoText('the group')).toBe(
+      'This conversation will stay in sync with the group. Members will automatically be added or removed, and new members will see the history.'
+    )
+  })
+
+  it('explains membership sync and history visibility for teams', () => {
+    expect(membershipSyncInfoText('the teams')).toBe(
+      'This conversation will stay in sync with the teams. Members will automatically be added or removed, and new members will see the history.'
+    )
+  })
+})

package/src/utils/index.ts

@@ -8,6 +8,7 @@ export * from './convert_attachments_for_create'
 export * from './destructure_chat_group_graph_id'
 export * from './host_bridge'
 export * from './liquid_glass'
+export * from './membership_sync_info_text'
 export * from './native_adapters'
 export * from './pluralize'
 export * from './conversation_safety_constants'

package/src/utils/membership_sync_info_text.ts

@@ -0,0 +1,3 @@
+export function membershipSyncInfoText(source: string): string {
+  return `This conversation will stay in sync with ${source}. Members will automatically be added or removed, and new members will see the history.`
+}