diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index 4da134c85..813cabcfa 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -5,7 +5,7 @@ import { TopicMessage } from 'generated-sources'; import React, { useState } from 'react'; import { Button } from 'components/common/Button/Button'; import * as S from 'components/common/NewTable/Table.styled'; -import { useIsLiveMode, useRefreshData } from 'lib/hooks/useMessagesFilters'; +import { usePaginateTopics, useIsLiveMode } from 'lib/hooks/useMessagesFilters'; import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore'; import PreviewModal from './PreviewModal'; @@ -20,7 +20,7 @@ const MessagesTable: React.FC = ({ messages, isFetching, }) => { - const refreshData = useRefreshData(); + const paginate = usePaginateTopics(); const [previewFor, setPreviewFor] = useState(null); const [keyFilters, setKeyFilters] = useState([]); @@ -101,7 +101,7 @@ const MessagesTable: React.FC = ({ disabled={isLive || isFetching || !nextCursor} buttonType="secondary" buttonSize="L" - onClick={refreshData} + onClick={paginate} > Next → diff --git a/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx b/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx index d179a2100..808dde9e4 100644 --- a/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx +++ b/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx @@ -30,7 +30,7 @@ jest.mock('react-router-dom', () => ({ jest.mock('lib/hooks/useMessagesFilters', () => ({ useIsLiveMode: jest.fn(), - useRefreshData: jest.fn(), + usePaginateTopics: jest.fn(), })); describe('MessagesTable', () => { diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx index f9da9a436..ec407c901 100644 --- a/frontend/src/lib/hooks/api/topicMessages.tsx +++ b/frontend/src/lib/hooks/api/topicMessages.tsx @@ -13,7 +13,10 @@ import { showServerError } from 'lib/errorHandling'; import { useMutation, useQuery } from '@tanstack/react-query'; import { messagesApiClient } from 'lib/api'; import { useSearchParams } from 'react-router-dom'; -import { MessagesFilterKeys } from 'lib/hooks/useMessagesFilters'; +import { + getCursorValue, + MessagesFilterKeys, +} from 'lib/hooks/useMessagesFilters'; import { convertStrToPollingMode } from 'lib/hooks/filterUtils'; import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore'; import { TopicName } from 'lib/interfaces/topic'; @@ -35,7 +38,7 @@ export const useTopicMessages = ({ React.useState(); const [isFetching, setIsFetching] = React.useState(false); const abortController = useRef(new AbortController()); - const prevReqUrl = useRef(''); + const prevCursor = useRef(0); // get initial properties @@ -103,14 +106,14 @@ export const useTopicMessages = ({ const tempCompareUrl = new URLSearchParams(requestParams); tempCompareUrl.delete(MessagesFilterKeys.cursor); - const tempToString = tempCompareUrl.toString(); + const currentCursor = getCursorValue(searchParams); - // filters stay the say and we have cursor set cursor - if (nextCursor && tempToString === prevReqUrl.current) { + // filters stay the same and we have cursor set cursor + if (nextCursor && prevCursor.current < currentCursor) { requestParams.set(MessagesFilterKeys.cursor, nextCursor); } - prevReqUrl.current = tempToString; + prevCursor.current = currentCursor; await fetchEventSource(`${url}?${requestParams.toString()}`, { method: 'GET', signal: abortController.current.signal, diff --git a/frontend/src/lib/hooks/useMessagesFilters.ts b/frontend/src/lib/hooks/useMessagesFilters.ts index 613347433..c72a91b49 100644 --- a/frontend/src/lib/hooks/useMessagesFilters.ts +++ b/frontend/src/lib/hooks/useMessagesFilters.ts @@ -52,6 +52,34 @@ export function useRefreshData(initSearchParams?: URLSearchParams) { }; } +export function getCursorValue(urlSearchParam: URLSearchParams) { + const cursor = parseInt( + urlSearchParam.get(MessagesFilterKeys.cursor) || '0', + 10 + ); + + if (Number.isNaN(cursor)) { + return 0; + } + + return cursor; +} + +export function usePaginateTopics(initSearchParams?: URLSearchParams) { + const [, setSearchParams] = useSearchParams(initSearchParams); + return () => { + setSearchParams((params) => { + const cursor = getCursorValue(params) + 1; + + if (cursor) { + params.set(MessagesFilterKeys.cursor, cursor.toString()); + } + + return params; + }); + }; +} + export function useMessagesFilters() { const [searchParams, setSearchParams] = useSearchParams(); const refreshData = useRefreshData(searchParams); @@ -68,6 +96,9 @@ export function useMessagesFilters() { params.delete(MessagesFilterKeys.activeFilterNPId); params.delete(MessagesFilterKeys.smartFilterId); } + + params.delete(MessagesFilterKeys.cursor); + return params; }); }, []);