@planningcenter/chat-react-native 3.38.0-rc.1 → 3.38.0-rc.11

package/src/hooks/use_conversation_messages.ts

@@ -1,128 +1,28 @@
-import {
-  AnyUseSuspenseInfiniteQueryOptions,
-  InfiniteData,
-  useQueryClient,
-  useSuspenseInfiniteQuery,
-  useSuspenseQueries,
-} from '@tanstack/react-query'
-import { useCallback, useMemo } from 'react'
-import { useConversationContext } from '../contexts/conversation_context'
-import { ApiCollection, MessageResource } from '../types'
-import {
-  anchoredSeedPageParams,
-  MessagesPageParam,
-  newerPageParam,
-  olderPageParam,
-  sortAndFilterMessages,
-} from '../utils/conversation_messages'
+import { useMemo } from 'react'
+import { MessageResource } from '../types'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
-import { useApiClient } from './use_api_client'
-import { throwResponseError } from './use_suspense_api'
-
-type Args = { conversation_id: number; reply_root_id?: string | null }
-
-export type ConversationMessagesOptions = Omit<
-  AnyUseSuspenseInfiniteQueryOptions,
-  | 'getNextPageParam'
-  | 'getPreviousPageParam'
-  | 'initialData'
-  | 'initialPageParam'
-  | 'queryFn'
-  | 'queryKey'
->
+import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
 export const useConversationMessages = (
-  { conversation_id, reply_root_id }: Args,
-  opts?: ConversationMessagesOptions
+  { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string | null },
+  opts?: SuspensePaginatorOptions
 ) => {
-  const apiClient = useApiClient()
-  const { initialMessageId } = useConversationContext()
-  const anchored = !reply_root_id && !!initialMessageId
-
-  const requestArgs = useMemo(
-    () => getMessagesRequestArgs({ conversation_id, reply_root_id }),
-    [conversation_id, reply_root_id]
+  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(
+    getMessagesRequestArgs({ conversation_id, reply_root_id }),
+    opts
   )
-  const queryKey = useMemo(
-    () => getMessagesQueryKey({ conversation_id, reply_root_id }),
-    [conversation_id, reply_root_id]
-  )
-
-  const fetchPage = (pageParam: MessagesPageParam) => {
-    const data = {
-      ...requestArgs.data,
-      ...(pageParam.where ? { where: pageParam.where } : {}),
-      ...(pageParam.order ? { order: pageParam.order } : {}),
-    }
-    return apiClient.chat
-      .get<ApiCollection<MessageResource>>({ url: requestArgs.url, data })
-      .catch(throwResponseError)
-  }
-
-  const seedPageParams = anchored ? anchoredSeedPageParams(initialMessageId) : []
-  const seedQueries = useSuspenseQueries({
-    queries: seedPageParams.map((pageParam, index) => ({
-      queryKey: [...queryKey, 'seed', index],
-      queryFn: () => fetchPage(pageParam),
-      staleTime: Infinity,
-      gcTime: 0,
-    })),
-  })
-
-  const initialData: InfiniteData<ApiCollection<MessageResource>, MessagesPageParam> | undefined =
-    anchored
-      ? {
-          pages: seedQueries.map(q => q.data),
-          pageParams: seedPageParams,
-        }
-      : undefined
-
-  const initialPageParam: MessagesPageParam = anchored ? seedPageParams[0] : {}
-
-  const {
-    data,
-    refetch,
-    isRefetching,
-    fetchNextPage,
-    hasNextPage,
-    fetchPreviousPage,
-    hasPreviousPage,
-    isFetchingPreviousPage,
-  } = useSuspenseInfiniteQuery<
-    ApiCollection<MessageResource>,
-    Response,
-    InfiniteData<ApiCollection<MessageResource>, MessagesPageParam>,
-    typeof queryKey,
-    MessagesPageParam
-  >({
-    queryKey,
-    queryFn: ({ pageParam }) => fetchPage(pageParam),
-    initialPageParam,
-    initialData,
-    getNextPageParam: olderPageParam,
-    getPreviousPageParam: anchored ? newerPageParam : () => undefined,
-    ...(opts || {}),
-    ...(anchored ? { staleTime: Infinity, refetchOnMount: false } : {}),
-  })
-
-  const messages = useMemo(() => sortAndFilterMessages(data.pages), [data.pages])
-
-  const queryClient = useQueryClient()
-  const cancelFetchNewerMessages = useCallback(
-    () => queryClient.cancelQueries({ queryKey }),
-    [queryClient, queryKey]
+  const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
+  const messages = useMemo(
+    () =>
+      data
+        .filter(
+          message =>
+            (!message.deletedAt || message.replyRootId) &&
+            (message.attachments?.length || message.text?.length)
+        )
+        .sort((a, b) => -a.id.localeCompare(b.id)),
+    [data]
   )
 
-  return {
-    messages,
-    refetch,
-    isRefetching,
-    fetchOlderMessages: fetchNextPage,
-    hasMoreOlderMessages: hasNextPage,
-    fetchNewerMessages: fetchPreviousPage,
-    hasMoreNewerMessages: hasPreviousPage,
-    isFetchingNewerMessages: isFetchingPreviousPage,
-    cancelFetchNewerMessages,
-    queryKey,
-  }
+  return { messages, refetch, isRefetching, fetchNextPage, queryKey }
 }

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -12,7 +12,6 @@ import {
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
   getThreadedMessagesQueryKey,
-  hasUnloadedNewerPages,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
@@ -53,10 +52,10 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       }
     }
 
-    if (e.event === 'message.updated' || !hasUnloadedNewerPages(queryClient, messagesQueryKey)) {
-      updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
-    }
+    // Update the main conversation cache
+    updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
 
+    // If message has a reply_root_id, also update the threaded cache
     if (data.reply_root_id) {
       const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
         conversationId,

package/src/hooks/use_conversations_actions.ts

@@ -98,21 +98,6 @@ export const useConversationsMute = ({ conversation }: { conversation: Conversat
   }
 }
 
-export const useConversationsMarkReadUpTo = ({ conversationId }: { conversationId: number }) => {
-  const apiClient = useApiClient()
-
-  return useMutation({
-    mutationKey: ['markReadUpTo', conversationId],
-    mutationFn: async ({ sortKey }: { sortKey: string }) =>
-      apiClient.chat.post({
-        url: `/me/conversations/${conversationId}/mark_read_up_to`,
-        data: {
-          data: { type: 'Conversation', attributes: { sort_key: sortKey } },
-        },
-      }),
-  })
-}
-
 export const useMarkAllRead = () => {
   const apiClient = useApiClient()
   const { args } = useConversationsContext()

package/src/hooks/use_features.ts

@@ -40,7 +40,6 @@ export const availableFeatures = {
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
   granular_notifications_ui: 'ROLLOUT_granular_notification_preferences_ui',
   custom_conversation_avatars: 'ROLLOUT_custom_conversation_avatars',
-  jump_to_unread: 'ROLLOUT_jump_to_unread',
   conversation_safety_lock: 'ROLLOUT_conversation_safety_lock',
   video_moderation: 'ROLLOUT_MOBILE_video_moderation',
 } as const satisfies Record<string, `ROLLOUT_${string}`>

package/src/hooks/use_mark_latest_message_read.ts

@@ -1,19 +1,15 @@
 import { debounce } from 'lodash'
 import { useEffect, useMemo, useRef } from 'react'
-import { useConversationContext } from '../contexts/conversation_context'
 import { ConversationResource, MessageResource } from '../types'
 import { useAppState } from './use_app_state'
 import { useConversationsMarkRead } from './use_conversations_actions'
-import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
 
 interface Props {
   conversation: ConversationResource
-  messages?: MessageResource[]
+  messages: MessageResource[]
 }
 
 export function useMarkLatestMessageRead({ conversation }: Props) {
-  const { jumpToUnreadActive } = useJumpToUnreadGates()
-  const { currentPageReplyRootId, atEndOfMessageHistory } = useConversationContext()
   const firedOnce = useRef<boolean>(false)
   const { markRead } = useConversationsMarkRead({ conversation })
   const debouncedMarkRead = useMemo(
@@ -29,20 +25,10 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
 
   useEffect(() => {
     if (!isActive || !shouldMarkRead) return
-    if (currentPageReplyRootId) return
-    if (jumpToUnreadActive && !atEndOfMessageHistory) return
 
     firedOnce.current = true
 
     debouncedMarkRead(true)
     // keeping unreadReactionCount in the dependency array to watch for changes
-  }, [
-    debouncedMarkRead,
-    isActive,
-    shouldMarkRead,
-    unreadReactionCount,
-    currentPageReplyRootId,
-    jumpToUnreadActive,
-    atEndOfMessageHistory,
-  ])
+  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReactionCount])
 }

package/src/hooks/use_preview_avatar_diameter.ts

@@ -0,0 +1,12 @@
+import { useWindowDimensions } from 'react-native'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../utils'
+import { useFontScale } from './use_font_scale'
+
+const VIEWPORT_FRACTION = 0.22
+const BASE_DIAMETER = 80
+
+export function usePreviewAvatarDiameter() {
+  const { width } = useWindowDimensions()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
+  return Math.min(BASE_DIAMETER * fontScale, width * VIEWPORT_FRACTION)
+}

package/src/hooks/use_suspense_api.ts

@@ -90,7 +90,7 @@ export const useSuspensePaginator = <T extends ResourceObject>(
   return { ...query, data, totalCount }
 }
 
-export const throwResponseError = (error: unknown) => {
+const throwResponseError = (error: unknown) => {
   if (error instanceof Response) {
     throw new ResponseError(error as FailedResponse)
   }

package/src/jest.ts

@@ -16,6 +16,6 @@
  */
 export const jestTransformPackages = [
   '@planningcenter/chat-react-native',
+  '@planningcenter/emoji-keyboard',
   '@fortawesome',
-  'rn-emoji-keyboard',
 ]

package/src/screens/avatar_picker/avatar_picker_screen.tsx

@@ -13,6 +13,8 @@ import {
   type AvatarUpdatePayload,
 } from '../../hooks/use_conversation_avatar_update'
 import { useFontScale } from '../../hooks/use_font_scale'
+import { usePreviewAvatarDiameter } from '../../hooks/use_preview_avatar_diameter'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'
 import {
   avatarPickerReducer,
@@ -71,6 +73,7 @@ function EditModeContent({ conversationId }: { conversationId: number }) {
   const navigation = useNavigation()
   const { data: conversation } = useConversation({ conversation_id: conversationId })
   const mutation = useConversationAvatarUpdate({ conversationId })
+  const previewDiameter = usePreviewAvatarDiameter()
 
   const [state, dispatch] = useReducer(avatarPickerReducer, conversation, initAvatarPickerState)
 
@@ -110,7 +113,14 @@ function EditModeContent({ conversationId }: { conversationId: number }) {
           </FormSheet.HeaderTextButton>
         </>
       }
-      fallbackPreview={<ConversationAvatar conversation={conversation} size="2xl" />}
+      fallbackPreview={
+        <ConversationAvatar
+          conversation={conversation}
+          size="2xl"
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          style={{ width: previewDiameter, height: previewDiameter }}
+        />
+      }
     />
   )
 }
@@ -187,7 +197,10 @@ function AvatarPickerFormSheet({
         activeTab={state.activeTab}
         onTabPress={tab => dispatch({ type: 'SELECT_TAB', payload: tab })}
         renderItem={({ item }) => (
-          <Text style={[styles.tabLabel, item === state.activeTab && styles.tabLabelActive]}>
+          <Text
+            style={[styles.tabLabel, item === state.activeTab && styles.tabLabelActive]}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          >
             {TAB_LABELS[item]}
           </Text>
         )}
@@ -226,7 +239,15 @@ function AvatarPickerFormSheet({
 
 function EmptyAvatarPlaceholder() {
   const styles = useStyles()
-  return <View style={styles.emptyAvatarPlaceholder} />
+  const diameter = usePreviewAvatarDiameter()
+  return (
+    <View
+      style={[
+        styles.emptyAvatarPlaceholder,
+        { width: diameter, height: diameter, borderRadius: diameter / 2 },
+      ]}
+    />
+  )
 }
 
 type ValidAvatarPickerState = AvatarPickerState &
@@ -264,9 +285,7 @@ function buildPayload(state: AvatarPickerState): AvatarUpdatePayload | null {
 
 const useStyles = () => {
   const { colors } = useTheme()
-  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })
-  const uncappedFontScale = useFontScale()
-  const emptyAvatarDiameter = 80 * uncappedFontScale
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
 
   return StyleSheet.create({
     formSheetRoot: {
@@ -301,9 +320,6 @@ const useStyles = () => {
       borderTopColor: colors.borderColorDefaultBase,
     },
     emptyAvatarPlaceholder: {
-      width: emptyAvatarDiameter,
-      height: emptyAvatarDiameter,
-      borderRadius: emptyAvatarDiameter / 2,
       borderWidth: 2,
       borderStyle: 'dashed',
       borderColor: colors.borderColorDefaultBase,

package/src/screens/avatar_picker/avatar_preview.tsx

@@ -3,6 +3,8 @@ import { StyleSheet, View } from 'react-native'
 import { EmojiAvatar } from '../../components/display/emoji_avatar'
 import { IconAvatar } from '../../components/display/icon_avatar'
 import AvatarPrimitive from '../../components/primitive/avatar_primitive'
+import { usePreviewAvatarDiameter } from '../../hooks/use_preview_avatar_diameter'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import type { AvatarPickerState } from './avatar_picker_state'
 
 interface AvatarPreviewProps {
@@ -10,18 +12,24 @@ interface AvatarPreviewProps {
   fallback: React.ReactNode
 }
 
-function getPreviewNode(state: AvatarPickerState): React.ReactNode {
+function getPreviewNode(state: AvatarPickerState, diameter: number): React.ReactNode {
+  const sizeProps = {
+    size: '2xl',
+    maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
+    style: { width: diameter, height: diameter },
+  } as const
+
   switch (state.selectedType) {
     case 'icon':
       if (!state.selectedKey) return null
-      return <IconAvatar iconKey={state.selectedKey} color={state.selectedColor} size="2xl" />
+      return <IconAvatar iconKey={state.selectedKey} color={state.selectedColor} {...sizeProps} />
     case 'emoji':
       if (!state.selectedKey) return null
-      return <EmojiAvatar emoji={state.selectedKey} color={state.selectedColor} size="2xl" />
+      return <EmojiAvatar emoji={state.selectedKey} color={state.selectedColor} {...sizeProps} />
     case 'image':
       if (!state.imagePreviewUri) return null
       return (
-        <AvatarPrimitive.Root size="2xl">
+        <AvatarPrimitive.Root {...sizeProps}>
           <AvatarPrimitive.Mask>
             <AvatarPrimitive.Image sourceUri={state.imagePreviewUri} />
           </AvatarPrimitive.Mask>
@@ -33,7 +41,8 @@ function getPreviewNode(state: AvatarPickerState): React.ReactNode {
 }
 
 export function AvatarPreview({ state, fallback }: AvatarPreviewProps) {
-  const preview = getPreviewNode(state)
+  const diameter = usePreviewAvatarDiameter()
+  const preview = getPreviewNode(state, diameter)
   return <View style={styles.container}>{preview ?? fallback}</View>
 }
 

package/src/screens/avatar_picker/emoji_tab.tsx

@@ -1,15 +1,11 @@
+import { EmojiKeyboard, emojisByCategory, type EmojiType } from '@planningcenter/emoji-keyboard'
 import React, { useCallback } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { EmojiKeyboard, type EmojiType, type EmojisByCategory } from 'rn-emoji-keyboard'
-// rn-emoji-keyboard exposes no public exclusion API, so we reach into its
-// internal src/ tree for the emoji JSON. Version is pinned in package.json
-// — verify this path still resolves before bumping rn-emoji-keyboard.
-import emojiData from 'rn-emoji-keyboard/src/assets/emojis.json'
 import { useTheme } from '../../hooks'
 
 const BLOCKED_EMOJIS = new Set(['🖕'])
 
-const filteredEmojis = (emojiData as EmojisByCategory[]).map(category => ({
+const filteredEmojis = emojisByCategory.map(category => ({
   ...category,
   data: category.data.filter(e => !BLOCKED_EMOJIS.has(e.emoji)),
 }))
@@ -57,6 +53,7 @@ export function EmojiTab({ onEmojiSelect }: EmojiTabProps) {
         categoryPosition="top"
         emojisByCategory={filteredEmojis}
         onEmojiSelected={handleEmojiSelected}
+        hideHeader
         enableSearchBar
         enableRecentlyUsed
         theme={emojiTheme}

package/src/screens/avatar_picker/upload_tab.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react'
 import { Alert, StyleSheet, View } from 'react-native'
 import { Button } from '../../components'
 import { useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import { ImagePicker } from '../../utils/native_adapters'
 import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'
 
@@ -43,6 +44,7 @@ export function UploadTab({ imagePreviewUri, onImageSelect }: UploadTabProps) {
         variant="outline"
         appearance="interaction"
         size="md"
+        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
       />
     </View>
   )

package/src/screens/conversation_details_screen.tsx

@@ -49,8 +49,10 @@ import {
   useConversationUpdate,
 } from '../hooks/use_conversation'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
+import { usePreviewAvatarDiameter } from '../hooks/use_preview_avatar_diameter'
 import { type ConversationResource, MemberResource, isDefined } from '../types'
 import { GroupResource } from '../types/resources/group_resource'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../utils'
 import { genderDisplayLabel } from '../utils/gender_display_label'
 import { tokens } from '../vendor/tapestry/tokens'
 // =========================================
@@ -634,10 +636,16 @@ function AvatarCard({
   onPress: () => void
 }) {
   const styles = useStyles()
+  const diameter = usePreviewAvatarDiameter()
 
   return (
     <View style={styles.avatarCard}>
-      <ConversationAvatar conversation={conversation} size="2xl" />
+      <ConversationAvatar
+        conversation={conversation}
+        size="2xl"
+        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+        style={{ width: diameter, height: diameter }}
+      />
       <Button
         title="Update avatar"
         iconNameLeft="general.pencil"
@@ -645,6 +653,7 @@ function AvatarCard({
         variant="outline"
         appearance="interaction"
         size="sm"
+        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
       />
     </View>
   )

package/src/screens/conversation_filter_recipients/components/header_row.tsx

@@ -24,6 +24,7 @@ export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowPr
   const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
 
   const { serviceTypeName, teamIdsForServiceType } = data
+  const displayName = serviceTypeName ?? 'No service type'
   const { team_ids: currentTeamIds = [] } = route.params
 
   const newTeamIdsAdded = [...new Set([...currentTeamIds, ...teamIdsForServiceType])]
@@ -34,7 +35,7 @@ export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowPr
   const selectLabel = allTeamsSelected ? 'Deselect' : 'Select'
 
   const headingAccessibilityHint = `${pluralize(teamIdsForServiceType.length, 'team')} available to select`
-  const selectAllAccessibilityLabel = `${selectLabel} ${pluralize(teamIdsForServiceType.length, 'team')} for ${serviceTypeName}`
+  const selectAllAccessibilityLabel = `${selectLabel} ${pluralize(teamIdsForServiceType.length, 'team')} for ${displayName}`
 
   const handleSelectAll = () => {
     setTeamFilters({
@@ -53,7 +54,7 @@ export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowPr
           nativeID={nativeID}
           accessibilityHint={headingAccessibilityHint}
         >
-          {serviceTypeName}
+          {displayName}
         </Heading>
       </View>
 

package/src/screens/conversation_filter_recipients/hooks/__tests__/use_service_types_with_teams.test.ts

@@ -0,0 +1,108 @@
+import type { TeamResponseItem } from '../../../../types'
+import { decorateTeamResponseItems } from '../use_service_types_with_teams'
+
+const makeTeam = (
+  overrides: Partial<TeamResponseItem> & { teamId: number; teamName: string }
+): TeamResponseItem => ({
+  name: overrides.teamName,
+  value: {
+    teamId: overrides.teamId,
+    serviceTypeId: overrides.value?.serviceTypeId ?? 0,
+    serviceTypeIds: overrides.value?.serviceTypeIds ?? [],
+  },
+  serviceTypeName: overrides.serviceTypeName ?? '',
+  serviceTypeNames: overrides.serviceTypeNames ?? [],
+  serviceTypeAcronyms: overrides.serviceTypeAcronyms ?? [],
+  teamName: overrides.teamName,
+  order: overrides.order ?? [0, '', overrides.teamName],
+})
+
+describe('decorateTeamResponseItems', () => {
+  it('groups teams under their service types', () => {
+    const items = [
+      makeTeam({
+        teamId: 1,
+        teamName: 'Worship',
+        value: { teamId: 1, serviceTypeId: 10, serviceTypeIds: [10] },
+        serviceTypeNames: ['Sunday Morning'],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items)
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ id: 10, name: 'Sunday Morning', teams: [{ id: 1 }] })
+  })
+
+  it('gives each team without a service type its own bucket', () => {
+    const items = [
+      makeTeam({
+        teamId: 58,
+        teamName: 'Services Team 58',
+        value: { teamId: 58, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+      makeTeam({
+        teamId: 99,
+        teamName: 'Another Typeless Team',
+        value: { teamId: 99, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items)
+
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ id: -58, name: 'Services Team 58', teams: [{ id: 58 }] })
+    expect(result[1]).toMatchObject({
+      id: -99,
+      name: 'Another Typeless Team',
+      teams: [{ id: 99 }],
+    })
+  })
+
+  it('places teams with and without service types in the right buckets', () => {
+    const items = [
+      makeTeam({
+        teamId: 1,
+        teamName: 'Worship',
+        value: { teamId: 1, serviceTypeId: 10, serviceTypeIds: [10] },
+        serviceTypeNames: ['Sunday Morning'],
+      }),
+      makeTeam({
+        teamId: 58,
+        teamName: 'Services Team 58',
+        value: { teamId: 58, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items)
+
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ id: -58, name: 'Services Team 58', teams: [{ id: 58 }] })
+    expect(result[1]).toMatchObject({ id: 10, name: 'Sunday Morning' })
+  })
+
+  it('filters by search query, matching teams without service types by name', () => {
+    const items = [
+      makeTeam({
+        teamId: 58,
+        teamName: 'Services Team 58',
+        value: { teamId: 58, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+      makeTeam({
+        teamId: 99,
+        teamName: 'Unrelated Team',
+        value: { teamId: 99, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items, 'Services Team')
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ id: -58, name: 'Services Team 58', teams: [{ id: 58 }] })
+  })
+})