@planningcenter/chat-react-native 4.2.1-qa-staging.2 → 4.2.1-qa-staging.4

package/build/utils/cache/optimistically_update_message.js.map

@@ -1 +1 @@
-{"version":3,"file":"optimistically_update_message.js","names":["chatQueryClient","getMessagesQueryKey","updateOrCreateRecordInPagesData","optimisticallyUpdateMessage","conversationId","message","text","replyRootId","queryKey","conversation_id","reply_root_id","optimisticMessage","setQueryData","data","record","processRecord","next","prev","pending"],"sources":["../../../src/utils/cache/optimistically_update_message.ts"],"sourcesContent":["import { InfiniteData } from '@tanstack/react-query'\nimport { chatQueryClient } from '../../contexts/api_provider'\nimport { ApiCollection, MessageResource } from '../../types'\nimport { getMessagesQueryKey } from '../../utils/request/get_messages'\nimport { updateOrCreateRecordInPagesData } from './page_mutations'\n\nexport function optimisticallyUpdateMessage({\n  conversationId,\n  message,\n  text,\n  replyRootId,\n}: {\n  conversationId: number\n  message: MessageResource\n  text: string\n  replyRootId?: string | null\n}) {\n  type QueryData = InfiniteData<ApiCollection<MessageResource>>\n\n  const queryKey = getMessagesQueryKey({\n    conversation_id: conversationId,\n    reply_root_id: replyRootId,\n  })\n\n  let optimisticMessage = message\n\n  chatQueryClient.setQueryData<QueryData>(queryKey, data =>\n    updateOrCreateRecordInPagesData({\n      data,\n      record: message,\n      processRecord: (next, prev) => {\n        optimisticMessage = {\n          ...(prev || next),\n          text,\n          pending: true,\n        }\n        return optimisticMessage\n      },\n    })\n  )\n\n  return optimisticMessage\n}\n"],"mappings":"AACA,SAASA,eAAe,QAAQ,6BAA6B;AAE7D,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,+BAA+B,QAAQ,kBAAkB;AAElE,OAAO,SAASC,2BAA2BA,CAAC;EAC1CC,cAAc;EACdC,OAAO;EACPC,IAAI;EACJC;AAMF,CAAC,EAAE;EAGD,MAAMC,QAAQ,GAAGP,mBAAmB,CAAC;IACnCQ,eAAe,EAAEL,cAAc;IAC/BM,aAAa,EAAEH;EACjB,CAAC,CAAC;EAEF,IAAII,iBAAiB,GAAGN,OAAO;EAE/BL,eAAe,CAACY,YAAY,CAAYJ,QAAQ,EAAEK,IAAI,IACpDX,+BAA+B,CAAC;IAC9BW,IAAI;IACJC,MAAM,EAAET,OAAO;IACfU,aAAa,EAAEA,CAACC,IAAI,EAAEC,IAAI,KAAK;MAC7BN,iBAAiB,GAAG;QAClB,IAAIM,IAAI,IAAID,IAAI,CAAC;QACjBV,IAAI;QACJY,OAAO,EAAE;MACX,CAAC;MACD,OAAOP,iBAAiB;IAC1B;EACF,CAAC,CACH,CAAC;EAED,OAAOA,iBAAiB;AAC1B","ignoreList":[]}
+{"version":3,"file":"optimistically_update_message.js","names":["chatQueryClient","getMessagesQueryKey","updateOrCreateRecordInPagesData","optimisticallyUpdateMessage","conversationId","message","text","replyRootId","queryKey","conversation_id","reply_root_id","optimisticMessage","setQueryData","data","record","processRecord","next","prev","pending"],"sources":["../../../src/utils/cache/optimistically_update_message.ts"],"sourcesContent":["import { InfiniteData } from '@tanstack/react-query'\nimport { chatQueryClient } from '../../contexts/api_provider'\nimport { ApiCollection, MessageResource } from '../../types'\nimport { getMessagesQueryKey } from '../../utils/request/get_messages'\nimport { updateOrCreateRecordInPagesData } from './page_mutations'\n\nexport function optimisticallyUpdateMessage({\n  conversationId,\n  message,\n  text,\n  replyRootId,\n  queryKey = getMessagesQueryKey({ conversation_id: conversationId, reply_root_id: replyRootId }),\n}: {\n  conversationId: number\n  message: MessageResource\n  text: string\n  replyRootId?: string | null\n  queryKey?: unknown[]\n}) {\n  type QueryData = InfiniteData<ApiCollection<MessageResource>>\n\n  let optimisticMessage = message\n\n  chatQueryClient.setQueryData<QueryData>(queryKey, data =>\n    updateOrCreateRecordInPagesData({\n      data,\n      record: message,\n      processRecord: (next, prev) => {\n        optimisticMessage = {\n          ...(prev || next),\n          text,\n          pending: true,\n        }\n        return optimisticMessage\n      },\n    })\n  )\n\n  return optimisticMessage\n}\n"],"mappings":"AACA,SAASA,eAAe,QAAQ,6BAA6B;AAE7D,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,+BAA+B,QAAQ,kBAAkB;AAElE,OAAO,SAASC,2BAA2BA,CAAC;EAC1CC,cAAc;EACdC,OAAO;EACPC,IAAI;EACJC,WAAW;EACXC,QAAQ,GAAGP,mBAAmB,CAAC;IAAEQ,eAAe,EAAEL,cAAc;IAAEM,aAAa,EAAEH;EAAY,CAAC;AAOhG,CAAC,EAAE;EAGD,IAAII,iBAAiB,GAAGN,OAAO;EAE/BL,eAAe,CAACY,YAAY,CAAYJ,QAAQ,EAAEK,IAAI,IACpDX,+BAA+B,CAAC;IAC9BW,IAAI;IACJC,MAAM,EAAET,OAAO;IACfU,aAAa,EAAEA,CAACC,IAAI,EAAEC,IAAI,KAAK;MAC7BN,iBAAiB,GAAG;QAClB,IAAIM,IAAI,IAAID,IAAI,CAAC;QACjBV,IAAI;QACJY,OAAO,EAAE;MACX,CAAC;MACD,OAAOP,iBAAiB;IAC1B;EACF,CAAC,CACH,CAAC;EAED,OAAOA,iBAAiB;AAC1B","ignoreList":[]}

package/build/utils/cache/prepend_newer_page.d.ts

@@ -2,6 +2,6 @@ import { InfiniteData } from '@tanstack/react-query';
 import { ApiCollection, ResourceObject } from '../../types';
 import { RequestData } from '../client';
 type PagesData<T extends ResourceObject> = InfiniteData<ApiCollection<T>, Partial<RequestData>>;
-export declare function prependNewerPage<T extends ResourceObject>(data: PagesData<T> | undefined, page: ApiCollection<T>, pageParam: Partial<RequestData>): PagesData<T> | undefined;
+export declare function prependNewerPage<T extends ResourceObject>(data: PagesData<T> | undefined, pages: ApiCollection<T>[]): PagesData<T> | undefined;
 export {};
 //# sourceMappingURL=prepend_newer_page.d.ts.map

package/build/utils/cache/prepend_newer_page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prepend_newer_page.d.ts","sourceRoot":"","sources":["../../../src/utils/cache/prepend_newer_page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAEvC,KAAK,SAAS,CAAC,CAAC,SAAS,cAAc,IAAI,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAA;AAE/F,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,cAAc,EACvD,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,EAC9B,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EACtB,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,GAC9B,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAW1B"}
+{"version":3,"file":"prepend_newer_page.d.ts","sourceRoot":"","sources":["../../../src/utils/cache/prepend_newer_page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAEvC,KAAK,SAAS,CAAC,CAAC,SAAS,cAAc,IAAI,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAA;AAE/F,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,cAAc,EACvD,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,EAC9B,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,GACxB,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAS1B"}

package/build/utils/cache/prepend_newer_page.js

@@ -1,14 +1,15 @@
-export function prependNewerPage(data, page, pageParam) {
-  if (!data) return data;
-  const knownIds = new Set(data.pages.flatMap(p => p.data.map(record => record.id)));
-  const fresh = page.data.filter(record => !knownIds.has(record.id));
-  if (fresh.length === 0 && !page.meta?.next) return data;
+export function prependNewerPage(data, pages) {
+  if (!data || data.pages.length === 0) return data;
+  const knownIds = new Set(data.pages.flatMap(page => page.data.map(record => record.id)));
+  const fresh = pages.flatMap(page => page.data).filter(record => !knownIds.has(record.id));
+  if (fresh.length === 0) return data;
+  const [first, ...rest] = data.pages;
   return {
+    ...data,
     pages: [{
-      ...page,
-      data: fresh
-    }, ...data.pages],
-    pageParams: [pageParam, ...data.pageParams]
+      ...first,
+      data: [...fresh, ...first.data]
+    }, ...rest]
   };
 }
 //# sourceMappingURL=prepend_newer_page.js.map

package/build/utils/cache/prepend_newer_page.js.map

@@ -1 +1 @@
-{"version":3,"file":"prepend_newer_page.js","names":["prependNewerPage","data","page","pageParam","knownIds","Set","pages","flatMap","p","map","record","id","fresh","filter","has","length","meta","next","pageParams"],"sources":["../../../src/utils/cache/prepend_newer_page.ts"],"sourcesContent":["import { InfiniteData } from '@tanstack/react-query'\nimport { ApiCollection, ResourceObject } from '../../types'\nimport { RequestData } from '../client'\n\ntype PagesData<T extends ResourceObject> = InfiniteData<ApiCollection<T>, Partial<RequestData>>\n\nexport function prependNewerPage<T extends ResourceObject>(\n  data: PagesData<T> | undefined,\n  page: ApiCollection<T>,\n  pageParam: Partial<RequestData>\n): PagesData<T> | undefined {\n  if (!data) return data\n\n  const knownIds = new Set(data.pages.flatMap(p => p.data.map(record => record.id)))\n  const fresh = page.data.filter(record => !knownIds.has(record.id))\n  if (fresh.length === 0 && !page.meta?.next) return data\n\n  return {\n    pages: [{ ...page, data: fresh }, ...data.pages],\n    pageParams: [pageParam, ...data.pageParams],\n  }\n}\n"],"mappings":"AAMA,OAAO,SAASA,gBAAgBA,CAC9BC,IAA8B,EAC9BC,IAAsB,EACtBC,SAA+B,EACL;EAC1B,IAAI,CAACF,IAAI,EAAE,OAAOA,IAAI;EAEtB,MAAMG,QAAQ,GAAG,IAAIC,GAAG,CAACJ,IAAI,CAACK,KAAK,CAACC,OAAO,CAACC,CAAC,IAAIA,CAAC,CAACP,IAAI,CAACQ,GAAG,CAACC,MAAM,IAAIA,MAAM,CAACC,EAAE,CAAC,CAAC,CAAC;EAClF,MAAMC,KAAK,GAAGV,IAAI,CAACD,IAAI,CAACY,MAAM,CAACH,MAAM,IAAI,CAACN,QAAQ,CAACU,GAAG,CAACJ,MAAM,CAACC,EAAE,CAAC,CAAC;EAClE,IAAIC,KAAK,CAACG,MAAM,KAAK,CAAC,IAAI,CAACb,IAAI,CAACc,IAAI,EAAEC,IAAI,EAAE,OAAOhB,IAAI;EAEvD,OAAO;IACLK,KAAK,EAAE,CAAC;MAAE,GAAGJ,IAAI;MAAED,IAAI,EAAEW;IAAM,CAAC,EAAE,GAAGX,IAAI,CAACK,KAAK,CAAC;IAChDY,UAAU,EAAE,CAACf,SAAS,EAAE,GAAGF,IAAI,CAACiB,UAAU;EAC5C,CAAC;AACH","ignoreList":[]}
+{"version":3,"file":"prepend_newer_page.js","names":["prependNewerPage","data","pages","length","knownIds","Set","flatMap","page","map","record","id","fresh","filter","has","first","rest"],"sources":["../../../src/utils/cache/prepend_newer_page.ts"],"sourcesContent":["import { InfiniteData } from '@tanstack/react-query'\nimport { ApiCollection, ResourceObject } from '../../types'\nimport { RequestData } from '../client'\n\ntype PagesData<T extends ResourceObject> = InfiniteData<ApiCollection<T>, Partial<RequestData>>\n\nexport function prependNewerPage<T extends ResourceObject>(\n  data: PagesData<T> | undefined,\n  pages: ApiCollection<T>[]\n): PagesData<T> | undefined {\n  if (!data || data.pages.length === 0) return data\n\n  const knownIds = new Set(data.pages.flatMap(page => page.data.map(record => record.id)))\n  const fresh = pages.flatMap(page => page.data).filter(record => !knownIds.has(record.id))\n  if (fresh.length === 0) return data\n\n  const [first, ...rest] = data.pages\n  return { ...data, pages: [{ ...first, data: [...fresh, ...first.data] }, ...rest] }\n}\n"],"mappings":"AAMA,OAAO,SAASA,gBAAgBA,CAC9BC,IAA8B,EAC9BC,KAAyB,EACC;EAC1B,IAAI,CAACD,IAAI,IAAIA,IAAI,CAACC,KAAK,CAACC,MAAM,KAAK,CAAC,EAAE,OAAOF,IAAI;EAEjD,MAAMG,QAAQ,GAAG,IAAIC,GAAG,CAACJ,IAAI,CAACC,KAAK,CAACI,OAAO,CAACC,IAAI,IAAIA,IAAI,CAACN,IAAI,CAACO,GAAG,CAACC,MAAM,IAAIA,MAAM,CAACC,EAAE,CAAC,CAAC,CAAC;EACxF,MAAMC,KAAK,GAAGT,KAAK,CAACI,OAAO,CAACC,IAAI,IAAIA,IAAI,CAACN,IAAI,CAAC,CAACW,MAAM,CAACH,MAAM,IAAI,CAACL,QAAQ,CAACS,GAAG,CAACJ,MAAM,CAACC,EAAE,CAAC,CAAC;EACzF,IAAIC,KAAK,CAACR,MAAM,KAAK,CAAC,EAAE,OAAOF,IAAI;EAEnC,MAAM,CAACa,KAAK,EAAE,GAAGC,IAAI,CAAC,GAAGd,IAAI,CAACC,KAAK;EACnC,OAAO;IAAE,GAAGD,IAAI;IAAEC,KAAK,EAAE,CAAC;MAAE,GAAGY,KAAK;MAAEb,IAAI,EAAE,CAAC,GAAGU,KAAK,EAAE,GAAGG,KAAK,CAACb,IAAI;IAAE,CAAC,EAAE,GAAGc,IAAI;EAAE,CAAC;AACrF","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.2.1-qa-staging.2",
+  "version": "4.2.1-qa-staging.4",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "4.2.1-qa-staging.2",
+    "@planningcenter/emoji-keyboard": "4.2.1-qa-staging.4",
     "lodash-inflection": "^1.5.0"
   },
   "peerDependencies": {
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "c5e62783ef9da7bf5ecbae701318df69b9686608"
+  "gitHead": "1afcd60f0a1a2840897f18200201b71fe4c18b0f"
 }

package/src/__tests__/hooks/use_conversation_messages.test.ts

@@ -0,0 +1,22 @@
+import { anchoredRetry } from '../../hooks/use_conversation_messages'
+import { FailedResponse } from '../../types/api_primitives'
+import { ResponseError } from '../../utils/response_error'
+
+const responseError = (status: number) =>
+  new ResponseError({ status, statusText: 'nope' } as unknown as FailedResponse)
+
+describe('anchoredRetry', () => {
+  it('gives up straight away on a missing anchor', () => {
+    expect(anchoredRetry(0, responseError(404))).toBe(false)
+  })
+
+  it('does not hammer a rate limit', () => {
+    expect(anchoredRetry(0, responseError(429))).toBe(false)
+  })
+
+  it('retries other failures a few times', () => {
+    expect(anchoredRetry(0, responseError(500))).toBe(true)
+    expect(anchoredRetry(2, new Error('network'))).toBe(true)
+    expect(anchoredRetry(3, responseError(500))).toBe(false)
+  })
+})

package/src/__tests__/hooks/use_conversation_messages_jolt_events.test.ts

@@ -1,36 +1,33 @@
-import {
-  queryKeysForEvent,
-  resolveMessageCaches,
-} from '../../hooks/use_conversation_messages_jolt_events'
+import { queryKeysForEvent } from '../../hooks/use_conversation_messages_jolt_events'
 
-const main = ['main']
-const threaded = ['threaded']
+const cache = { queryKey: ['shown'] }
+const gated = { queryKey: ['shown'], canUpdate: (e: string) => e !== 'message.created' }
+const topLevel = { sort_key: '01M', reply_root_id: null }
+const replyInThread = { sort_key: '01R', reply_root_id: '01ROOT' }
+const replyElsewhere = { sort_key: '01S', reply_root_id: '01OTHER' }
+const theRoot = { sort_key: '01ROOT', reply_root_id: '01ROOT' }
 
-describe('resolveMessageCaches', () => {
-  it('lets an override replace the default entry for the same key', () => {
-    const gate = { queryKey: ['main'], canUpdate: () => false }
-
-    expect(resolveMessageCaches([main, threaded], [gate])).toEqual([gate, { queryKey: threaded }])
-  })
-
-  it('appends caches that are not among the defaults', () => {
-    const extra = { queryKey: ['anchored'] }
+describe('queryKeysForEvent', () => {
+  it('writes every message event to the conversation view', () => {
+    const view = { replyRootId: null, cache }
 
-    expect(resolveMessageCaches([main], [extra])).toEqual([{ queryKey: main }, extra])
+    expect(queryKeysForEvent('message.created', view, topLevel)).toEqual([['shown']])
+    expect(queryKeysForEvent('message.created', view, replyInThread)).toEqual([['shown']])
   })
-})
 
-describe('queryKeysForEvent', () => {
-  const noInserts = { queryKey: ['anchored'], canUpdate: (e: string) => e !== 'message.created' }
+  it('writes only this thread and its root to a reply view', () => {
+    const view = { replyRootId: '01ROOT', cache }
 
-  it('returns every cache that accepts the event', () => {
-    expect(queryKeysForEvent('message.updated', [main], [noInserts])).toEqual([main, ['anchored']])
+    expect(queryKeysForEvent('message.created', view, replyInThread)).toEqual([['shown']])
+    expect(queryKeysForEvent('message.updated', view, theRoot)).toEqual([['shown']])
+    expect(queryKeysForEvent('message.created', view, topLevel)).toEqual([])
+    expect(queryKeysForEvent('message.created', view, replyElsewhere)).toEqual([])
   })
 
-  it('skips caches whose predicate rejects the event, including a gated default', () => {
-    const gatedMain = { queryKey: ['main'], canUpdate: (e: string) => e !== 'message.created' }
+  it('honors the gate on the shown cache', () => {
+    const view = { replyRootId: null, cache: gated }
 
-    expect(queryKeysForEvent('message.created', [main], [noInserts])).toEqual([main])
-    expect(queryKeysForEvent('message.created', [main, threaded], [gatedMain])).toEqual([threaded])
+    expect(queryKeysForEvent('message.created', view, topLevel)).toEqual([])
+    expect(queryKeysForEvent('reaction', view, topLevel)).toEqual([['shown']])
   })
 })

package/src/components/conversation/message_form.tsx

@@ -229,8 +229,6 @@ function MessageFormRoot({
   const handleSubmit = () => {
     if (!canSubmit) return
 
-    onBeforeSubmit?.()
-
     if (canGiphy && usingGiphy) {
       TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())
       Haptic.impactLight()
@@ -252,6 +250,7 @@ function MessageFormRoot({
         mutateAsync({ text: messageText })
         reset()
       } else {
+        onBeforeSubmit?.()
         mutateAsync({ text: messageText, attachments: attachmentsForSubmit })
         reset()
       }

package/src/contexts/conversation_context.tsx

@@ -3,29 +3,34 @@ import React, { createContext, PropsWithChildren, useContext, useMemo } from 're
 interface ConversationContextValue {
   conversationId: number
   currentPageReplyRootId: string | null
+  messagesQueryKey: unknown[] | null
 }
 
 interface ConversationContextProviderProps extends PropsWithChildren {
   conversationId: number
   currentPageReplyRootId: string | null
+  messagesQueryKey?: unknown[] | null
 }
 
 const ConversationContext = createContext<ConversationContextValue>({
   conversationId: 0,
   currentPageReplyRootId: null,
+  messagesQueryKey: null,
 })
 
 export const ConversationContextProvider = ({
   children,
   conversationId,
   currentPageReplyRootId,
+  messagesQueryKey = null,
 }: ConversationContextProviderProps) => {
   const value = useMemo(
     () => ({
       conversationId,
       currentPageReplyRootId,
+      messagesQueryKey,
     }),
-    [conversationId, currentPageReplyRootId]
+    [conversationId, currentPageReplyRootId, messagesQueryKey]
   )
 
   return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>

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

@@ -0,0 +1,68 @@
+import { InfiniteData, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { ApiCollection, MessageResource } from '../../types'
+import { getMessagesQueryKey } from '../../utils/request/get_messages'
+import { ApiClient, useApiClient } from '../use_api_client'
+import { useFetchNewerMessages } from '../use_fetch_newer_messages'
+
+jest.mock('../use_api_client')
+
+type QueryData = InfiniteData<ApiCollection<MessageResource>>
+
+const page = (ids: string[], next?: { idGt: string }) => ({
+  data: ids.map(id => ({ id, type: 'Message' }) as unknown as MessageResource),
+  links: {},
+  meta: { count: ids.length, totalCount: ids.length, next },
+})
+
+const queryKey = getMessagesQueryKey({ conversation_id: 1 })
+let queryClient = buildTestQueryClient()
+const get = jest.fn()
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+const cachedIds = () =>
+  queryClient.getQueryData<QueryData>(queryKey)?.pages.flatMap(p => p.data.map(m => m.id))
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient()
+  queryClient.setQueryData<QueryData>(queryKey, {
+    pages: [page(['01C', '01B']), page(['01A'])],
+    pageParams: [{}, { where: { id_lt: '01B' } }],
+  })
+  get.mockReset()
+  ;(useApiClient as jest.MockedFunction<typeof useApiClient>).mockReturnValue({
+    chat: { get },
+  } as unknown as ApiClient)
+})
+
+describe('useFetchNewerMessages', () => {
+  it('follows meta.next until everything newer is in the cache', async () => {
+    get
+      .mockResolvedValueOnce(page(['01D', '01E'], { idGt: '01E' }))
+      .mockResolvedValueOnce(page(['01F']))
+    const { result } = renderHook(() => useFetchNewerMessages({ conversation_id: 1, queryKey }), {
+      wrapper,
+    })
+
+    await act(() => result.current('01C'))
+
+    expect(get).toHaveBeenCalledTimes(2)
+    expect(get.mock.calls[1][0].data.where).toEqual({ id_gt: '01E' })
+    expect(cachedIds()).toEqual(['01D', '01E', '01F', '01C', '01B', '01A'])
+  })
+
+  it('rejects when the request fails so the caller can try again later', async () => {
+    get.mockRejectedValueOnce(new Error('offline'))
+    const { result } = renderHook(() => useFetchNewerMessages({ conversation_id: 1, queryKey }), {
+      wrapper,
+    })
+
+    await expect(act(() => result.current('01C'))).rejects.toThrow('offline')
+    expect(cachedIds()).toEqual(['01C', '01B', '01A'])
+  })
+})

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

@@ -0,0 +1,60 @@
+import { act, renderHook } from '@testing-library/react-native'
+import { useHeldBackMessages } from '../use_held_back_messages'
+
+type Props = { newestMessageId?: string; readingHistory: boolean; caughtUp: boolean }
+
+const setup = (fetchNewer: jest.Mock, initial: Props) =>
+  renderHook((props: Props) => useHeldBackMessages({ fetchNewer, ...props }), {
+    initialProps: initial,
+  })
+
+describe('useHeldBackMessages', () => {
+  it('catches up from where the first skip happened, not from the newest message', async () => {
+    const fetchNewer = jest.fn().mockResolvedValue(undefined)
+    const { result, rerender } = setup(fetchNewer, {
+      newestMessageId: 'A',
+      readingHistory: true,
+      caughtUp: true,
+    })
+
+    act(() => result.current.onSkippedNewMessage())
+    rerender({ newestMessageId: 'B', readingHistory: true, caughtUp: true })
+    await act(async () => rerender({ newestMessageId: 'B', readingHistory: false, caughtUp: true }))
+
+    expect(fetchNewer).toHaveBeenCalledTimes(1)
+    expect(fetchNewer).toHaveBeenCalledWith('A')
+  })
+
+  it('keeps the cursor when the catch-up fails and tries again next time', async () => {
+    const fetchNewer = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('offline'))
+      .mockResolvedValue(undefined)
+    const { result, rerender } = setup(fetchNewer, {
+      newestMessageId: 'A',
+      readingHistory: true,
+      caughtUp: true,
+    })
+
+    act(() => result.current.onSkippedNewMessage())
+    await act(async () => rerender({ newestMessageId: 'A', readingHistory: false, caughtUp: true }))
+    rerender({ newestMessageId: 'C', readingHistory: true, caughtUp: true })
+    await act(async () => rerender({ newestMessageId: 'C', readingHistory: false, caughtUp: true }))
+
+    expect(fetchNewer).toHaveBeenCalledTimes(2)
+    expect(fetchNewer).toHaveBeenLastCalledWith('A')
+  })
+
+  it('does nothing when nothing was held back', async () => {
+    const fetchNewer = jest.fn()
+    const { rerender } = setup(fetchNewer, {
+      newestMessageId: 'A',
+      readingHistory: true,
+      caughtUp: true,
+    })
+
+    await act(async () => rerender({ newestMessageId: 'A', readingHistory: false, caughtUp: true }))
+
+    expect(fetchNewer).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,73 @@
+import { InfiniteData, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ConversationContextProvider } from '../../contexts/conversation_context'
+import type { ApiCollection, MessageResource } from '../../types'
+import { getMessagesQueryKey } from '../../utils/request/get_messages'
+import { ApiClient, useApiClient } from '../use_api_client'
+import { useMessageReactionToggle } from '../use_message_reaction_toggle'
+
+jest.mock('../use_api_client')
+
+type QueryData = InfiniteData<ApiCollection<MessageResource>>
+
+const message = { id: '01M', type: 'Message', reactionCounts: [] } as unknown as MessageResource
+const liveKey = getMessagesQueryKey({ conversation_id: 1 })
+const anchoredKey = getMessagesQueryKey({ conversation_id: 1, anchor: '01A' })
+const seed = (): QueryData => ({
+  pages: [{ data: [message], links: {}, meta: { count: 1, totalCount: 1 } }],
+  pageParams: [{}],
+})
+
+const heartsIn = (queryClient: ReturnType<typeof buildTestQueryClient>, key: unknown[]) =>
+  queryClient
+    .getQueryData<QueryData>(key)
+    ?.pages[0].data[0].reactionCounts.map(r => `${r.value}:${r.count}`)
+
+describe('useMessageReactionToggle', () => {
+  beforeEach(() => {
+    ;(useApiClient as jest.MockedFunction<typeof useApiClient>).mockReturnValue({
+      chat: { post: jest.fn(() => new Promise(() => {})) },
+    } as unknown as ApiClient)
+  })
+
+  it('applies the optimistic reaction to the cache the screen is showing', async () => {
+    const queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+    queryClient.setQueryData<QueryData>(anchoredKey, seed())
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <QueryClientProvider client={queryClient}>
+        <ConversationContextProvider
+          conversationId={1}
+          currentPageReplyRootId={null}
+          messagesQueryKey={anchoredKey}
+        >
+          {children}
+        </ConversationContextProvider>
+      </QueryClientProvider>
+    )
+    const { result } = renderHook(() => useMessageReactionToggle({ conversation_id: 1, message }), {
+      wrapper,
+    })
+
+    await act(async () => result.current.handleReactionToggle({ value: 'heart', mine: false }))
+
+    expect(heartsIn(queryClient, anchoredKey)).toEqual(['heart:1'])
+    expect(queryClient.getQueryData(liveKey)).toBeUndefined()
+  })
+
+  it('falls back to the live cache when no screen key is provided', async () => {
+    const queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+    queryClient.setQueryData<QueryData>(liveKey, seed())
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+    const { result } = renderHook(() => useMessageReactionToggle({ conversation_id: 1, message }), {
+      wrapper,
+    })
+
+    await act(async () => result.current.handleReactionToggle({ value: 'heart', mine: false }))
+
+    expect(heartsIn(queryClient, liveKey)).toEqual(['heart:1'])
+  })
+})

package/src/hooks/use_conversation_message_lookup.ts

@@ -0,0 +1,29 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useCallback, useSyncExternalStore } from 'react'
+import { findMessageInCaches } from '../utils/cache/find_message_in_caches'
+import { useConversationMessage } from './use_conversation_message'
+
+type Options = {
+  conversation_id: number
+  message_id: string
+}
+
+export const useConversationMessageLookup = ({ conversation_id, message_id }: Options) => {
+  const queryClient = useQueryClient()
+  const subscribe = useCallback(
+    (onChange: () => void) => queryClient.getQueryCache().subscribe(onChange),
+    [queryClient]
+  )
+  const getSnapshot = useCallback(
+    () => findMessageInCaches(queryClient, conversation_id, message_id),
+    [conversation_id, message_id, queryClient]
+  )
+  const cached = useSyncExternalStore(subscribe, getSnapshot)
+  const fetched = useConversationMessage({
+    conversation_id,
+    messageId: message_id,
+    enabled: !cached,
+  })
+
+  return cached ?? fetched.message
+}

package/src/hooks/use_conversation_messages.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { MessageResource } from '../types'
 import { replaceEqualById } from '../utils/replace_equal_by_id'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
+import { ResponseError } from '../utils/response_error'
 import { getNewerPageParam } from './paginator_meta'
 import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
@@ -11,6 +12,13 @@ type Options = {
   anchor?: string | null
 }
 
+export const anchoredRetry = (failureCount: number, error: unknown) => {
+  const status = error instanceof ResponseError ? error.status : undefined
+  if (status === 404 || status === 429) return false
+
+  return failureCount < 3
+}
+
 export const useConversationMessages = (
   { conversation_id, reply_root_id, anchor }: Options,
   opts?: SuspensePaginatorOptions
@@ -33,6 +41,7 @@ export const useConversationMessages = (
             getPreviousPageParam: (page, _pages, pageParam) => getNewerPageParam(page, pageParam),
             gcTime: 0,
             staleTime: Infinity,
+            retry: anchoredRetry,
           }
         : {}),
       ...opts,

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -1,4 +1,4 @@
-import { hashKey, InfiniteData, useQueryClient } from '@tanstack/react-query'
+import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { ApiCollection, MessageResource } from '../types'
 import { JoltReactionEvent, JoltTypingEvent } from '../types/jolt_events'
 import {
@@ -12,16 +12,14 @@ import {
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
   updateCacheReplyRoots,
-  getThreadedMessagesQueryKey,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
 import { getMessageQueryKey } from '../utils/request/get_message'
-import { getMessagesRequestArgs } from '../utils/request/get_messages'
+import { getMessagesQueryKey } from '../utils/request/get_messages'
 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 { TYPING_TIMEOUT_INTERVAL, useTypingStatusCache } from './use_typing_status_cache'
 
 export type MessagesJoltEvent =
@@ -35,38 +33,48 @@ export interface MessagesCache {
   canUpdate?: (event: MessagesJoltEvent) => boolean
 }
 
+export interface MessagesView {
+  replyRootId: string | null
+  cache: MessagesCache
+}
+
+type MessageEventData = { sort_key: string; reply_root_id?: string | null }
+
 interface Props {
   conversationId: number
-  messageCaches?: MessagesCache[]
+  replyRootId?: string | null
+  messageCache?: MessagesCache
 }
 
-export const resolveMessageCaches = (defaults: unknown[][], overrides: MessagesCache[]) => {
-  const overrideByHash = new Map(overrides.map(cache => [hashKey(cache.queryKey), cache]))
-  const defaultHashes = new Set(defaults.map(hashKey))
-  const resolved = defaults.map(queryKey => overrideByHash.get(hashKey(queryKey)) ?? { queryKey })
-  const extras = overrides.filter(cache => !defaultHashes.has(hashKey(cache.queryKey)))
-  return [...resolved, ...extras]
-}
+const belongsToView = (replyRootId: string | null, data: MessageEventData) =>
+  replyRootId === null || data.reply_root_id === replyRootId || data.sort_key === replyRootId
 
 export const queryKeysForEvent = (
   event: MessagesJoltEvent,
-  defaults: unknown[][],
-  overrides: MessagesCache[]
-) =>
-  resolveMessageCaches(defaults, overrides)
-    .filter(cache => !cache.canUpdate || cache.canUpdate(event))
-    .map(cache => cache.queryKey)
-
-export function useConversationMessagesJoltEvents({ conversationId, messageCaches = [] }: Props) {
+  view: MessagesView,
+  data: MessageEventData
+) => {
+  const accepted = !view.cache.canUpdate || view.cache.canUpdate(event)
+  return belongsToView(view.replyRootId, data) && accepted ? [view.cache.queryKey] : []
+}
+
+export function useConversationMessagesJoltEvents({
+  conversationId,
+  replyRootId = null,
+  messageCache,
+}: Props) {
   const queryClient = useQueryClient()
   const currentPerson = useCurrentPerson()
   const joltChannel = useJoltChannel(`chat.conversations.${conversationId}`)
-  const messagesRequestArgs = getMessagesRequestArgs({ conversation_id: conversationId })
-  const messagesQueryKey = getRequestQueryKey(messagesRequestArgs)
-  const cachesTouchedBy = (replyRootId?: string | null): unknown[][] =>
-    replyRootId
-      ? [messagesQueryKey, getThreadedMessagesQueryKey(conversationId, replyRootId)]
-      : [messagesQueryKey]
+  const view: MessagesView = {
+    replyRootId,
+    cache: messageCache ?? {
+      queryKey: getMessagesQueryKey({
+        conversation_id: conversationId,
+        reply_root_id: replyRootId,
+      }),
+    },
+  }
   const apiClient = useApiClient()
 
   const { addTypingEvent, removeTypingEventById, removeAllTypingEventsByAuthorId } =
@@ -87,11 +95,7 @@ export function useConversationMessagesJoltEvents({ conversationId, messageCache
       }
     }
 
-    const targetQueryKeys = queryKeysForEvent(
-      e.event,
-      cachesTouchedBy(data.reply_root_id),
-      messageCaches
-    )
+    const targetQueryKeys = queryKeysForEvent(e.event, view, data)
     targetQueryKeys.forEach(queryKey =>
       updateCacheWithMessage(queryClient, queryKey, message, e.event)
     )
@@ -116,11 +120,7 @@ export function useConversationMessagesJoltEvents({ conversationId, messageCache
       currentPersonId: currentPerson.id,
     })
 
-    queryKeysForEvent(
-      'message.destroyed',
-      cachesTouchedBy(data.reply_root_id),
-      messageCaches
-    ).forEach(queryKey =>
+    queryKeysForEvent('message.destroyed', view, data).forEach(queryKey =>
       queryClient.setQueryData<QueryData>(queryKey, prev =>
         deleteRecordInPagesData({ data: prev, record: message })
       )
@@ -128,11 +128,13 @@ export function useConversationMessagesJoltEvents({ conversationId, messageCache
   }
 
   const handleReactionJoltEvent = async (e: JoltReactionEvent) => {
-    queryKeysForEvent(
-      'reaction',
-      cachesTouchedBy(e.data.data.reply_root_id),
-      messageCaches
-    ).forEach(queryKey => updateCacheWithReaction(queryClient, queryKey, e, currentPerson.id))
+    const data = {
+      sort_key: e.data.data.message_sort_key,
+      reply_root_id: e.data.data.reply_root_id,
+    }
+    queryKeysForEvent('reaction', view, data).forEach(queryKey =>
+      updateCacheWithReaction(queryClient, queryKey, e, currentPerson.id)
+    )
   }
 
   const handleTypingEvent = async (e: JoltTypingEvent) => {