@planningcenter/chat-react-native 4.4.1-qa-staging.13 → 4.4.1-qa-staging.14

package/src/components/display/__tests__/filter_dropdown.test.tsx

@@ -0,0 +1,106 @@
+import { fireEvent, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { Pressable, Text } from 'react-native'
+import {
+  AudioAdapter,
+  ChatAdapters,
+  ClipboardAdapter,
+  ImagePickerAdapter,
+  MenuAction,
+  MenuAdapter,
+  MenuViewProps,
+  VideoAdapter,
+} from '../../../utils/native_adapters'
+import { FilterDropdown } from '../filter_dropdown'
+
+// Stands in for the host's native menu: every action, inline sections
+// included, becomes a pressable menu item.
+const FakeMenuView = ({ actions, onPressAction, children }: MenuViewProps) => {
+  const flatten = (items: MenuAction[]): MenuAction[] =>
+    items.flatMap(item => (item.displayInline && item.subactions ? item.subactions : [item]))
+
+  return (
+    <>
+      {children}
+      {flatten(actions).map(action => (
+        <Pressable
+          key={action.id}
+          accessibilityRole="menuitem"
+          accessibilityState={{ selected: action.state === 'on' }}
+          onPress={() => onPressAction?.({ nativeEvent: { event: action.id ?? action.title } })}
+        >
+          <Text>{action.title}</Text>
+        </Pressable>
+      ))}
+    </>
+  )
+}
+
+beforeAll(() => {
+  ChatAdapters.configure({
+    clipboard: new ClipboardAdapter({
+      getStringAsync: async () => '',
+      setStringAsync: async () => {},
+    }),
+    audio: new AudioAdapter({ useAudio: () => ({}) as any }),
+    video: new VideoAdapter({ Player: (() => null) as any }),
+    imagePicker: new ImagePickerAdapter({
+      openCameraAsync: async () => ({ canceled: true, assets: null }),
+      openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
+    }),
+    menu: new MenuAdapter({ View: FakeMenuView }),
+  })
+})
+
+const options = [
+  { id: 'all', label: 'All' },
+  { id: 'groups', label: 'Groups' },
+  { id: 'teams', label: 'Teams' },
+]
+
+const renderFilterDropdown = () => {
+  const onSelect = jest.fn()
+  const onMoreFilters = jest.fn()
+
+  render(
+    <FilterDropdown
+      options={options}
+      selectedId="groups"
+      onSelect={onSelect}
+      onMoreFilters={onMoreFilters}
+      triggerLabel="Groups"
+    />
+  )
+
+  return { onSelect, onMoreFilters }
+}
+
+describe('FilterDropdown', () => {
+  it('hands the menu every option, the selected one checked, then More filters', () => {
+    renderFilterDropdown()
+
+    expect(screen.getByRole('button', { name: 'Groups' })).toBeTruthy()
+    expect(
+      screen.getAllByRole('menuitem').map(item => [item.props.accessibilityState.selected])
+    ).toEqual([[false], [true], [false], [false]])
+    expect(screen.getByRole('menuitem', { name: 'More filters' })).toBeTruthy()
+  })
+
+  it('calls onSelect with the id of the pressed option', () => {
+    const { onSelect, onMoreFilters } = renderFilterDropdown()
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Teams' }))
+
+    expect(onSelect).toHaveBeenCalledWith('teams')
+    expect(onMoreFilters).not.toHaveBeenCalled()
+  })
+
+  it('calls onMoreFilters for the More filters action', () => {
+    const { onSelect, onMoreFilters } = renderFilterDropdown()
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'More filters' }))
+
+    expect(onMoreFilters).toHaveBeenCalledTimes(1)
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+})

package/src/components/display/filter_dropdown.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+import {
+  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
+  Menu,
+  MenuAction,
+  MenuActionEvent,
+  platformFontWeightBold,
+} from '../../utils'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { Icon } from './icon'
+import { Text } from './text'
+
+// =================================
+// ====== Constants ================
+// =================================
+
+const MORE_FILTERS_ID = 'more_filters'
+const MORE_FILTERS_LABEL = 'More filters'
+
+// =================================
+// ====== Component ================
+// =================================
+
+export interface FilterDropdownOption {
+  id: string
+  label: string
+}
+
+export interface FilterDropdownProps {
+  options: FilterDropdownOption[]
+  selectedId: string
+  onSelect: (id: string) => void
+  onMoreFilters: () => void
+  triggerLabel: string
+}
+
+export function FilterDropdown({
+  options,
+  selectedId,
+  onSelect,
+  onMoreFilters,
+  triggerLabel,
+}: FilterDropdownProps) {
+  const styles = useStyles()
+
+  const actions: MenuAction[] = [
+    ...options.map(option => ({
+      id: option.id,
+      title: option.label,
+      state: option.id === selectedId ? ('on' as const) : ('off' as const),
+    })),
+    {
+      id: MORE_FILTERS_ID,
+      title: '',
+      displayInline: true,
+      subactions: [{ id: MORE_FILTERS_ID, title: MORE_FILTERS_LABEL }],
+    },
+  ]
+
+  const handlePressAction = ({ nativeEvent }: MenuActionEvent) => {
+    if (nativeEvent.event === MORE_FILTERS_ID) {
+      onMoreFilters()
+    } else {
+      onSelect(nativeEvent.event)
+    }
+  }
+
+  return (
+    <Menu.View actions={actions} onPressAction={handlePressAction} style={styles.container}>
+      <View
+        style={styles.trigger}
+        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>
+    </Menu.View>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      alignSelf: 'flex-start',
+    },
+    trigger: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      paddingVertical: 4,
+    },
+    triggerLabel: {
+      flexShrink: 1,
+      fontWeight: platformFontWeightBold,
+      color: colors.textColorDefaultPrimary,
+    },
+    triggerIcon: {
+      fontSize: tokens.fontSizeSm,
+      color: colors.iconColorDefaultPrimary,
+    },
+  })
+}

package/src/components/display/index.ts

@@ -23,6 +23,7 @@ export * from './text_button'
 export * from './text_inline_button'
 export * from './text'
 export * from './toggle_button'
+export * from './filter_dropdown'
 export * from './keyboard_scroll_view'
 export * from './keyboard_view'
 export * from './platform_modal_header_buttons'

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

@@ -0,0 +1,130 @@
+import { QueryClientProvider, useQuery } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { Alert } from 'react-native'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { getConversationsRequestArgs } from '../../utils/request/conversation'
+import { getConversationRequestArgs, useConversationArchive } from '../use_conversation'
+import { getRequestQueryKey } from '../use_suspense_api'
+
+const mockPost = jest.fn()
+jest.mock('../use_api_client', () => ({
+  useApiClient: () => ({ chat: { post: mockPost } }),
+}))
+
+const conversation_id = 7
+const conversationKey = getRequestQueryKey(getConversationRequestArgs({ conversation_id }))
+const conversationsKey = getRequestQueryKey(getConversationsRequestArgs({ gids: 'all' }))
+
+const buildQueryClient = () =>
+  buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+
+let queryClient = buildQueryClient()
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+const isInvalidated = (queryKey: unknown[]) =>
+  queryClient.getQueryCache().find({ queryKey, exact: true })?.state.isInvalidated
+
+describe('useConversationArchive', () => {
+  beforeEach(() => {
+    queryClient = buildQueryClient()
+    queryClient.setQueryData(conversationKey, { data: { id: conversation_id } })
+    queryClient.setQueryData(conversationsKey, { data: [] })
+    mockPost.mockReset()
+    jest.spyOn(Alert, 'alert').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it.each([
+    [true, 'archive'],
+    [false, 'unarchive'],
+  ])(
+    'posts archived=%s to the %s action, then invalidates the conversation and list',
+    async (archived, action) => {
+      mockPost.mockResolvedValue({ data: { id: conversation_id } })
+      const { result } = renderHook(() => useConversationArchive({ conversation_id }), { wrapper })
+
+      await act(() => result.current.mutateAsync(archived))
+
+      expect(mockPost).toHaveBeenCalledWith({
+        url: `/me/conversations/7/${action}`,
+        data: { data: { type: 'Conversation', attributes: {} } },
+      })
+      expect(isInvalidated(conversationKey)).toBe(true)
+      expect(isInvalidated(conversationsKey)).toBe(true)
+    }
+  )
+
+  it('stays pending until the conversation refetch finishes', async () => {
+    mockPost.mockResolvedValue({ data: { id: conversation_id } })
+    let finishRefetch = () => {}
+    const { result } = renderHook(
+      () => {
+        useQuery({
+          queryKey: conversationKey,
+          queryFn: () =>
+            new Promise(resolve => {
+              finishRefetch = () => resolve({ data: { id: conversation_id } })
+            }),
+          staleTime: Infinity,
+        })
+        return useConversationArchive({ conversation_id })
+      },
+      { wrapper }
+    )
+
+    let archiving = Promise.resolve()
+    await act(async () => {
+      archiving = result.current.mutateAsync(true).then(() => {})
+    })
+
+    await waitFor(() => expect(result.current.isPending).toBe(true))
+
+    await act(async () => {
+      finishRefetch()
+      await archiving
+    })
+
+    await waitFor(() => expect(result.current.isPending).toBe(false))
+  })
+
+  it("doesn't wait on the list refetch", async () => {
+    mockPost.mockResolvedValue({ data: { id: conversation_id } })
+    const { result } = renderHook(
+      () => {
+        useQuery({
+          queryKey: conversationsKey,
+          queryFn: () => new Promise(() => {}),
+          staleTime: Infinity,
+        })
+        return useConversationArchive({ conversation_id })
+      },
+      { wrapper }
+    )
+
+    await act(() => result.current.mutateAsync(true))
+
+    expect(result.current.isPending).toBe(false)
+  })
+
+  it.each([
+    [true, 'archive'],
+    [false, 'unarchive'],
+  ])('alerts when archived=%s fails', async (archived, action) => {
+    mockPost.mockRejectedValue(new Error('nope'))
+    const { result } = renderHook(() => useConversationArchive({ conversation_id }), { wrapper })
+
+    await act(() => result.current.mutateAsync(archived).catch(() => {}))
+
+    expect(Alert.alert).toHaveBeenCalledWith(
+      'Oops',
+      `Couldn't ${action} this conversation. Please try again.`
+    )
+  })
+})

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

@@ -0,0 +1,74 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { ApiResource, ConversationResource } from '../../types'
+import { getConversationRequestArgs } from '../use_conversation'
+import { useConversationJoltEvents } from '../use_conversation_jolt_events'
+import { getRequestQueryKey } from '../use_suspense_api'
+
+const handlers: Record<string, (event: unknown) => void> = {}
+jest.mock('../use_jolt', () => ({
+  useJoltChannel: () => 'channel',
+  useJoltEvent: (_channel: unknown, name: string, handler: (event: unknown) => void) => {
+    handlers[name] = handler
+  },
+}))
+jest.mock('../use_current_person', () => ({ useCurrentPerson: () => ({ id: 1 }) }))
+jest.mock('../use_api_client', () => ({ useApiClient: () => ({ chat: {} }) }))
+
+const conversationId = 7
+const queryKey = getRequestQueryKey(getConversationRequestArgs({ conversation_id: conversationId }))
+let queryClient: QueryClient
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+const archivedAttributes = {
+  disabled: true,
+  disabled_reason: 'archived',
+  disabled_message: 'This conversation is archived.',
+}
+const activeAttributes = { disabled: false, disabled_reason: null, disabled_message: null }
+
+const seed = (conversation: Partial<ConversationResource>) =>
+  queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, {
+    data: { type: 'Conversation', id: conversationId, title: 'Youth', ...conversation },
+  } as ApiResource<ConversationResource>)
+
+const cached = () => queryClient.getQueryData<ApiResource<ConversationResource>>(queryKey)!.data
+
+const conversationUpdated = (attributes: Record<string, unknown>) =>
+  handlers['conversation.updated']({
+    event: 'conversation.updated',
+    data: { data: { id: conversationId, ...attributes } },
+  })
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient()
+  renderHook(() => useConversationJoltEvents({ conversationId }), { wrapper })
+})
+
+describe('useConversationJoltEvents on conversation.updated', () => {
+  it('switches the cached conversation into the archived state', () => {
+    seed({ disabled: false, disabledReason: null, disabledMessage: null })
+
+    conversationUpdated(archivedAttributes)
+
+    expect(cached()).toMatchObject({
+      title: 'Youth',
+      disabled: true,
+      disabledReason: 'archived',
+      disabledMessage: 'This conversation is archived.',
+    })
+  })
+
+  it('switches the cached conversation back out of the archived state', () => {
+    seed({ disabled: true, disabledReason: 'archived', disabledMessage: 'Archived' })
+
+    conversationUpdated(activeAttributes)
+
+    expect(cached()).toMatchObject({ disabled: false, disabledReason: null, disabledMessage: null })
+  })
+})

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

@@ -0,0 +1,67 @@
+import { act, renderHook } from '@testing-library/react-native'
+import type { ConversationResource } from '../../types'
+import { availableFeatures } from '../use_features'
+import { useUnarchiveConversationAction } from '../use_unarchive_conversation_action'
+
+const mockSetArchived = jest.fn()
+jest.mock('../use_conversation', () => ({
+  useConversationArchive: () => ({ setArchived: mockSetArchived, isPending: false }),
+}))
+
+let mockEnabledFeatures: string[] = []
+jest.mock('../use_features', () => ({
+  ...jest.requireActual('../use_features'),
+  useFeatures: () => ({
+    features: [],
+    featureEnabled: (name: string) => mockEnabledFeatures.includes(name),
+  }),
+}))
+
+const conversation = ({
+  disabledReason = 'archived',
+  canUnarchive = true,
+}: {
+  disabledReason?: string | null
+  canUnarchive?: boolean
+} = {}) =>
+  ({
+    type: 'Conversation',
+    id: 7,
+    disabled: !!disabledReason,
+    disabledReason,
+    memberAbility: { type: 'MemberAbility', canUnarchive },
+  }) as unknown as ConversationResource
+
+const renderAction = (resource: ConversationResource) =>
+  renderHook(() => useUnarchiveConversationAction(resource)).result.current
+
+describe('useUnarchiveConversationAction', () => {
+  beforeEach(() => {
+    mockEnabledFeatures = [availableFeatures.manual_archiving_rollout]
+    jest.clearAllMocks()
+  })
+
+  it('unarchives an archived conversation the person can unarchive', () => {
+    const action = renderAction(conversation())
+
+    expect(action?.label).toBe('Unarchive')
+
+    act(() => action?.onPress())
+
+    expect(mockSetArchived).toHaveBeenCalledWith(false)
+  })
+
+  it.each([
+    ['neither mobile flag is on', () => (mockEnabledFeatures = []), conversation()],
+    ['the person cannot unarchive', () => {}, conversation({ canUnarchive: false })],
+    [
+      'the conversation is disabled for another reason',
+      () => {},
+      conversation({ disabledReason: 'safety_check' }),
+    ],
+  ])('offers nothing when %s', (_case, setup, resource) => {
+    setup()
+
+    expect(renderAction(resource)).toBeUndefined()
+  })
+})

package/src/hooks/use_conversation.ts

@@ -1,11 +1,12 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
+import { Alert } from 'react-native'
 import { ApiResource, ConversationResource } from '../types'
 import { transformGetToPost } from '../utils/client/request_helpers'
 import { Haptic } from '../utils/native_adapters'
 import { getConversationsRequestArgs } from '../utils/request/conversation'
 import { useApiClient } from './use_api_client'
-import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
+import { getRequestQueryKey, SuspenseGetQueryOptions, useSuspenseGet } from './use_suspense_api'
 
 export const getConversationRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
   url: `/me/conversations/${conversation_id}`,
@@ -49,6 +50,8 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'can_reply',
         'can_delete_non_authored_messages',
         'can_message_available_members',
+        'can_archive',
+        'can_unarchive',
       ],
       ConversationMembership: [
         'last_read_message_sort_key',
@@ -70,10 +73,13 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
   },
 })
 
-export const useConversation = ({ conversation_id }: { conversation_id: number }) => {
+export const useConversation = (
+  { conversation_id }: { conversation_id: number },
+  options?: SuspenseGetQueryOptions<ConversationResource>
+) => {
   const args = getConversationRequestArgs({ conversation_id })
 
-  return useSuspenseGet<ConversationResource>(args)
+  return useSuspenseGet<ConversationResource>(args, options)
 }
 
 export const useConversationMute = ({ conversation_id }: { conversation_id: number }) => {
@@ -179,6 +185,38 @@ export const useConversationDelete = ({ conversation_id }: { conversation_id: nu
   })
 }
 
+export const useConversationArchive = ({ conversation_id }: { conversation_id: number }) => {
+  const apiClient = useApiClient()
+  const queryClient = useQueryClient()
+  const conversationQueryKey = getRequestQueryKey(getConversationRequestArgs({ conversation_id }))
+  const { url } = getConversationsRequestArgs()
+
+  const { mutate: setArchived, ...mutation } = useMutation({
+    mutationKey: ['archiveConversation'],
+    mutationFn: async (archived: boolean) => {
+      const action = archived ? 'archive' : 'unarchive'
+
+      return apiClient.chat.post({
+        url: `/me/conversations/${conversation_id}/${action}`,
+        data: { data: { type: 'Conversation', attributes: {} } },
+      })
+    },
+    onSuccess: () => {
+      Haptic.notificationSuccess()
+      queryClient.invalidateQueries({ queryKey: [url] })
+      return queryClient.invalidateQueries({ queryKey: conversationQueryKey })
+    },
+    onError: (_error, archived) => {
+      Alert.alert(
+        'Oops',
+        `Couldn't ${archived ? 'archive' : 'unarchive'} this conversation. Please try again.`
+      )
+    },
+  })
+
+  return { setArchived, ...mutation }
+}
+
 export const useConversationDisableReplies = ({ conversation_id }: { conversation_id: number }) => {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()

package/src/hooks/use_unarchive_conversation_action.ts

@@ -0,0 +1,24 @@
+import { ConversationResource } from '../types'
+import { isArchivedConversation } from '../utils/archived_conversation'
+import { useConversationArchive } from './use_conversation'
+import { availableFeatures, useFeatures } from './use_features'
+
+export function useUnarchiveConversationAction(conversation: ConversationResource) {
+  const { featureEnabled } = useFeatures()
+  const { setArchived, isPending } = useConversationArchive({ conversation_id: conversation.id })
+  const manualArchivingEnabled =
+    featureEnabled(availableFeatures.manual_archiving) ||
+    featureEnabled(availableFeatures.manual_archiving_rollout)
+  const canUnarchive =
+    manualArchivingEnabled &&
+    isArchivedConversation(conversation) &&
+    !!conversation.memberAbility?.canUnarchive
+
+  if (!canUnarchive) return undefined
+
+  return {
+    label: 'Unarchive',
+    onPress: () => setArchived(false),
+    loading: isPending,
+  }
+}