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

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,