From d8fd5c3952647921b54485d6dd1f24bc47b15296 Mon Sep 17 00:00:00 2001
From: Mgrdich <46796009+Mgrdich@users.noreply.github.com>
Date: Sun, 26 May 2024 21:39:19 +0400
Subject: [PATCH] FE: Messages: Fix refresh does pagination instead (#417)

---
 .../Topics/Topic/Messages/MessagesTable.tsx   |  6 ++--
 .../Messages/__test__/MessagesTable.spec.tsx  |  2 +-
 frontend/src/lib/hooks/api/topicMessages.tsx  | 15 +++++----
 frontend/src/lib/hooks/useMessagesFilters.ts  | 31 +++++++++++++++++++
 4 files changed, 44 insertions(+), 10 deletions(-)

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