Add utils/queries, refactor streaming
This commit is contained in:
parent
c12999a438
commit
075cb15940
3 changed files with 48 additions and 27 deletions
|
@ -1,6 +1,6 @@
|
|||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import messages from 'soapbox/locales/messages';
|
||||
import { queryClient } from 'soapbox/queries/client';
|
||||
import { updatePageItem, appendPageItem } from 'soapbox/utils/queries';
|
||||
import { play, soundCache } from 'soapbox/utils/sounds';
|
||||
|
||||
import { connectStream } from '../stream';
|
||||
|
@ -24,8 +24,6 @@ import {
|
|||
processTimelineUpdate,
|
||||
} from './timelines';
|
||||
|
||||
import type { InfiniteData } from '@tanstack/react-query';
|
||||
import type { PaginatedResult } from 'soapbox/queries/chats';
|
||||
import type { AppDispatch, RootState } from 'soapbox/store';
|
||||
import type { APIEntity, Chat, ChatMessage } from 'soapbox/types/entities';
|
||||
|
||||
|
@ -56,24 +54,10 @@ interface ChatPayload extends Omit<Chat, 'last_message'> {
|
|||
const updateChat = (payload: ChatPayload) => {
|
||||
const { last_message: lastMessage } = payload;
|
||||
|
||||
queryClient.setQueriesData<InfiniteData<PaginatedResult<Chat>>>(['chats', 'search'], (data) => {
|
||||
if (data) {
|
||||
const pages = data.pages.map(page => {
|
||||
const result = page.result.map(chat => chat.id === payload.id ? payload as any : chat);
|
||||
return { ...page, result };
|
||||
});
|
||||
return { ...data, pages };
|
||||
}
|
||||
});
|
||||
updatePageItem<Chat>(['chats', 'search'], payload as any, (o, n) => o.id === n.id);
|
||||
|
||||
if (lastMessage) {
|
||||
queryClient.setQueryData<InfiniteData<PaginatedResult<ChatMessage>>>(['chats', 'messages', payload.id], (data) => {
|
||||
if (data) {
|
||||
const pages = [...data.pages];
|
||||
pages[0] = { ...pages[0], result: [...pages[0].result, lastMessage] };
|
||||
return { ...data, pages };
|
||||
}
|
||||
});
|
||||
appendPageItem(['chats', 'messages', payload.id], lastMessage);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -8,6 +8,7 @@ import compareId from 'soapbox/compare_id';
|
|||
import { useChatContext } from 'soapbox/contexts/chat-context';
|
||||
import { useApi, useAppDispatch, useFeatures } from 'soapbox/hooks';
|
||||
import { normalizeChatMessage } from 'soapbox/normalizers';
|
||||
import { flattenPages } from 'soapbox/utils/queries';
|
||||
|
||||
import { queryClient } from './client';
|
||||
|
||||
|
@ -88,10 +89,7 @@ const useChatMessages = (chatId: string) => {
|
|||
},
|
||||
});
|
||||
|
||||
const data = queryInfo.data?.pages.reduce<IChatMessage[]>(
|
||||
(prev: IChatMessage[], curr) => [...curr.result, ...prev],
|
||||
[],
|
||||
);
|
||||
const data = flattenPages(queryInfo);
|
||||
|
||||
return {
|
||||
...queryInfo,
|
||||
|
@ -139,10 +137,7 @@ const useChats = (search?: string) => {
|
|||
},
|
||||
});
|
||||
|
||||
const data = queryInfo.data?.pages.reduce<IChat[]>(
|
||||
(prev: IChat[], curr) => [...prev, ...curr.result],
|
||||
[],
|
||||
);
|
||||
const data = flattenPages(queryInfo);
|
||||
|
||||
const chatsQuery = {
|
||||
...queryInfo,
|
||||
|
|
42
app/soapbox/utils/queries.ts
Normal file
42
app/soapbox/utils/queries.ts
Normal file
|
@ -0,0 +1,42 @@
|
|||
import { queryClient } from 'soapbox/queries/client';
|
||||
|
||||
import type { InfiniteData, QueryKey, UseInfiniteQueryResult } from '@tanstack/react-query';
|
||||
import type { PaginatedResult } from 'soapbox/queries/chats';
|
||||
|
||||
/** Flatten paginated results into a single array. */
|
||||
const flattenPages = <T>(queryInfo: UseInfiniteQueryResult<PaginatedResult<T>>) => {
|
||||
return queryInfo.data?.pages.reduce<T[]>(
|
||||
(prev: T[], curr) => [...prev, ...curr.result],
|
||||
[],
|
||||
);
|
||||
};
|
||||
|
||||
/** Traverse pages and update the item inside if found. */
|
||||
const updatePageItem = <T>(queryKey: QueryKey, newItem: T, isItem: (item: T, newItem: T) => boolean) => {
|
||||
queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
|
||||
if (data) {
|
||||
const pages = data.pages.map(page => {
|
||||
const result = page.result.map(item => isItem(item, newItem) ? newItem : item);
|
||||
return { ...page, result };
|
||||
});
|
||||
return { ...data, pages };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** Insert the new item at the beginning of the first page. */
|
||||
const appendPageItem = <T>(queryKey: QueryKey, newItem: T) => {
|
||||
queryClient.setQueryData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
|
||||
if (data) {
|
||||
const pages = [...data.pages];
|
||||
pages[0] = { ...pages[0], result: [...pages[0].result, newItem] };
|
||||
return { ...data, pages };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export {
|
||||
flattenPages,
|
||||
updatePageItem,
|
||||
appendPageItem,
|
||||
};
|
Loading…
Reference in a new issue