FE: Messages: Fix refresh does pagination instead (kafbat#417)

Author: Mgrdich

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<MessagesTableProps> = ({
   messages,
   isFetching,
 }) => {
-  const refreshData = useRefreshData();
+  const paginate = usePaginateTopics();
   const [previewFor, setPreviewFor] = useState<string | null>(null);
 
   const [keyFilters, setKeyFilters] = useState<PreviewFilter[]>([]);
@@ -101,7 +101,7 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
             disabled={isLive || isFetching || !nextCursor}
             buttonType="secondary"
             buttonSize="L"
-            onClick={refreshData}
+            onClick={paginate}
           >
             Next →
           </Button>

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', () => {

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<TopicMessageConsuming>();
   const [isFetching, setIsFetching] = React.useState(false);
   const abortController = useRef(new AbortController());
-  const prevReqUrl = useRef<string>('');
+  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,

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;
     });
   }, []);