Topic messages code fixes

kafbat · Mar 14, 2024 · a5c5afb · a5c5afb
1 parent 59ba203
commit a5c5afb
Showing 1 changed file with 11 additions and 13 deletions.
diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { BASE_PARAMS, MESSAGES_PER_PAGE } from 'lib/constants';
 import { ClusterName, TopicName } from 'redux/interfaces';
@@ -50,6 +50,14 @@ export const useTopicMessages = ({
 
   // get initial properties
 
+  const abortFetchData = useCallback(() => {
+    if (abortController.current.signal.aborted) return;
+
+    setIsFetching(false);
+    abortController.current.abort();
+    abortController.current = new AbortController();
+  }, []);
+
   React.useEffect(() => {
     const mode = convertStrToPollingMode(
       searchParams.get(MessagesFilterKeys.mode) || ''
@@ -156,29 +164,19 @@ export const useTopicMessages = ({
       });
     };
 
-    const abortFetchData = () => {
-      setIsFetching(false);
-      abortController.current.abort();
-      abortController.current = new AbortController();
-    };
-
     abortFetchData();
     fetchData();
 
     return abortFetchData;
-  }, [searchParams]);
+  }, [searchParams, abortFetchData]);
 
   return {
     phase,
     messages,
     meta,
     isFetching,
     nextCursor,
-    abortFetchData: () => {
-      setIsFetching(false);
-      abortController.current.abort();
-      abortController.current = new AbortController();
-    },
+    abortFetchData,
   };
 };