From 89ade89a7c57b2bccdb1b81e57bfd989aaebd7d3 Mon Sep 17 00:00:00 2001
From: Himanshu Gupta <114623040+devhimanshuu@users.noreply.github.com>
Date: Sat, 20 Apr 2024 01:12:38 +0530
Subject: [PATCH 1/2] Update Page.tsx

Signed-off-by: Himanshu Gupta <114623040+devhimanshuu@users.noreply.github.com>
---
 .../jaeger-ui/src/components/App/Page.tsx     | 70 ++++++-------------
 1 file changed, 23 insertions(+), 47 deletions(-)

diff --git a/packages/jaeger-ui/src/components/App/Page.tsx b/packages/jaeger-ui/src/components/App/Page.tsx
index 810bcabc61..b46aedc6c8 100644
--- a/packages/jaeger-ui/src/components/App/Page.tsx
+++ b/packages/jaeger-ui/src/components/App/Page.tsx
@@ -17,63 +17,39 @@ import { Layout } from 'antd';
 import cx from 'classnames';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
-
 import TopNav from './TopNav';
-import { ReduxState } from '../../types';
-import { EmbeddedState } from '../../types/embedded';
 import { trackPageView } from '../../utils/tracking';
-
 import './Page.css';
 import withRouteProps from '../../utils/withRouteProps';
 
-type TProps = {
-  children: React.ReactNode;
-  embedded: EmbeddedState;
-  pathname: string;
-  search: string;
-};
-
 const { Header, Content } = Layout;
 
-// export for tests
-export class PageImpl extends React.Component<TProps> {
-  componentDidMount() {
-    const { pathname, search } = this.props;
+const Page = ({ children, embedded, pathname, search }) => {
+  React.useEffect(() => {
     trackPageView(pathname, search);
-  }
-
-  componentDidUpdate(prevProps: Readonly<TProps>) {
-    const { pathname, search } = prevProps;
-    const { pathname: nextPathname, search: nextSearch } = this.props;
-    if (pathname !== nextPathname || search !== nextSearch) {
-      trackPageView(nextPathname, nextSearch);
-    }
-  }
-
-  render() {
-    const { embedded } = this.props;
-    const contentCls = cx({ 'Page--content': true, 'Page--content--no-embedded': !embedded });
-    return (
-      <div>
-        <Helmet title="Jaeger UI" />
-        <Layout>
-          {!embedded && (
-            <Header className="Page--topNav">
-              <TopNav />
-            </Header>
-          )}
-          <Content className={contentCls}>{this.props.children}</Content>
-        </Layout>
-      </div>
-    );
-  }
-}
+  }, [pathname, search]);
+
+  const contentCls = cx({ 'Page--content': true, 'Page--content--no-embedded': !embedded });
+
+  return (
+    <div>
+      <Helmet title="Jaeger UI" />
+      <Layout>
+        {!embedded && (
+          <Header className="Page--topNav">
+            <TopNav />
+          </Header>
+        )}
+        <Content className={contentCls}>{children}</Content>
+      </Layout>
+    </div>
+  );
+};
 
-// export for tests
-export function mapStateToProps(state: ReduxState) {
+const mapStateToProps = (state) => {
   const { embedded } = state;
   const { pathname, search } = state.router.location;
   return { embedded, pathname, search };
-}
+};
 
-export default connect(mapStateToProps)(withRouteProps(PageImpl));
+export default connect(mapStateToProps)(withRouteProps(Page)););

From 65af9763e9b145635ab49f7b64ffb203587aa435 Mon Sep 17 00:00:00 2001
From: Himanshu Gupta <114623040+devhimanshuu@users.noreply.github.com>
Date: Sat, 20 Apr 2024 01:53:42 +0530
Subject: [PATCH 2/2] Update Page.tsx

Signed-off-by: Himanshu Gupta <114623040+devhimanshuu@users.noreply.github.com>
---
 packages/jaeger-ui/src/components/App/Page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/jaeger-ui/src/components/App/Page.tsx b/packages/jaeger-ui/src/components/App/Page.tsx
index b46aedc6c8..bc6d10220b 100644
--- a/packages/jaeger-ui/src/components/App/Page.tsx
+++ b/packages/jaeger-ui/src/components/App/Page.tsx
@@ -52,4 +52,4 @@ const mapStateToProps = (state) => {
   return { embedded, pathname, search };
 };
 
-export default connect(mapStateToProps)(withRouteProps(Page)););
+export default connect(mapStateToProps)(withRouteProps(Page));