FE: Refactor topic messages next page codebase (kafbat#550)

hadisfr · Sep 17, 2024 · 22da860 · 22da860
1 parent 273e64c
commit 22da860
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 25 deletions.
diff --git 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 { usePaginateTopics, useIsLiveMode } from 'lib/hooks/useMessagesFilters';
+import { useGoToNextPage, 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 paginate = usePaginateTopics();
+  const goToNextPage = useGoToNextPage();
   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={paginate}
+            onClick={goToNextPage}
           >
             Next →
           </Button>

diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx
@@ -14,7 +14,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { messagesApiClient } from 'lib/api';
 import { useSearchParams } from 'react-router-dom';
 import {
-  getCursorValue,
+  getPageValue,
   MessagesFilterKeys,
 } from 'lib/hooks/useMessagesFilters';
 import { convertStrToPollingMode } from 'lib/hooks/filterUtils';
@@ -38,7 +38,7 @@ export const useTopicMessages = ({
     React.useState<TopicMessageConsuming>();
   const [isFetching, setIsFetching] = React.useState(false);
   const abortController = useRef(new AbortController());
-  const prevCursor = useRef(0);
+  const currentPage = useRef(1);
 
   // get initial properties
 
@@ -103,17 +103,13 @@ export const useTopicMessages = ({
       }
       const { nextCursor, setNextCursor } = useMessageFiltersStore.getState();
 
-      const tempCompareUrl = new URLSearchParams(requestParams);
-      tempCompareUrl.delete(MessagesFilterKeys.cursor);
 
-      const currentCursor = getCursorValue(searchParams);
-
-      // filters stay the same and we have cursor set cursor
-      if (nextCursor && prevCursor.current < currentCursor) {
+      const searchParamPage = getPageValue(searchParams);
+      if (currentPage.current < searchParamPage && nextCursor) {
         requestParams.set(MessagesFilterKeys.cursor, nextCursor);
       }
+      currentPage.current = searchParamPage;
 
-      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
@@ -28,6 +28,7 @@ export const MessagesFilterKeys = {
   activeFilterId: 'activeFilterId',
   activeFilterNPId: 'activeFilterNPId', // not persisted filter name to indicate the refresh
   cursor: 'cursor',
+  page: 'page',
   r: 'r', // used tp force refresh of the data
 } as const;
 
@@ -52,28 +53,22 @@ export function useRefreshData(initSearchParams?: URLSearchParams) {
   };
 }
 
-export function getCursorValue(urlSearchParam: URLSearchParams) {
-  const cursor = parseInt(
-    urlSearchParam.get(MessagesFilterKeys.cursor) || '0',
-    10
-  );
+export function getPageValue(urlSearchParam: URLSearchParams) {
+  const page = parseInt(urlSearchParam.get(MessagesFilterKeys.page) || '1', 10);
 
-  if (Number.isNaN(cursor)) {
+  if (Number.isNaN(page)) {
     return 0;
   }
 
-  return cursor;
+  return page;
 }
 
-export function usePaginateTopics(initSearchParams?: URLSearchParams) {
+export function useGoToNextPage(initSearchParams?: URLSearchParams) {
   const [, setSearchParams] = useSearchParams(initSearchParams);
   return () => {
     setSearchParams((params) => {
-      const cursor = getCursorValue(params) + 1;
-
-      if (cursor) {
-        params.set(MessagesFilterKeys.cursor, cursor.toString());
-      }
+      const nextPage = getPageValue(params) + 1;
+      params.set(MessagesFilterKeys.page, nextPage.toString());
 
       return params;
     });