Update Chat with last_message when current_user is sending a message

app/soapbox/queries/chats.ts

@@ -237,7 +237,7 @@ const useChatActions = (chatId: string) => {
   const createChatMessage = useMutation(
     (
       {  chatId, content }: { chatId: string, content: string },
-    ) => api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/messages`, { content }),
+    ) => api.post<IChatMessage>(`/api/v1/pleroma/chats/${chatId}/messages`, { content }),
     {
       retry: false,
       onMutate: async (variables) => {
@@ -281,7 +281,10 @@ const useChatActions = (chatId: string) => {
       onError: (_error: any, variables, context: any) => {
         queryClient.setQueryData(['chats', 'messages', variables.chatId], context.prevChatMessages);
       },
-      onSuccess: (_data: any, variables) => {
+      onSuccess: (response, variables) => {
+        const nextChat = { ...chat, last_message: response.data };
+        updatePageItem(ChatKeys.chatSearch(), nextChat, (o, n) => o.id === n.id);
+
         queryClient.invalidateQueries(ChatKeys.chatMessages(variables.chatId));
       },
     },

app/soapbox/utils/__tests__/queries.test.ts

@@ -2,17 +2,63 @@ import { InfiniteData } from '@tanstack/react-query';
 
 import { queryClient } from 'soapbox/queries/client';
 
-import { PaginatedResult, sortQueryData } from '../queries';
+import { PaginatedResult, sortQueryData, updatePageItem } from '../queries';
 
 interface Item {
-  id: number
+  id: number,
+  text: string
 }
 
-const buildItem = (id: number): Item => ({ id });
+const buildItem = (id: number): Item => ({ id, text: `item ${id}` });
 
 const queryKey = ['test', 'query'];
 
+describe('updatePageItem()', () => {
+  beforeEach(() => {
+    queryClient.clear();
+  });
+
+  describe('without cached data', () => {
+    it('safely returns undefined', () => {
+      updatePageItem<Item>(queryKey, buildItem(1), (o, n) => o.id === n.id);
+      const nextQueryData = queryClient.getQueryData<InfiniteData<PaginatedResult<Item>>>(queryKey);
+      expect(nextQueryData).toBeUndefined();
+    });
+  });
+
+  describe('with cached data', () => {
+    const cachedQueryData = {
+      pages: [
+        {
+          result: [buildItem(1), buildItem(2), buildItem(3)],
+          hasMore: false,
+          link: undefined,
+        },
+      ],
+      pageParams: [undefined],
+    };
+
+    beforeEach(() => {
+      queryClient.setQueryData(queryKey, cachedQueryData);
+    });
+
+    it('updates the correct item in the cached data', () => {
+      const initialQueryData = queryClient.getQueryData<InfiniteData<PaginatedResult<Item>>>(queryKey);
+      expect(initialQueryData?.pages[0].result.map((r) => r.id)).toEqual([1, 2, 3]);
+      expect(initialQueryData?.pages[0].result.find((r) => r.id === 2)?.text).toEqual('item 2');
+      updatePageItem<Item>(queryKey, { id: 2, text: 'new text' }, (o, n) => o.id === n.id);
+      const nextQueryData = queryClient.getQueryData<InfiniteData<PaginatedResult<Item>>>(queryKey);
+      expect(nextQueryData?.pages[0].result.map((r) => r.id)).toEqual([1, 2, 3]);
+      expect(nextQueryData?.pages[0].result.find((r) => r.id === 2)?.text).toEqual('new text');
+    });
+  });
+});
+
 describe('sortQueryData()', () => {
+  beforeEach(() => {
+    queryClient.clear();
+  });
+
   describe('without cached data', () => {
     it('safely returns undefined', () => {
       sortQueryData<Item>(queryKey, (a, b) => b.id - a.id);