@planningcenter/chat-react-native 4.1.0 → 4.1.1-qa-staging.1

package/src/screens/conversation_screen.tsx

@@ -1,4 +1,3 @@
-import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
   CommonActions,
@@ -11,24 +10,21 @@ import {
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Badge, Icon, Text } from '../components'
+import { Badge, Icon } from '../components'
 import { ConversationStartBanner } from '../components/conversation/conversation_start_banner'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
-import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
+import { MessageList } from '../components/conversation/message_list'
 import {
   ConversationDisabledBanner,
   LeaderMessagesDisabledBanner,
   MemberMessagesDisabledBanner,
 } from '../components/conversation/messages_disabled_banners'
-import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
-import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
 import { KeyboardView } from '../components/display/keyboard_view'
 import { useHeaderSlotReserve } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
-import { useTheme } from '../hooks'
 import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
@@ -45,10 +41,6 @@ import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { MessageResource } from '../types/resources/message'
-import { getRelativeDateStatus } from '../utils/date'
-import { groupMessages, type DateSeparator } from '../utils/group_messages'
-import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
-import { isSystemMessage } from '../utils/system_messages'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -101,16 +93,11 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const messagesWithSeparators = groupMessages({
-    ms: messages,
-    inReplyScreen: !!reply_root_id,
-  })
-  const noMessages = messagesWithSeparators.length === 0
+  const noMessages = messages.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
   const canReply = memberAbility?.canReply
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
-  const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
   const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
   const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
   const replyHeaderTitle = replyRootAuthorFirstName
@@ -181,54 +168,19 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             <ConversationStartBanner conversation={conversation} hasMessages={false} />
           </View>
         ) : (
-          <FlatList
-            inverted
-            ref={listRef}
-            contentContainerStyle={styles.listContainer}
-            data={messagesWithSeparators}
-            keyExtractor={item => item.id}
+          <MessageList
+            listRef={listRef}
+            conversation={conversation}
+            conversationId={conversation_id}
+            messages={messages}
+            replyRootId={reply_root_id}
+            hasNextPage={hasNextPage}
+            onEndReached={() => fetchNextPage()}
             onScroll={trackScroll}
             onLayout={onLayout}
             onContentSizeChange={onContentSizeChange}
             onScrollEndDrag={onScrollEndDrag}
             onMomentumScrollEnd={onMomentumScrollEnd}
-            scrollEventThrottle={10}
-            ListFooterComponent={
-              hasNextPage ? null : (
-                <ConversationStartBanner conversation={conversation} hasMessages={true} />
-              )
-            }
-            renderItem={({ item }) => {
-              if (item.type === 'DateSeparator') {
-                return <InlineDateSeparator {...item} />
-              }
-
-              if (item.type === 'ReplyShadowMessage') {
-                return (
-                  <ReplyShadowMessage
-                    {...(item as any)}
-                    conversation_id={conversation_id}
-                    inReplyScreen={!!reply_root_id}
-                  />
-                )
-              }
-
-              if (isSystemMessage(item)) {
-                return <SystemMessage message={item} conversationId={conversation_id} />
-              }
-
-              return (
-                <Message
-                  {...item}
-                  canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
-                  conversation_id={conversation_id}
-                  latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
-                  inReplyScreen={!!reply_root_id}
-                />
-              )
-            }}
-            onEndReached={() => fetchNextPage()}
-            ListHeaderComponent={<View style={styles.listHeader} />}
           />
         )}
         <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
@@ -295,44 +247,6 @@ function ConversationBottomBar({
   )
 }
 
-function InlineDateSeparator({ date }: DateSeparator) {
-  const styles = useDateSeparatorStyles()
-  const { isThisYear } = getRelativeDateStatus(date)
-  const showYear = !isThisYear
-  const dateStamp = formatDate(date, { style: 'long', year: showYear })
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.separator} />
-      <Text variant="footnote" style={styles.dateText}>
-        {dateStamp}
-      </Text>
-      <View style={styles.separator} />
-    </View>
-  )
-}
-
-const useDateSeparatorStyles = () => {
-  const theme = useTheme()
-  return StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      flexDirection: 'row',
-      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
-      paddingVertical: 16,
-    },
-    separator: {
-      flex: 1,
-      height: 1,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.borderColorDefaultBase,
-    },
-    dateText: {
-      paddingHorizontal: 8,
-    },
-  })
-}
-
 interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource
@@ -429,13 +343,6 @@ const useStyles = () => {
       flex: 1,
       justifyContent: 'center',
     },
-    listContainer: {
-      paddingVertical: 12,
-    },
-    listHeader: {
-      // Just whitespace to provide space where the typing indicator can be
-      height: 16,
-    },
   })
 }
 

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

@@ -0,0 +1,291 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, ScrollView, StyleSheet, View } from 'react-native'
+import { Heading, TextButton, ToggleButton } from '../../../components'
+import {
+  useAtFontScaleBreakpoint,
+  useCanCreateConversations,
+  useCurrentPersonCache,
+  useDirectMessagesEligible,
+  useHasDirectMessages,
+  useNewConversationEntry,
+  useTheme,
+} from '../../../hooks'
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
+import { useCanDisplayGroups } from '../../../hooks/use_groups'
+import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
+import { GraphId } from '../../../types/resources/group_resource'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
+import { Haptic } from '../../../utils/native_adapters'
+import { ConversationFiltersParams } from '../../conversation_filters/screen_props'
+import { ConversationsScreenProps } from '../conversations_screen'
+import { ChatGroupBadge } from './chat_group_badge'
+import { ListHeaderActionButton } from './list_header_action_button'
+
+const ROW_PADDING_HORIZONTAL = 16
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  DMs = 'DMs',
+  More = 'More',
+}
+
+export const SearchListHeaderComponent = () => {
+  const navigation = useNavigation()
+  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
+  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
+  const directMessagesEligible = useDirectMessagesEligible()
+  const hasDirectMessages = useHasDirectMessages()
+  const canFilterByDMs = directMessagesEligible && hasDirectMessages
+  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
+  const {
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+  } = route.params || {}
+  const currentPersonCache = useCurrentPersonCache()
+  const { markAllRead, isPending } = useMarkAllRead()
+  const canCreateConversations = useCanCreateConversations()
+  const entryMode = useNewConversationEntry()
+  const newConversationFromFilter = useNewConversationFromFilter(
+    chat_group_graph_id as GraphId | undefined
+  )
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id) {
+      return FilterTypes.More
+    } else if (/groups/i.test(group_source_app_name)) {
+      return FilterTypes.Groups
+    } else if (/services/i.test(group_source_app_name)) {
+      return FilterTypes.Teams
+    } else if (show_direct_messages) {
+      return FilterTypes.DMs
+    }
+
+    return FilterTypes.All
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+
+  const handleNewConversationNavigation = useCallback(() => {
+    if (newConversationFromFilter || entryMode === 'select_type') {
+      return navigation.navigate('ConversationSelectType', {
+        ...route.params,
+        newConversationFromFilter,
+      })
+    }
+
+    if (entryMode === 'groups') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectGroupRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'teams') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectTeamsILeadRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'direct_message') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectDirectMessageRecipients',
+        params: { ...route.params },
+      })
+    }
+  }, [navigation, route.params, entryMode, newConversationFromFilter])
+
+  const handleSetFilter = useCallback(
+    (params: ConversationFiltersParams) => {
+      navigation.setParams({
+        title: undefined,
+        chat_group_graph_id: undefined,
+        group_source_app_name: undefined,
+        show_direct_messages: undefined,
+        ...params,
+      })
+    },
+    [navigation]
+  )
+
+  const handleChatSettings = useCallback(() => {
+    navigation.navigate('ChatSettings', {})
+  }, [navigation])
+
+  const handleOpenConversationFilters = useCallback(() => {
+    navigation.navigate('ConversationFilters', {
+      chat_group_graph_id,
+      group_source_app_name,
+      show_direct_messages,
+    })
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
+
+  const handleMarkAllRead = useCallback(() => {
+    currentPersonCache.update({ unreadCount: 0 })
+    Haptic.notificationSuccess()
+    markAllRead()
+  }, [currentPersonCache, markAllRead])
+
+  const alertMarkAllRead = useCallback(() => {
+    if (active === FilterTypes.All) return handleMarkAllRead()
+
+    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [
+      { text: 'Cancel' },
+      { text: 'OK', onPress: () => handleMarkAllRead() },
+    ])
+  }, [active, handleMarkAllRead])
+
+  const hasSomeSourceFilterCapability = canFilterByTeams || canFilterByGroups
+  const hasMultiSourceFilterCapabilities = canFilterByTeams && canFilterByGroups
+  const showFilterRow = hasMultiSourceFilterCapabilities || canFilterByDMs
+  const shouldShowHeaderFiltersButton = hasSomeSourceFilterCapability && !showFilterRow
+  const moreFiltersButtonA11yLabel = shouldShowHeaderFiltersButton
+    ? 'View filters'
+    : 'View more filters'
+
+  const moreFiltersButtonProps = {
+    onPress: handleOpenConversationFilters,
+    active: active === FilterTypes.More,
+    iconNameRight: 'general.threeReducingHorizontalBars' as const,
+    accessibilityLabel: moreFiltersButtonA11yLabel,
+  }
+
+  const styles = useStyles({ shouldShowHeaderFiltersButton })
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.headingRow}>
+        <View style={styles.titleContainer}>
+          <Heading numberOfLines={1} variant="h2">
+            Conversations
+          </Heading>
+          <TextButton
+            onPress={alertMarkAllRead}
+            disabled={isPending}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Mark all read"
+          >
+            Mark all read
+          </TextButton>
+        </View>
+        <View style={styles.actionsContainer}>
+          <ListHeaderActionButton
+            name="general.cog"
+            onPress={handleChatSettings}
+            accessibilityLabel="Chat settings"
+            testID="conversations-chat-settings-button"
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          />
+          {canCreateConversations && (
+            <ListHeaderActionButton
+              name="churchCenter.signups"
+              onPress={handleNewConversationNavigation}
+              accessibilityLabel="New conversation"
+              testID="conversations-new-conversation-button"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+          {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}
+        </View>
+      </View>
+      {showFilterRow && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.filterRow}
+          accessibilityRole="toolbar"
+        >
+          <ToggleButton
+            title={FilterTypes.All}
+            active={active === FilterTypes.All}
+            onPress={() => handleSetFilter({})}
+            accessibilityLabel="Show all conversations"
+            style={styles.filterButton}
+          />
+          {canFilterByGroups && (
+            <ToggleButton
+              title={FilterTypes.Groups}
+              active={active === FilterTypes.Groups}
+              onPress={() => handleSetFilter({ group_source_app_name: 'Groups' })}
+              accessibilityLabel="Filter to group conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByTeams && (
+            <ToggleButton
+              title={FilterTypes.Teams}
+              active={active === FilterTypes.Teams}
+              onPress={() => handleSetFilter({ group_source_app_name: 'Services' })}
+              accessibilityLabel="Filter to team conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByDMs && (
+            <ToggleButton
+              title={FilterTypes.DMs}
+              active={active === FilterTypes.DMs}
+              onPress={() => handleSetFilter({ show_direct_messages: true })}
+              accessibilityLabel="Filter to direct message conversations"
+              style={styles.filterButton}
+            />
+          )}
+          <ToggleButton {...moreFiltersButtonProps} />
+        </ScrollView>
+      )}
+      <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />
+    </View>
+  )
+}
+
+const useStyles = ({
+  shouldShowHeaderFiltersButton,
+}: {
+  shouldShowHeaderFiltersButton: boolean
+}) => {
+  const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(
+    shouldShowHeaderFiltersButton ? 1.2 : undefined
+  )
+
+  return StyleSheet.create({
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.statusErrorBorder,
+      paddingBottom: 16,
+      gap: 16,
+    },
+    headingRow: {
+      gap: 12,
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      justifyContent: 'space-between',
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+    titleContainer: {
+      gap: 8,
+    },
+    actionsContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+    markAllReadRow: {
+      paddingBottom: 4,
+    },
+    filterRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      gap: 8,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+      flexGrow: 1,
+    },
+    filterButton: {
+      flex: 1,
+      minWidth: 65,
+    },
+  })
+}

package/src/screens/conversations/conversations_screen.tsx

@@ -3,10 +3,12 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations } from '../../components'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
+import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/use_product_analytics'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
 import { ListHeaderComponent } from './components/list_header_component'
+import { SearchListHeaderComponent } from './components/search_list_header_component'
 
 export type ConversationsScreenProps = StaticScreenProps<{
   title?: string
@@ -17,13 +19,16 @@ export type ConversationsScreenProps = StaticScreenProps<{
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
   const styles = useStyles()
+  const { featureEnabled } = useFeatures()
+  const searchEnabled = featureEnabled(availableFeatures.search)
+  const Header = searchEnabled ? SearchListHeaderComponent : ListHeaderComponent
 
   usePublishProductAnalyticsEvent(analyticsEvents.conversation_index_opened)
 
   return (
     <View style={styles.container}>
       <ConversationsContextProvider args={route.params} opts={{ throwOnError: true }}>
-        <Conversations ListHeaderComponent={ListHeaderComponent} />
+        <Conversations ListHeaderComponent={Header} />
       </ConversationsContextProvider>
     </View>
   )

package/src/types/resources/message.ts

@@ -17,6 +17,8 @@ export interface MessageResource {
   reactionCounts: ReactionCountResource[]
   replyCount: number
   replyRootId?: string | null
+  replyRoot?: MessageResource | null
+  idempotentKey?: string | null
   messageType: string
   personIdsForSystemEvent?: number[] | null
   systemTextParts?: { names: string[]; overflowCount: number; action: string } | null

package/src/utils/__tests__/group_messages.test.ts

@@ -124,6 +124,54 @@ describe('groupMessages — nextRendersAuthor mirrors the newer enriched neighbo
   })
 })
 
+describe('groupMessages — reply roots', () => {
+  const findShadow = (items: ReturnType<typeof groupMessages>, id: string) =>
+    items.find(item => 'type' in item && item.type === 'ReplyShadowMessage' && item.id === id)
+
+  it('carries the root from the page onto the reply and its shadow', () => {
+    const messages = [
+      message('03', { replyRootId: 'rootA' }),
+      message('02'),
+      message('rootA', { replyRootId: 'rootA', text: 'fresh' }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect((findEnriched(enriched, '03') as MessageResource).replyRoot?.text).toBe('fresh')
+    expect(findShadow(enriched, '03-rootA')).toMatchObject({ replyRoot: { id: 'rootA' } })
+  })
+
+  it('prefers the page copy of the root over the reply’s included snapshot', () => {
+    const snapshot = message('rootA', { replyRootId: 'rootA', text: 'stale' })
+    const messages = [
+      message('03', { replyRootId: 'rootA', replyRoot: snapshot }),
+      message('02'),
+      message('rootA', { replyRootId: 'rootA', text: 'fresh' }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect(findShadow(enriched, '03-rootA')).toMatchObject({ replyRoot: { text: 'fresh' } })
+  })
+
+  it('falls back to the included snapshot when the root is not on the page', () => {
+    const snapshot = message('rootA', { replyRootId: 'rootA', text: 'included' })
+    const messages = [message('02', { replyRootId: 'rootA', replyRoot: snapshot })]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect(findShadow(enriched, '02-rootA')).toMatchObject({ replyRoot: { text: 'included' } })
+  })
+
+  it('leaves replyRoot null when the root is neither on the page nor included', () => {
+    const messages = [message('02', { replyRootId: 'rootA' })]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect(findShadow(enriched, '02-rootA')).toMatchObject({ replyRoot: null })
+  })
+})
+
 describe('groupMessages — system messages', () => {
   it('flags lastInGroup true and renderAuthor false on system messages', () => {
     const messages = [

package/src/utils/__tests__/replace_equal_by_id.test.ts

@@ -0,0 +1,73 @@
+import { replaceEqualById } from '../replace_equal_by_id'
+
+type Record = { type: 'Message'; id: string; text: string; attachments: string[] }
+type Pages = { pages: { data: Record[]; links: {}; meta: {} }[]; pageParams: unknown[] }
+
+const record = (id: string, text = id): Record => ({ type: 'Message', id, text, attachments: [] })
+const pagesOf = (...pages: Record[][]): Pages => ({
+  pages: pages.map(data => ({ data, links: {}, meta: {} })),
+  pageParams: pages.map(() => ({})),
+})
+
+const share = (prev: Pages, next: Pages) => replaceEqualById(prev, next) as Pages
+
+describe('replaceEqualById', () => {
+  it('returns the previous data when nothing changed', () => {
+    const prev = pagesOf([record('c'), record('b')], [record('a')])
+    const next = pagesOf([record('c'), record('b')], [record('a')])
+
+    expect(share(prev, next)).toBe(prev)
+  })
+
+  it('keeps every existing record when one is inserted at the head', () => {
+    const [c, b] = [record('c'), record('b')]
+    const prev = pagesOf([c, b])
+    const next = pagesOf([record('d'), record('c'), record('b')])
+
+    const result = share(prev, next)
+
+    expect(result.pages[0].data[1]).toBe(c)
+    expect(result.pages[0].data[2]).toBe(b)
+    expect(result.pages[0].data[0].id).toBe('d')
+  })
+
+  it('keeps the survivors when a record is removed', () => {
+    const [c, b, a] = [record('c'), record('b'), record('a')]
+    const prev = pagesOf([c, b, a])
+    const next = pagesOf([record('c'), record('a')])
+
+    const result = share(prev, next)
+
+    expect(result.pages[0].data).toEqual([c, a])
+    expect(result.pages[0].data[0]).toBe(c)
+    expect(result.pages[0].data[1]).toBe(a)
+  })
+
+  it('replaces only the changed record and keeps its untouched nested references', () => {
+    const b = record('b')
+    const prev = pagesOf([record('c'), b])
+    const next = pagesOf([record('c'), { ...record('b', 'edited'), attachments: [] }])
+
+    const result = share(prev, next)
+
+    expect(result.pages[0].data[0]).toBe(prev.pages[0].data[0])
+    expect(result.pages[0].data[1]).not.toBe(b)
+    expect(result.pages[0].data[1].text).toBe('edited')
+    expect(result.pages[0].data[1].attachments).toBe(b.attachments)
+  })
+
+  it('keeps untouched pages when only another page changed', () => {
+    const prev = pagesOf([record('c')], [record('a')])
+    const next = pagesOf([record('d'), record('c')], [record('a')])
+
+    const result = share(prev, next)
+
+    expect(result.pages[1]).toBe(prev.pages[1])
+  })
+
+  it('returns the new data when there is nothing to share with', () => {
+    const next = pagesOf([record('a')])
+
+    expect(replaceEqualById(undefined, next)).toBe(next)
+  })
+})