diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx index 47f8e8b81..a4ad573de 100644 --- a/frontend/src/lib/hooks/api/topicMessages.tsx +++ b/frontend/src/lib/hooks/api/topicMessages.tsx @@ -31,13 +31,14 @@ export const useTopicMessages = ({ clusterName, topicName, }: UseTopicMessagesProps) => { - const [searchParams] = useSearchParams(); + const [searchParams, setSearchParams] = useSearchParams(); const [messages, setMessages] = React.useState([]); const [phase, setPhase] = React.useState(); const [consumptionStats, setConsumptionStats] = React.useState(); const [isFetching, setIsFetching] = React.useState(false); const abortController = useRef(new AbortController()); + const prevReqUrl = useRef(''); const currentPage = useRef(1); // get initial properties @@ -104,6 +105,16 @@ export const useTopicMessages = ({ const { nextCursor, setNextCursor } = useMessageFiltersStore.getState(); const { prevCursor, setPrevCursor } = useMessageFiltersStore.getState(); + const searchParamsWithoutPage = new URLSearchParams(searchParams); + searchParamsWithoutPage.delete(MessagesFilterKeys.page); + if (prevReqUrl.current !== searchParamsWithoutPage.toString()) { + searchParams.delete(MessagesFilterKeys.page); + setSearchParams(searchParams); + setPrevCursor(undefined); + setNextCursor(undefined); + } + prevReqUrl.current = searchParamsWithoutPage.toString(); + const searchParamPage = getPageValue(searchParams); if (currentPage.current < searchParamPage && nextCursor) { requestParams.set(MessagesFilterKeys.cursor, nextCursor);