@planningcenter/chat-react-native 4.3.0-rc.9 → 4.3.0

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

@@ -0,0 +1,147 @@
+import React from 'react'
+import { FlatList, StyleSheet, View } from 'react-native'
+import { Banner, Spinner, Text, TextButton } from '../../../components'
+import { useSearchResults } from '../../../hooks/use_search_results'
+import type {
+  ConversationSearchResultResource,
+  MessageSearchResultResource,
+  SearchResultResource,
+} from '../../../types/resources/search_result'
+import { ConversationResults } from './conversation_results'
+import { MessageResultRow } from './message_result_row'
+import { ResultsSection } from './results_section'
+import { NoResultsBlankState } from './search_blank_states'
+
+const SEARCH_ERROR_MESSAGE = "Couldn't search right now. Try again."
+
+interface SearchResultsListProps {
+  term: string
+  onSelect: (result: SearchResultResource) => void
+}
+
+export function SearchResultsList({ term, onSelect }: SearchResultsListProps) {
+  const {
+    results,
+    failedTypes,
+    isPending,
+    isError,
+    isFetchNextPageError,
+    loadMore,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useSearchResults(term)
+  const conversationResults = results.filter(isConversationResult)
+  const messageResults = results.filter(isMessageResult)
+
+  return (
+    <FlatList
+      data={messageResults}
+      keyExtractor={item => item.id}
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="on-drag"
+      contentContainerStyle={styles.content}
+      renderItem={({ item }) => <MessageResultRow result={item} onPress={onSelect} />}
+      ListHeaderComponent={
+        <>
+          {conversationResults.length > 0 && (
+            <ConversationResults results={conversationResults} onSelect={onSelect} />
+          )}
+          {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}
+        />
+      }
+      ListFooterComponent={
+        <>
+          {isFetchingNextPage && (
+            <View accessibilityLabel="Loading more results" style={styles.loading}>
+              <Spinner />
+            </View>
+          )}
+          {isFetchNextPageError && !isFetchingNextPage && (
+            <TextButton onPress={loadMore} style={styles.retry}>
+              Try again
+            </TextButton>
+          )}
+          {failedTypes.includes('message') && <SectionFailure type="message" />}
+        </>
+      }
+      onEndReached={() => {
+        if (hasNextPage && !isFetchingNextPage && !isFetchNextPageError) loadMore()
+      }}
+      onEndReachedThreshold={0.5}
+    />
+  )
+}
+
+interface ListEmptyProps {
+  term: string
+  isError: boolean
+  isPending: boolean
+  noResults: boolean
+}
+
+function ListEmpty({ term, isError, isPending, noResults }: ListEmptyProps) {
+  if (isError) {
+    return <Banner appearance="error" description={SEARCH_ERROR_MESSAGE} style={styles.banner} />
+  }
+
+  if (isPending) {
+    return (
+      <View accessibilityLabel="Loading results" style={styles.loading}>
+        <Spinner />
+      </View>
+    )
+  }
+
+  if (noResults) return <NoResultsBlankState term={term} />
+
+  return null
+}
+
+function SectionFailure({ type }: { type: SearchResultResource['type'] }) {
+  return (
+    <Text accessibilityRole="alert" variant="secondary" style={styles.sectionFailure}>
+      Couldn&rsquo;t load {type}s.
+    </Text>
+  )
+}
+
+function isConversationResult(
+  result: SearchResultResource
+): result is ConversationSearchResultResource {
+  return result.type === 'conversation'
+}
+
+function isMessageResult(result: SearchResultResource): result is MessageSearchResultResource {
+  return result.type === 'message'
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flexGrow: 1,
+  },
+  banner: {
+    margin: 16,
+  },
+  loading: {
+    alignItems: 'center',
+    paddingVertical: 16,
+  },
+  retry: {
+    alignSelf: 'center',
+    paddingVertical: 16,
+  },
+  sectionFailure: {
+    fontSize: 14,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+})

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { Text } from '../../../components/display'
+import { useTheme } from '../../../hooks'
+import type { SnippetSegment } from '../../../types/resources/search_result'
+
+interface SnippetProps {
+  segments: SnippetSegment[]
+}
+
+export function Snippet({ segments }: SnippetProps) {
+  const styles = useStyles()
+
+  return (
+    <>
+      {segments.map((segment, index) => (
+        <Text key={index} variant="tertiary" style={segment.match && styles.match}>
+          {segment.text}
+        </Text>
+      ))}
+    </>
+  )
+}
+
+export function plainSnippetText(segments: SnippetSegment[]) {
+  return segments.map(segment => segment.text).join('')
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    match: {
+      color: colors.interaction,
+    },
+  })
+}

package/src/screens/search/search_screen.tsx

@@ -3,6 +3,7 @@ import {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
+import { noop } from 'lodash'
 import React, { useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { KeyboardView } from '../../components'
@@ -10,8 +11,10 @@ import {
   composeOptions,
   withMinimalBack,
 } from '../../components/display/platform_modal_header_buttons'
+import { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'
 import { SearchPromptBlankState } from './components/search_blank_states'
 import { SearchField } from './components/search_field'
+import { SearchResultsList } from './components/search_results_list'
 
 export const SearchScreenOptions = ({
   navigation,
@@ -23,12 +26,17 @@ export const SearchScreenOptions = ({
 
 export function SearchScreen() {
   const [term, setTerm] = useState('')
+  const debouncedTerm = useDebouncedSearchTerm(term)
 
   return (
     <KeyboardView>
       <View style={styles.container} testID="search-screen">
         <SearchField term={term} onChange={setTerm} />
-        <SearchPromptBlankState />
+        {debouncedTerm.length > 0 ? (
+          <SearchResultsList key={debouncedTerm} term={debouncedTerm} onSelect={noop} />
+        ) : (
+          <SearchPromptBlankState />
+        )}
       </View>
     </KeyboardView>
   )

package/src/utils/client/__tests__/request_helpers.test.ts

@@ -0,0 +1,40 @@
+import { instrumentedFetch } from '../instrumented_fetch'
+import { makeRequest } from '../request_helpers'
+
+jest.mock('../instrumented_fetch', () => ({ instrumentedFetch: jest.fn() }))
+
+const mockFetch = jest.mocked(instrumentedFetch)
+
+const fetchedUrl = () => new URL(mockFetch.mock.calls[0][0])
+
+const get = (data: Record<string, unknown>) =>
+  makeRequest({ action: 'GET', url: 'https://api.example.com/search_results', data, headers: {} })
+
+describe('makeRequest', () => {
+  beforeEach(() => {
+    mockFetch.mockResolvedValue(new Response('{}', { status: 200 }))
+  })
+
+  afterEach(() => {
+    mockFetch.mockReset()
+  })
+
+  it('serializes data as snake_case query params', async () => {
+    await get({ q: 'potluck', perPage: 20 })
+
+    const { searchParams } = fetchedUrl()
+    expect(searchParams.get('q')).toBe('potluck')
+    expect(searchParams.get('per_page')).toBe('20')
+  })
+
+  it.each(['Pastor Bob', 'café', '#potluck', 'Q&A', '100%'])(
+    'sends %p so the server reads it back unchanged',
+    async term => {
+      await get({ q: term })
+
+      const { search, searchParams } = fetchedUrl()
+      expect(searchParams.get('q')).toBe(term)
+      expect(() => decodeURIComponent(search)).not.toThrow()
+    }
+  )
+})

package/src/utils/client/request_helpers.ts

@@ -33,7 +33,7 @@ export const makeRequest = ({ action = 'GET', url, data = {}, headers = {} }: Ma
 
   const body = ['POST', 'PATCH'].includes(action) ? JSON.stringify(data) : undefined
 
-  return instrumentedFetch(decodeURIComponent(uri.toString()), {
+  return instrumentedFetch(uri.toString(), {
     method: action,
     headers,
     body,