@planningcenter/chat-react-native 4.5.0-rc.3 → 4.5.0-rc.5

package/src/components/display/filter_dropdown.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { LayoutChangeEvent, StyleSheet, View } from 'react-native'
 import { useTheme } from '../../hooks'
 import {
   MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
@@ -78,30 +78,62 @@ export function FilterDropdown({
 
   return (
     <MenuView actions={actions} onPressAction={handlePressAction} style={styles.container}>
-      <View
-        style={[styles.trigger, maxWidth !== undefined && { maxWidth }]}
+      <FilterDropdownTrigger
+        label={triggerLabel}
+        maxWidth={maxWidth}
         accessible
         accessibilityRole="button"
         accessibilityHint="Opens filter options"
-      >
-        <Text
-          style={styles.triggerLabel}
-          numberOfLines={1}
-          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
-        >
-          {triggerLabel}
-        </Text>
-        <Icon
-          name="general.downChevron"
-          style={styles.triggerIcon}
-          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
-          accessibilityElementsHidden
-        />
-      </View>
+      />
     </MenuView>
   )
 }
 
+// =================================
+// ====== Trigger ==================
+// =================================
+
+export interface FilterDropdownTriggerProps {
+  label: string
+  maxWidth?: number
+  accessible?: boolean
+  accessibilityRole?: 'button'
+  accessibilityHint?: string
+  accessibilityElementsHidden?: boolean
+  importantForAccessibility?: 'no-hide-descendants'
+  onLayout?: (event: LayoutChangeEvent) => void
+}
+
+/**
+ * The label and chevron the dropdown opens from. Exported so a screen can render a hidden copy
+ * to measure how wide a label is at the current font scale.
+ */
+export function FilterDropdownTrigger({
+  label,
+  maxWidth,
+  ...viewProps
+}: FilterDropdownTriggerProps) {
+  const styles = useStyles()
+
+  return (
+    <View style={[styles.trigger, maxWidth !== undefined && { maxWidth }]} {...viewProps}>
+      <Text
+        style={styles.triggerLabel}
+        numberOfLines={1}
+        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+      >
+        {label}
+      </Text>
+      <Icon
+        name="general.downChevron"
+        style={styles.triggerIcon}
+        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+        accessibilityElementsHidden
+      />
+    </View>
+  )
+}
+
 // =================================
 // ====== Styles ===================
 // =================================

package/src/hooks/__tests__/use_conversations_mark_read.test.tsx

@@ -0,0 +1,33 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ConversationResource } from '../../types'
+import { getConversationsRequestArgs } from '../../utils/request/conversation'
+import { useConversationsMarkRead } from '../use_conversations_actions'
+import { getRequestQueryKey } from '../use_suspense_api'
+
+jest.mock('../use_api_client', () => ({
+  useApiClient: () => ({
+    chat: { post: jest.fn().mockResolvedValue({}), get: jest.fn().mockResolvedValue({ data: [] }) },
+  }),
+}))
+
+describe('useConversationsMarkRead', () => {
+  it('marks the conversation read in a list outside the current conversations context', async () => {
+    const conversation = { id: 7, unreadCount: 8 } as ConversationResource
+    const archivedListKey = getRequestQueryKey(getConversationsRequestArgs({ show_archived: true }))
+    const queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+    queryClient.setQueryData(archivedListKey, { pages: [{ data: [conversation] }], pageParams: [] })
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+    const { result } = renderHook(() => useConversationsMarkRead({ conversation }), { wrapper })
+
+    await act(async () => result.current.markRead(true))
+
+    expect(queryClient.getQueryData(archivedListKey)).toMatchObject({
+      pages: [{ data: [{ id: 7, unreadCount: 0 }] }],
+    })
+  })
+})

package/src/hooks/use_conversations_actions.ts

@@ -17,7 +17,7 @@ export const useConversationsMarkRead = ({
   const queryClient = useQueryClient()
   const { args } = useConversationsContext()
   const currentPersonCache = useCurrentPersonCache()
-  const { update, invalidate, fetchUpdate } = useConversationsCache(args)
+  const { updateInAllLists, invalidateAllLists, fetchUpdate } = useConversationsCache(args)
   const conversationQueryKey = getRequestQueryKey(
     getConversationRequestArgs({ conversation_id: conversation.id })
   )
@@ -32,8 +32,7 @@ export const useConversationsMarkRead = ({
 
   const { mutate: handleMarkRead, ...mutation } = useMutation({
     onMutate: async (read: boolean) => {
-      update({
-        ...conversation,
+      updateInAllLists(conversation.id, {
         unreadCount: read ? 0 : 1,
         ...(read ? { unreadReaction: false } : {}),
       })
@@ -59,7 +58,7 @@ export const useConversationsMarkRead = ({
     },
     onError: () => {
       Alert.alert('Oops', 'Something went wrong updating this conversation, please try again')
-      invalidate()
+      invalidateAllLists()
     },
   })
 

package/src/hooks/use_conversations_cache.ts

@@ -67,6 +67,20 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
     )
   }
 
+  const updateInAllLists = (id: number, update: Partial<ConversationResource>) => {
+    queryClient.setQueriesData<QueryData>({ queryKey: [conversationsRequestArgs.url] }, prev => {
+      if (!prev?.pages) return prev
+
+      return updateAllRecordsInPagesData({
+        data: prev,
+        processRecord: record => (record.id === id ? { ...record, ...update } : record),
+      })
+    })
+  }
+
+  const invalidateAllLists = () =>
+    queryClient.invalidateQueries({ queryKey: [conversationsRequestArgs.url] })
+
   const handleConversationDestroy = ({ id }: { id: number }) => {
     if (!id) return
 
@@ -106,7 +120,9 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
     fetchSync: fetchAndSync,
     fetchUpdate: fetchAndUpdate,
     invalidate: () => queryClient.invalidateQueries({ queryKey: conversationQueryKey }),
+    invalidateAllLists,
     update: updateOrCreate,
     updateAll,
+    updateInAllLists,
   }
 }

package/src/screens/conversations/components/__tests__/filter_dropdown_list_header_component.test.tsx

@@ -21,15 +21,6 @@ const mockSearchEnabled = jest.fn()
 const mockCanBrowseArchived = jest.fn()
 const mockGroupsByGraphId: Record<string, { name: string }> = {}
 
-jest.mock('react-native', () => {
-  const actual = jest.requireActual('react-native')
-  return Object.defineProperty(actual, 'useWindowDimensions', {
-    value: jest.fn(() => ({ fontScale: 1 })),
-    configurable: true,
-  })
-})
-const mockUseWindowDimensions = jest.requireMock('react-native').useWindowDimensions
-
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ setParams: mockSetParams, navigate: mockNavigate }),
@@ -130,46 +121,10 @@ describe('FilterDropdownListHeaderComponent', () => {
     mockSetParams.mockClear()
     mockSearchEnabled.mockReturnValue(true)
     mockCanBrowseArchived.mockReturnValue(false)
-    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
     setCapabilities({ groups: true, teams: true })
     setRouteParams({})
   })
 
-  it('keeps the dropdown and actions on one line at the default font scale', () => {
-    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
-
-    render(<FilterDropdownListHeaderComponent />)
-
-    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
-      flexDirection: 'row',
-    })
-  })
-
-  it('stacks the actions under the dropdown at the first font size above the default', () => {
-    mockUseWindowDimensions.mockReturnValue({ fontScale: 1.12 })
-
-    render(<FilterDropdownListHeaderComponent />)
-
-    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
-      flexDirection: 'column',
-    })
-  })
-
-  it('caps the trigger to the room beside the actions so a long label truncates', () => {
-    render(<FilterDropdownListHeaderComponent />)
-
-    fireEvent(screen.getByTestId('conversations-filter-heading-row'), 'layout', {
-      nativeEvent: { layout: { width: 360 } },
-    })
-    fireEvent(screen.getByTestId('conversations-filter-actions'), 'layout', {
-      nativeEvent: { layout: { width: 160 } },
-    })
-
-    expect(screen.getByRole('button', { name: 'All conversations' })).toHaveStyle({
-      maxWidth: 156,
-    })
-  })
-
   it('offers every filter the person can use, then More filters', () => {
     render(<FilterDropdownListHeaderComponent />)
 
@@ -344,13 +299,4 @@ describe('FilterDropdownListHeaderComponent', () => {
 
     expect(mockNavigate).toHaveBeenCalledWith('Search')
   })
-
-  it('renders the search button after the other actions', () => {
-    const view = render(<FilterDropdownListHeaderComponent />)
-
-    const buttons = view.getAllByRole('button').map(button => button.props.accessibilityLabel)
-
-    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('Chat settings'))
-    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('New conversation'))
-  })
 })

package/src/screens/conversations/components/filter_dropdown_list_header_component.tsx

@@ -1,13 +1,17 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Alert, LayoutChangeEvent, StyleSheet, View } from 'react-native'
-import { FilterDropdown, FilterDropdownOption, TextButton } from '../../../components'
+import {
+  FilterDropdown,
+  FilterDropdownOption,
+  FilterDropdownTrigger,
+  TextButton,
+} from '../../../components'
 import {
   useCanBrowseArchivedConversations,
   useCanCreateConversations,
   useCurrentPersonCache,
   useDirectMessagesEligible,
-  useFontScale,
   useHasDirectMessages,
   useNewConversationEntry,
   useTheme,
@@ -26,7 +30,6 @@ import { ListHeaderActionButton } from './list_header_action_button'
 
 const ROW_PADDING_HORIZONTAL = 16
 const HEADING_ROW_GAP = 12
-const DEFAULT_FONT_SCALE = 1
 const ALL_CONVERSATIONS_LABEL = 'All conversations'
 const ARCHIVED_LABEL = 'Archived'
 
@@ -207,31 +210,43 @@ export const FilterDropdownListHeaderComponent = () => {
 
   const showMoreFilters = canFilterByGroups || canFilterByTeams || canBrowseArchived
 
-  const stacked = useFontScale() > DEFAULT_FONT_SCALE
-  const styles = useStyles({ stacked })
+  const styles = useStyles()
 
-  // The Android menu host measures the trigger at its intrinsic width, so flex shrinking never
-  // truncates the label. Cap it to the room left beside the action buttons instead.
+  // Cap the trigger beside the actions while the widest fixed label fits there, so only longer
+  // labels truncate; past that, cap it to the row and let the actions wrap.
   const [rowWidth, setRowWidth] = useState<number>()
   const [actionsWidth, setActionsWidth] = useState<number>()
+  const [widestFixedLabelWidth, setWidestFixedLabelWidth] = useState<number>()
   const handleRowLayout = useCallback((event: LayoutChangeEvent) => {
     setRowWidth(event.nativeEvent.layout.width)
   }, [])
   const handleActionsLayout = useCallback((event: LayoutChangeEvent) => {
     setActionsWidth(event.nativeEvent.layout.width)
   }, [])
-  const triggerMaxWidth =
-    !stacked && rowWidth !== undefined && actionsWidth !== undefined
-      ? rowWidth - ROW_PADDING_HORIZONTAL * 2 - actionsWidth - HEADING_ROW_GAP
-      : undefined
+  const handleWidestFixedLabelLayout = useCallback((event: LayoutChangeEvent) => {
+    setWidestFixedLabelWidth(event.nativeEvent.layout.width)
+  }, [])
+  const triggerMaxWidth = useMemo(() => {
+    if (rowWidth === undefined) return undefined
+
+    const rowContentWidth = rowWidth - ROW_PADDING_HORIZONTAL * 2
+    if (actionsWidth === undefined || widestFixedLabelWidth === undefined) return rowContentWidth
+
+    const roomBesideActions = rowContentWidth - actionsWidth - HEADING_ROW_GAP
+    return roomBesideActions >= widestFixedLabelWidth ? roomBesideActions : rowContentWidth
+  }, [rowWidth, actionsWidth, widestFixedLabelWidth])
 
   return (
     <View style={styles.listHeader}>
-      <View
-        style={styles.headingRow}
-        onLayout={handleRowLayout}
-        testID="conversations-filter-heading-row"
-      >
+      <View style={styles.widestFixedLabel} pointerEvents="none">
+        <FilterDropdownTrigger
+          label={ALL_CONVERSATIONS_LABEL}
+          onLayout={handleWidestFixedLabelLayout}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        />
+      </View>
+      <View style={styles.headingRow} onLayout={handleRowLayout}>
         <View style={styles.titleContainer}>
           <FilterDropdown
             options={options}
@@ -243,11 +258,7 @@ export const FilterDropdownListHeaderComponent = () => {
             maxWidth={triggerMaxWidth}
           />
         </View>
-        <View
-          style={styles.actionsContainer}
-          onLayout={handleActionsLayout}
-          testID="conversations-filter-actions"
-        >
+        <View style={styles.actionsContainer} onLayout={handleActionsLayout}>
           <ListHeaderActionButton
             name="general.cog"
             onPress={handleChatSettings}
@@ -292,7 +303,7 @@ export const FilterDropdownListHeaderComponent = () => {
   )
 }
 
-const useStyles = ({ stacked }: { stacked: boolean }) => {
+const useStyles = () => {
   const theme = useTheme()
 
   return StyleSheet.create({
@@ -304,15 +315,18 @@ const useStyles = ({ stacked }: { stacked: boolean }) => {
     },
     headingRow: {
       gap: HEADING_ROW_GAP,
-      flexDirection: stacked ? 'column' : 'row',
-      alignItems: stacked ? 'flex-start' : 'center',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
       justifyContent: 'space-between',
-      paddingBottom: stacked ? 4 : 0,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
     },
     titleContainer: {
-      flexShrink: 1,
-      minWidth: 0,
+      flexShrink: 0,
+    },
+    widestFixedLabel: {
+      position: 'absolute',
+      opacity: 0,
     },
     actionsContainer: {
       flexDirection: 'row',