From efe135342e3eec7148c4f0cdb451faec3db5267c Mon Sep 17 00:00:00 2001
From: Arsen Simonyan <103444767+simonyandev@users.noreply.github.com>
Date: Fri, 22 Apr 2022 11:13:01 +0400
Subject: [PATCH] fix topic messages old data persistence (#1838)

---
 .../src/components/Topics/Topic/Topic.tsx             |  8 ++++++++
 .../src/components/Topics/Topic/TopicContainer.tsx    |  3 ++-
 .../components/Topics/Topic/__tests__/Topic.spec.tsx  | 11 +++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
index 3b821658d2..941eaa251e 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
@@ -14,12 +14,14 @@ interface RouterParams {
 
 interface TopicProps {
   isTopicFetching: boolean;
+  resetTopicMessages: () => void;
   fetchTopicDetails: (clusterName: ClusterName, topicName: TopicName) => void;
 }
 
 const Topic: React.FC<TopicProps> = ({
   isTopicFetching,
   fetchTopicDetails,
+  resetTopicMessages,
 }) => {
   const { clusterName, topicName } = useParams<RouterParams>();
 
@@ -27,6 +29,12 @@ const Topic: React.FC<TopicProps> = ({
     fetchTopicDetails(clusterName, topicName);
   }, [fetchTopicDetails, clusterName, topicName]);
 
+  React.useEffect(() => {
+    return () => {
+      resetTopicMessages();
+    };
+  }, []);
+
   if (isTopicFetching) {
     return <PageLoader />;
   }
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx b/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx
index d0a33cab03..713a369347 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { RootState } from 'redux/interfaces';
-import { fetchTopicDetails } from 'redux/actions';
+import { fetchTopicDetails, resetTopicMessages } from 'redux/actions';
 import { getIsTopicDetailsFetching } from 'redux/reducers/topics/selectors';
 
 import Topic from './Topic';
@@ -11,6 +11,7 @@ const mapStateToProps = (state: RootState) => ({
 
 const mapDispatchToProps = {
   fetchTopicDetails,
+  resetTopicMessages,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Topic);
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/__tests__/Topic.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/__tests__/Topic.spec.tsx
index d5ee996f74..eaea042156 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/__tests__/Topic.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/__tests__/Topic.spec.tsx
@@ -22,6 +22,7 @@ jest.mock('components/common/PageLoader/PageLoader', () => () => (
   <div>Loading</div>
 ));
 
+const resetTopicMessages = jest.fn();
 const fetchTopicDetailsMock = jest.fn();
 
 const renderComponent = (pathname: string, topicFetching: boolean) =>
@@ -29,6 +30,7 @@ const renderComponent = (pathname: string, topicFetching: boolean) =>
     <Route path={clusterTopicPath(':clusterName', ':topicName')}>
       <Topic
         isTopicFetching={topicFetching}
+        resetTopicMessages={resetTopicMessages}
         fetchTopicDetails={fetchTopicDetailsMock}
       />
     </Route>,
@@ -59,3 +61,12 @@ it('fetches topicDetails', () => {
   renderComponent(clusterTopicPath('local', 'myTopicName'), false);
   expect(fetchTopicDetailsMock).toHaveBeenCalledTimes(1);
 });
+
+it('resets topic messages after unmount', () => {
+  const component = renderComponent(
+    clusterTopicPath('local', 'myTopicName'),
+    false
+  );
+  component.unmount();
+  expect(resetTopicMessages).toHaveBeenCalledTimes(1);
+});