Fix topic messages offset filter bug (#1849)

* fix topic messages offset filter bug

* refactor function to improve readability

* fix infinite fetching bug

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx

@@ -182,48 +182,37 @@ const Filters: React.FC<FiltersProps> = ({
     );
   };
 
-  const handleFiltersSubmit = React.useCallback(() => {
-    setAttempt(attempt + 1);
-
-    if (isSeekTypeControlVisible) {
-      props.seekType = isLive ? SeekType.LATEST : currentSeekType;
-      props.seekTo = selectedPartitions.map(({ value }) => {
-        let seekToOffset;
-
-        if (currentSeekType === SeekType.OFFSET) {
-          if (offset) {
-            seekToOffset = offset;
-          } else {
-            seekToOffset =
-              seekDirection === SeekDirection.FORWARD
-                ? partitionMap[value].offsetMin
-                : partitionMap[value].offsetMax;
-          }
-        } else if (timestamp) {
-          seekToOffset = timestamp.getTime();
-        }
-
-        return `${value}::${seekToOffset || '0'}`;
+  const handleFiltersSubmit = React.useCallback(
+    (currentOffset: string) => {
+      setAttempt(attempt + 1);
+
+      if (isSeekTypeControlVisible) {
+        props.seekType = isLive ? SeekType.LATEST : currentSeekType;
+        props.seekTo = selectedPartitions.map(({ value }) => {
+          const offsetProperty =
+            seekDirection === SeekDirection.FORWARD ? 'offsetMin' : 'offsetMax';
+          const offsetBasedSeekTo =
+            currentOffset || partitionMap[value][offsetProperty];
+          const seekToOffset =
+            currentSeekType === SeekType.OFFSET
+              ? offsetBasedSeekTo
+              : timestamp?.getTime();
+
+          return `${value}::${seekToOffset || '0'}`;
+        });
+      }
+
+      const newProps = omitBy(props, (v) => v === undefined || v === '');
+      const qs = Object.keys(newProps)
+        .map((key) => `${key}=${newProps[key]}`)
+        .join('&');
+
+      history.push({
+        search: `?${qs}`,
       });
-    }
-
-    const newProps = omitBy(props, (v) => v === undefined || v === '');
-    const qs = Object.keys(newProps)
-      .map((key) => `${key}=${newProps[key]}`)
-      .join('&');
-
-    history.push({
-      search: `?${qs}`,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    seekDirection,
-    queryType,
-    activeFilter,
-    currentSeekType,
-    timestamp,
-    query,
-  ]);
+    },
+    [seekDirection, queryType, activeFilter, currentSeekType, timestamp, query]
+  );
 
   const handleSSECancel = () => {
     if (!source.current) return;
@@ -313,7 +302,10 @@ const Filters: React.FC<FiltersProps> = ({
             }
             break;
           case TopicMessageEventTypeEnum.PHASE:
-            if (phase?.name) updatePhase(phase.name);
+            if (phase?.name) {
+              updatePhase(phase.name);
+              setIsFetching(false);
+            }
             break;
           case TopicMessageEventTypeEnum.CONSUMING:
             if (consuming) updateMeta(consuming);
@@ -345,11 +337,11 @@ const Filters: React.FC<FiltersProps> = ({
   ]);
   React.useEffect(() => {
     if (location.search?.length === 0) {
-      handleFiltersSubmit();
+      handleFiltersSubmit(offset);
     }
   }, [handleFiltersSubmit, location]);
   React.useEffect(() => {
-    handleFiltersSubmit();
+    handleFiltersSubmit(offset);
   }, [handleFiltersSubmit, seekDirection]);
 
   return (
@@ -429,7 +421,7 @@ const Filters: React.FC<FiltersProps> = ({
               buttonType="secondary"
               buttonSize="M"
               disabled={isSubmitDisabled}
-              onClick={handleFiltersSubmit}
+              onClick={() => handleFiltersSubmit(offset)}
               style={{ fontWeight: 500 }}
             >
               Submit