@planningcenter/chat-react-native 3.2.0-rc.7 → 3.2.0-rc.8

package/src/__tests__/utils/cache/page_mutations.ts

@@ -1,5 +1,6 @@
 import {
   deleteRecordInPagesData,
+  updateAllRecordsInPagesData,
   updateOrCreateRecordInPagesData,
   updateRecordInPagesData,
 } from '../../../utils/'
@@ -28,11 +29,44 @@ const data = {
   ],
 }
 
-describe('updateRecordInPagesData', () => {
+describe('updateAllRecordsInPagesData', () => {
+  it('should update all records in the pages data', () => {
+    const result = updateAllRecordsInPagesData({
+      data,
+      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
+    })
+
+    expect(result).toEqual({
+      pageParams: {},
+      pages: [
+        {
+          data: [
+            { id: '1', type: 'Message', text: 'updated message 1' },
+            { id: '2', type: 'Message', text: 'updated message 2' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+        {
+          data: [
+            { id: '3', type: 'Message', text: 'updated message 3' },
+            { id: '4', type: 'Message', text: 'updated message 4' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+      ],
+    })
+  })
+})
+
+describe('updateOrCreateRecordInPagesData', () => {
   it('should update the record in the pages data', () => {
     const id = '3'
     const record = createRecord({ id })
-    const result = updateRecordInPagesData({ data, record })
+    const result = updateOrCreateRecordInPagesData({ data, record })
 
     expect(result).toEqual({
       pageParams: {},
@@ -63,7 +97,7 @@ describe('updateRecordInPagesData', () => {
     const id = '2'
     const record = createRecord({ id })
 
-    const result = updateRecordInPagesData<typeof record>({
+    const result = updateOrCreateRecordInPagesData<typeof record>({
       data,
       record,
       processRecord: r => ({ ...r, text: 'updated ' + r.text }),
@@ -93,20 +127,9 @@ describe('updateRecordInPagesData', () => {
       ],
     })
   })
-
-  it('should skip the record if it does not exist', () => {
-    const id = '5'
-    const record = createRecord({ id })
-    const result = updateRecordInPagesData<typeof record>({
-      data,
-      record,
-      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
-    })
-    expect(result).toEqual(data)
-  })
 })
 
-describe('updateOrCreateRecordInPagesData', () => {
+describe('updateOrCreateRecordInPagesData function', () => {
   it('should update the record in the pages data', () => {
     const id = '3'
     const record = createRecord({ id })
@@ -207,6 +230,17 @@ describe('updateOrCreateRecordInPagesData', () => {
       ],
     })
   })
+
+  it('should skip the record if it does not exist', () => {
+    const id = '5'
+    const record = createRecord({ id })
+    const result = updateRecordInPagesData<typeof record>({
+      data,
+      record,
+      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
+    })
+    expect(result).toEqual(data)
+  })
 })
 
 describe('deleteRecordInPagesData', () => {

package/src/components/conversations/conversation_actions.tsx

@@ -1,13 +1,17 @@
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import { Platform, View, StyleSheet, ViewStyle, Pressable } from 'react-native'
+import { Platform, Pressable, StyleSheet, View, ViewStyle } from 'react-native'
 import ReanimatedSwipeable, {
   SwipeableMethods,
 } from 'react-native-gesture-handler/ReanimatedSwipeable'
+import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
-import { ActionToggleButton } from './action_toggle_button'
-import { tokens } from '../../vendor/tapestry/tokens'
+import {
+  useConversationsMarkRead,
+  useConversationsMute,
+} from '../../hooks/use_conversations_actions'
 import { ConversationResource } from '../../types'
-import { useConversationActionsContext } from '../../contexts/swipeable_active_conversation'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { ActionToggleButton } from './action_toggle_button'
 
 export function ConversationActions({
   children,
@@ -22,7 +26,7 @@ export function ConversationActions({
 }) {
   const swipeableRef = useRef<SwipeableMethods>(null)
   const styles = useStyles()
-  const { activeConversationId, setActiveConversationId } = useConversationActionsContext()
+  const { activeConversationId, setActiveConversationId } = useConversationsContext()
   const [disabled, setDisabled] = useState(false)
   const overshootLeft = Platform.OS === 'ios'
 
@@ -75,44 +79,44 @@ interface LeftActionsProps {
 
 function LeftActions({ conversation, onClose }: LeftActionsProps) {
   const styles = useStyles()
-  const [muted, setMuted] = useState(conversation.muted)
-  const [latestMessageUnread, setLatestMessageUnread] = useState(conversation.unreadCount > 0)
   const emptyConversation = conversation.lastMessageCreatedAt === null
 
   const muteToggleContent = {
-    true: { iconName: 'general.bellMuted', label: 'Mute' },
-    false: { iconName: 'general.bell', label: 'Unmute' },
+    true: { iconName: 'general.bell', label: 'Unmute' },
+    false: { iconName: 'general.bellMuted', label: 'Mute' },
   } as const
 
   const latestMessageUnreadToggleContent = {
     true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },
     false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },
   } as const
+  const { muted, setMuted, isPending } = useConversationsMute({ conversation })
+  const { read, markRead, isPending: markReadPending } = useConversationsMarkRead({ conversation })
 
   const handleMute = useCallback(() => {
     setMuted(!muted)
     onClose()
-  }, [muted, onClose])
+  }, [muted, onClose, setMuted])
 
   const handleLatestMessageUnread = useCallback(() => {
-    setLatestMessageUnread(!latestMessageUnread)
+    markRead(!read)
     onClose()
-  }, [latestMessageUnread, onClose])
+  }, [read, onClose, markRead])
 
   return (
     <View style={styles.actionButtonContainer}>
       <ActionToggleButton
-        loading={false} // TODO: Might need this when there is data fetching
+        loading={markReadPending}
         disabled={emptyConversation}
-        toggled={latestMessageUnread}
-        onPress={() => handleLatestMessageUnread()}
+        toggled={!read}
+        onPress={handleLatestMessageUnread}
         toggleContent={latestMessageUnreadToggleContent}
         backgroundColor={tokens.fillColorInteractionSwipeDefault}
       />
       <ActionToggleButton
-        loading={false} // TODO: Might need this when there is data fetching
+        loading={isPending}
         toggled={muted}
-        onPress={() => handleMute()}
+        onPress={handleMute}
         toggleContent={muteToggleContent}
         backgroundColor={tokens.fillColorInteractionSwipeSecondary}
       />

package/src/components/conversations/conversations.tsx

@@ -6,7 +6,6 @@ import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
 import { Text } from '../display'
 import { ConversationPreview } from './conversation_preview'
-import { ConversationActionsProvider } from '../../contexts/swipeable_active_conversation'
 
 interface ConversationsProps {
   ListHeaderComponent?:
@@ -32,31 +31,29 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
   const showBadges = !chat_group_graph_id
 
   return (
-    <ConversationActionsProvider>
-      <View style={styles.container}>
-        <FlashList
-          data={conversations}
-          estimatedItemSize={97}
-          contentContainerStyle={styles.contentContainer}
-          onRefresh={refetch}
-          refreshing={!isFetched && isRefetching}
-          ListHeaderComponent={ListHeaderComponent}
-          ListEmptyComponent={
-            <View style={styles.listEmpty}>
-              <Text variant="secondary">No conversations found</Text>
-            </View>
-          }
-          renderItem={({ item }) => (
-            <ConversationPreview
-              conversation={item}
-              onPress={() => navigation.navigate('Conversation', { conversation_id: item.id })}
-              showBadges={showBadges}
-            />
-          )}
-          onEndReached={() => fetchNextPage()}
-        />
-      </View>
-    </ConversationActionsProvider>
+    <View style={styles.container}>
+      <FlashList
+        data={conversations}
+        estimatedItemSize={97}
+        contentContainerStyle={styles.contentContainer}
+        onRefresh={refetch}
+        refreshing={!isFetched && isRefetching}
+        ListHeaderComponent={ListHeaderComponent}
+        ListEmptyComponent={
+          <View style={styles.listEmpty}>
+            <Text variant="secondary">No conversations found</Text>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <ConversationPreview
+            conversation={item}
+            onPress={() => navigation.navigate('Conversation', { conversation_id: item.id })}
+            showBadges={showBadges}
+          />
+        )}
+        onEndReached={() => fetchNextPage()}
+      />
+    </View>
   )
 }
 

package/src/contexts/chat_context.tsx

@@ -49,6 +49,10 @@ export interface CreateChatThemeProps {
   colorScheme?: ColorSchemeName
 }
 
+export const useChatContext = () => {
+  return React.useContext(ChatContext)
+}
+
 export const useCreateChatTheme = ({
   theme: customTheme = {},
   colorScheme: appColorScheme,

package/src/contexts/conversations_context.tsx

@@ -7,7 +7,7 @@ import {
   InfiniteData,
 } from '@tanstack/react-query'
 import { ApiCollection, ConversationResource } from '../types'
-import { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events'
+import { useConversationsJoltEvents } from '../hooks/use_conversations_jolt_events'
 
 interface ConversationsContextValue extends UseConversationsValue {
   activeConversationId?: number
@@ -41,17 +41,7 @@ export const ConversationsContextProvider = ({
   const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
   const { chat_group_graph_id, group_source_app_name } = args
 
-  const filter = useMemo(() => {
-    if (chat_group_graph_id) {
-      return 'group'
-    } else if (group_source_app_name) {
-      return 'group_source_app_name'
-    }
-
-    return 'mine_or_not_empty'
-  }, [chat_group_graph_id, group_source_app_name])
-
-  const query = useConversations({ group: chat_group_graph_id, group_source_app_name, filter })
+  const query = useConversations({ chat_group_graph_id, group_source_app_name })
 
   const value = useMemo(
     () => ({
@@ -63,7 +53,7 @@ export const ConversationsContextProvider = ({
     [args, activeConversationId, query]
   )
 
-  useConversationsJoltEvents()
+  useConversationsJoltEvents(args)
 
   return <ConversationsContext.Provider value={value}>{children}</ConversationsContext.Provider>
 }

package/src/hooks/use_conversations_actions.ts

@@ -0,0 +1,108 @@
+import { useMutation } from '@tanstack/react-query'
+import { Alert } from 'react-native'
+import { useConversationsContext } from '../contexts/conversations_context'
+import { ApiResource, ConversationResource } from '../types'
+import { useApiClient } from './use_api_client'
+import { useConversationsCache } from './use_conversations_cache'
+
+export const useConversationsMarkRead = ({
+  conversation,
+}: {
+  conversation: ConversationResource
+}) => {
+  const apiClient = useApiClient()
+  const { args } = useConversationsContext()
+  const { update, invalidate } = useConversationsCache(args)
+
+  const { mutate: handleMarkRead, ...mutation } = useMutation({
+    onMutate: async (read: boolean) => {
+      update({
+        ...conversation,
+        unreadCount: read ? 0 : 1,
+      })
+    },
+    mutationKey: ['markRead', conversation.id],
+    mutationFn: async (read: boolean) => {
+      const action = read ? 'mark_read' : 'mark_unread'
+
+      return apiClient.chat.post<ApiResource<ConversationResource>>({
+        url: `/me/conversations/${conversation.id}/${action}`,
+        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'unread_count' } },
+      })
+    },
+    onSuccess: (response: ApiResource<ConversationResource>) => {
+      update(response.data)
+    },
+    onError: () => {
+      Alert.alert('Oops', 'Something went wrong updating this conversation, please try again')
+      invalidate()
+    },
+  })
+
+  return {
+    read: conversation.unreadCount < 1, // prefer cache
+    markRead: handleMarkRead,
+    ...mutation,
+  }
+}
+
+export const useConversationsMute = ({ conversation }: { conversation: ConversationResource }) => {
+  const apiClient = useApiClient()
+  const { args } = useConversationsContext()
+  const { update, invalidate } = useConversationsCache(args)
+
+  const { mutate: setMuted, ...mutation } = useMutation({
+    onMutate: async (muted: boolean) => {
+      update({
+        ...conversation,
+        muted,
+      })
+    },
+    mutationKey: ['muteConversation'],
+    mutationFn: async (muted: boolean) => {
+      const action = muted ? 'mute' : 'unmute'
+
+      return apiClient.chat.post<ApiResource<ConversationResource>>({
+        url: `/me/conversations/${conversation.id}/${action}`,
+        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'muted' } },
+      })
+    },
+    onSuccess: (response: ApiResource<ConversationResource>) => {
+      update(response.data)
+    },
+    onError: () => {
+      Alert.alert('Oops', 'Something went wrong muting this conversation, please try again')
+      invalidate()
+    },
+  })
+
+  return {
+    muted: conversation.muted, // prefer cache
+    setMuted,
+    ...mutation,
+  }
+}
+
+export const useMarkAllRead = () => {
+  const apiClient = useApiClient()
+  const { args } = useConversationsContext()
+  const { invalidate, updateAll } = useConversationsCache(args)
+  const { mutate: markAllRead, ...query } = useMutation({
+    onMutate: () => {
+      updateAll({
+        unreadCount: 0,
+      })
+    },
+    mutationKey: ['markAllRead', args],
+    mutationFn: () =>
+      apiClient.chat.post({
+        url: '/me/mark_all_read',
+      }),
+    onSettled: invalidate,
+  })
+
+  return {
+    markAllRead,
+    ...query,
+  }
+}

package/src/hooks/{use_conversation_jolt_events.ts → use_conversations_cache.ts}

@@ -1,23 +1,20 @@
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ConversationResource } from '../types'
-import { deleteRecordInPagesData, updateOrCreateRecordInPagesData } from '../utils'
+import {
+  deleteRecordInPagesData,
+  updateAllRecordsInPagesData,
+  updateOrCreateRecordInPagesData,
+} from '../utils'
+import { ConversationRequestArgs, getConversationsRequestArgs } from '../utils/request/conversation'
 import { useApiClient } from './use_api_client'
-import { useCurrentPerson } from './use_current_person'
-import { useJoltChannel, useJoltEvent } from './use_jolt'
 import { getRequestQueryKey } from './use_suspense_api'
-import { JoltConversationEvent } from '../types/jolt_events'
-import { ConversationDeletedEvent } from '../types/jolt_events/conversation_events'
-import { getConversationsRequestArgs } from '../utils/request/conversation'
 
 type QueryData = InfiniteData<ApiCollection<ConversationResource>>
 
-export function useConversationsJoltEvents() {
+export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
-  const currentPerson = useCurrentPerson()
-  const joltChannel = useJoltChannel(`chat.people.${currentPerson.id}`)
-
-  const conversationsRequestArgs = getConversationsRequestArgs()
+  const conversationsRequestArgs = getConversationsRequestArgs(args)
   const conversationQueryKey = getRequestQueryKey(conversationsRequestArgs)
 
   const fetchConversation = async (id: number) => {
@@ -33,10 +30,7 @@ export function useConversationsJoltEvents() {
     return data
   }
 
-  const handleConversationUpdateOrCreate = async (e: JoltConversationEvent) => {
-    const { data } = e.data
-    const conversation: ConversationResource = await fetchConversation(data.id).catch(c => c)
-
+  const updateOrCreate = async (conversation: ConversationResource) => {
     queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
       updateOrCreateRecordInPagesData({
         data: prev,
@@ -48,16 +42,37 @@ export function useConversationsJoltEvents() {
     )
   }
 
-  const handleConversationDestroy = (e: ConversationDeletedEvent) => {
+  const updateAll = async (update: Partial<ConversationResource>) => {
+    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
+      updateAllRecordsInPagesData({
+        data: prev,
+        processRecord: record => ({ ...record, ...update }),
+      })
+    )
+  }
+
+  const fetchAndUpdateOrCreate = async ({ id }: { id: number }) => {
+    const conversation: ConversationResource = await fetchConversation(id).catch(c => c)
+
+    updateOrCreate(conversation)
+  }
+
+  const handleConversationDestroy = ({ id }: { id: number }) => {
     queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
       deleteRecordInPagesData({
         data: prev,
-        record: { id: e.data.data.id },
+        record: { id },
       })
     )
   }
 
-  useJoltEvent(joltChannel, 'conversation.updated', handleConversationUpdateOrCreate)
-  useJoltEvent(joltChannel, 'conversation.created', handleConversationUpdateOrCreate)
-  useJoltEvent(joltChannel, 'conversation.destroyed', handleConversationDestroy)
+  return {
+    create: updateOrCreate,
+    destroy: handleConversationDestroy,
+    fetchCreate: fetchAndUpdateOrCreate,
+    fetchUpdate: fetchAndUpdateOrCreate,
+    invalidate: () => queryClient.invalidateQueries({ queryKey: conversationQueryKey }),
+    update: updateOrCreate,
+    updateAll,
+  }
 }

package/src/hooks/use_conversations_jolt_events.ts

@@ -0,0 +1,21 @@
+import { JoltConversationEvent } from '../types/jolt_events'
+import { ConversationRequestArgs } from '../utils/request/conversation'
+import { useConversationsCache } from './use_conversations_cache'
+import { useCurrentPerson } from './use_current_person'
+import { useJoltChannel, useJoltEvent } from './use_jolt'
+
+export function useConversationsJoltEvents(args?: Partial<ConversationRequestArgs>) {
+  const currentPerson = useCurrentPerson()
+  const joltChannel = useJoltChannel(`chat.people.${currentPerson.id}`)
+  const cache = useConversationsCache(args)
+
+  useJoltEvent(joltChannel, 'conversation.updated', (e: JoltConversationEvent) =>
+    cache.fetchUpdate({ id: e.data.data.id })
+  )
+  useJoltEvent(joltChannel, 'conversation.created', (e: JoltConversationEvent) =>
+    cache.fetchCreate({ id: e.data.data.id })
+  )
+  useJoltEvent(joltChannel, 'conversation.destroyed', (e: JoltConversationEvent) =>
+    cache.destroy({ id: e.data.data.id })
+  )
+}

package/src/hooks/use_jolt.ts

@@ -1,13 +1,17 @@
 import JoltClient from '@planningcenter/jolt-client'
-import { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
+import {
+  CustomMessage,
+  FetchAuthToken,
+} from '@planningcenter/jolt-client/dist/types/JoltConnection'
 import {
   FetchSubscribeToken,
   JoltSubscription,
 } from '@planningcenter/jolt-client/dist/types/JoltSubscription'
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
-import { useEffect, useState } from 'react'
+import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+import { useEffect, useMemo, useState } from 'react'
+import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
-import { useApiClient } from './use_api_client'
+import { Client } from '../utils'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -16,11 +20,18 @@ interface JoltResponse {
 }
 
 export const useJoltClient = (): JoltClient | undefined => {
-  const apiClient = useApiClient()
+  const { session } = useChatContext()
+  const queryClient = useQueryClient()
+  const apiClient = useMemo(
+    // Client that does not relay 401 errors
+    () => new Client({ app: 'chat', session, version: '2018-11-01' }),
+    [session]
+  )
+
   const { data: joltToken } = useSuspenseQuery<ApiResource<JoltResponse>>({
     queryKey: ['jolt-token'],
     queryFn: () => {
-      return apiClient.chat.post({
+      return apiClient.post({
         url: '/me/jolt_authorize',
         data: {
           data: {
@@ -32,12 +43,27 @@ export const useJoltClient = (): JoltClient | undefined => {
     },
   })
 
-  const fetchAuthTokenFn = async () => {
-    return joltToken.data.id || ''
+  const fetchJoltToken = async () => {
+    return apiClient.post<ApiResource<JoltResponse>>({
+      url: '/me/jolt_authorize',
+      data: {
+        data: {
+          type: 'JoltToken',
+          attributes: {},
+        },
+      },
+    })
   }
 
-  const fetchSubscribeTokenFn: FetchSubscribeToken = (channel: string, connectionId: string) => {
-    return apiClient.chat
+  const fetchAuthTokenFn: FetchAuthToken = () => {
+    return queryClient.fetchQuery({
+      queryKey: ['jolt-token'],
+      queryFn: () => fetchJoltToken().then(res => res.data.id),
+    })
+  }
+
+  const fetchSubscribeToken: FetchSubscribeToken = (channel: string, connectionId: string) => {
+    return apiClient
       .post<ApiResource<JoltResponse>>({
         url: '/me/jolt_subscribe',
         data: {
@@ -48,6 +74,21 @@ export const useJoltClient = (): JoltClient | undefined => {
         },
       })
       .then(res => res.data.id)
+      .catch((res: unknown) => {
+        console.error('failed to subscribe to Jolt channel', res)
+        return ''
+      })
+  }
+
+  const fetchSubscribeTokenFn: FetchSubscribeToken = (
+    channel: string,
+    connectionId: string,
+    options
+  ) => {
+    return queryClient.fetchQuery({
+      queryKey: ['jolt-subscribe-token', channel, connectionId],
+      queryFn: () => fetchSubscribeToken(channel, connectionId, options),
+    })
   }
 
   const { data: joltClient } = useQuery({

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

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
 import { useTheme } from '../../../hooks'
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { ConversationScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
@@ -22,6 +23,8 @@ export const ListHeaderComponent = () => {
   const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
   const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}
 
+  const { markAllRead, isPending } = useMarkAllRead()
+
   const active: FilterTypes = useMemo(() => {
     if (chat_group_graph_id) {
       return FilterTypes.More
@@ -42,7 +45,9 @@ export const ListHeaderComponent = () => {
         <Heading numberOfLines={1} variant="h2">
           Conversations
         </Heading>
-        <TextButton>Mark all read</TextButton>
+        <TextButton onPress={() => markAllRead()} disabled={isPending}>
+          Mark all read
+        </TextButton>
       </View>
       <View style={styles.filterRow}>
         {showAppFilters && (

package/src/utils/cache/page_mutations.ts

@@ -73,6 +73,28 @@ export function updateOrCreateRecordInPagesData<T extends ResourceObject>({
   return { ...data, pages: newPages }
 }
 
+/**
+ * updateOrCreateRecordInPagesData
+ * Updates record if found in the cache, otherwise inserts.
+ */
+export function updateAllRecordsInPagesData<T extends ResourceObject>({
+  data,
+  processRecord = r => r,
+}: {
+  data?: { pages: ApiCollection<T>[]; pageParams: any }
+  processRecord?: (_next: T) => T
+}) {
+  if (!data) return data
+
+  const newPages = data.pages.map(page => {
+    const newData = page.data.map(processRecord)
+
+    return { ...page, data: newData }
+  })
+
+  return { ...data, pages: newPages }
+}
+
 export function addRecordInPagesData<T extends ResourceObject>({
   data,
   record,