From c1d4f92005c604d6398f696b155c47410e1d4d71 Mon Sep 17 00:00:00 2001
From: "H@di" <hadi@hadisafari.ir>
Date: Tue, 17 Sep 2024 11:30:50 +0330
Subject: [PATCH] FE: Reset page parameter in URL of topic messages page when
 changing mode (#550)

---
 frontend/src/lib/hooks/api/topicMessages.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx
index 47f8e8b81..a4ad573de 100644
--- a/frontend/src/lib/hooks/api/topicMessages.tsx
+++ b/frontend/src/lib/hooks/api/topicMessages.tsx
@@ -31,13 +31,14 @@ export const useTopicMessages = ({
   clusterName,
   topicName,
 }: UseTopicMessagesProps) => {
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [messages, setMessages] = React.useState<TopicMessage[]>([]);
   const [phase, setPhase] = React.useState<string>();
   const [consumptionStats, setConsumptionStats] =
     React.useState<TopicMessageConsuming>();
   const [isFetching, setIsFetching] = React.useState(false);
   const abortController = useRef(new AbortController());
+  const prevReqUrl = useRef<string>('');
   const currentPage = useRef(1);
 
   // get initial properties
@@ -104,6 +105,16 @@ export const useTopicMessages = ({
       const { nextCursor, setNextCursor } = useMessageFiltersStore.getState();
       const { prevCursor, setPrevCursor } = useMessageFiltersStore.getState();
 
+      const searchParamsWithoutPage = new URLSearchParams(searchParams);
+      searchParamsWithoutPage.delete(MessagesFilterKeys.page);
+      if (prevReqUrl.current !== searchParamsWithoutPage.toString()) {
+        searchParams.delete(MessagesFilterKeys.page);
+        setSearchParams(searchParams);
+        setPrevCursor(undefined);
+        setNextCursor(undefined);
+      }
+      prevReqUrl.current = searchParamsWithoutPage.toString();
+
       const searchParamPage = getPageValue(searchParams);
       if (currentPage.current < searchParamPage && nextCursor) {
         requestParams.set(MessagesFilterKeys.cursor, nextCursor);