From 85c90d83c597a4d03bcdc5c8f2676658b1267b97 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi <syed.ali.abbas@arbisoft.com>
Date: Tue, 14 Mar 2023 13:12:46 +0500
Subject: [PATCH] refactor: change page route logic

---
 example/index.jsx                    |  6 +++---
 src/initialize.js                    |  6 +++---
 src/react/AuthenticatedPageRoute.jsx | 32 ++++++++--------------------
 src/react/PageRoute.jsx              | 30 --------------------------
 src/react/PageWrap.jsx               | 24 +++++++++++++++++++++
 src/react/index.js                   |  2 +-
 6 files changed, 40 insertions(+), 60 deletions(-)
 delete mode 100644 src/react/PageRoute.jsx
 create mode 100644 src/react/PageWrap.jsx

diff --git a/example/index.jsx b/example/index.jsx
index 6495aca62..e61ef2657 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -11,7 +11,7 @@ import {
   AppProvider,
   AuthenticatedPageRoute,
   ErrorPage,
-  PageRoute,
+  PageWrap,
 } from '../src/react';
 
 import './index.scss';
@@ -22,10 +22,10 @@ subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
       <Routes>
-        <Route path="/" element={<PageRoute path="/"><ExamplePage /></PageRoute>} />
+        <Route path="/" element={<PageWrap><ExamplePage /></PageWrap>} />
         <Route
           path="/error_example"
-          element={<PageRoute path="/error_example"><ErrorPage message="Test error message" /></PageRoute>}
+          element={<PageWrap><ErrorPage message="Test error message" /></PageWrap>}
         />
         <Route path="/authenticated" element={<AuthenticatedPageRoute><AuthenticatedPage /></AuthenticatedPageRoute>} />
       </Routes>
diff --git a/src/initialize.js b/src/initialize.js
index 3a8d234aa..e670a32ac 100644
--- a/src/initialize.js
+++ b/src/initialize.js
@@ -11,10 +11,10 @@
  *   APP_READY,
  *   subscribe,
  * } from '@edx/frontend-platform';
- * import { AppProvider, ErrorPage, PageRoute } from '@edx/frontend-platform/react';
+ * import { AppProvider, ErrorPage, PageWrap } from '@edx/frontend-platform/react';
  * import React from 'react';
  * import ReactDOM from 'react-dom';
- * import { Switch, Routes } from 'react-router-dom';
+ * import { Routes, Route } from 'react-router-dom';
  *
  * subscribe(APP_READY, () => {
  *   ReactDOM.render(
@@ -22,7 +22,7 @@
  *       <Header />
  *       <main>
  *         <Routes>
- *           <PageRoute path="/" element={PaymentPage} />
+ *           <Route path="/" element={<PageWrap><PaymentPage /></PageWrap>} />
  *         </Routes>
  *       </main>
  *       <Footer />
diff --git a/src/react/AuthenticatedPageRoute.jsx b/src/react/AuthenticatedPageRoute.jsx
index 3dc9fb592..d67231c8e 100644
--- a/src/react/AuthenticatedPageRoute.jsx
+++ b/src/react/AuthenticatedPageRoute.jsx
@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useMatch } from 'react-router-dom';
 
 import AppContext from './AppContext';
-import PageRoute from './PageRoute';
+import PageWrap from './PageWrap';
 import { getLoginRedirectUrl } from '../auth';
 
 /**
@@ -14,49 +13,36 @@ import { getLoginRedirectUrl } from '../auth';
  *
  * It can optionally accept an override URL to redirect to instead of the login page.
  *
- * Like a `PageRoute`, also calls `sendPageEvent` when the route becomes active.
+ * Like a `PageWrap`, also calls `sendPageEvent` when the route becomes active.
  *
- * @see PageRoute
+ * @see PageWrap
  * @see {@link module:frontend-platform/analytics~sendPageEvent}
  * @memberof module:React
  * @param {Object} props
  * @param {string} props.redirectUrl The URL anonymous users should be redirected to, rather than
  * viewing the route's contents.
  */
-export default function AuthenticatedPageRoute({ redirectUrl, children, ...props }) {
-  const match = useMatch({
-    path: props.path,
-    // eslint-disable-next-line react/prop-types
-    caseSensitive: props.sensitive,
-    // eslint-disable-next-line react/prop-types
-    end: props.strict,
-    // eslint-disable-next-line react/prop-types
-    exact: props.exact,
-  });
-
+export default function AuthenticatedPageRoute({ redirectUrl, children }) {
   const { authenticatedUser } = useContext(AppContext);
   if (authenticatedUser === null) {
-    if (match) {
-      const destination = redirectUrl || getLoginRedirectUrl(global.location.href);
-      global.location.assign(destination);
-    }
+    const destination = redirectUrl || getLoginRedirectUrl(global.location.href);
+    global.location.assign(destination);
+
     return null;
   }
 
   return (
-    <PageRoute {...props}>
+    <PageWrap>
       {children}
-    </PageRoute>
+    </PageWrap>
   );
 }
 
 AuthenticatedPageRoute.propTypes = {
   redirectUrl: PropTypes.string,
   children: PropTypes.node.isRequired,
-  path: PropTypes.string,
 };
 
 AuthenticatedPageRoute.defaultProps = {
   redirectUrl: null,
-  path: '/authenticated',
 };
diff --git a/src/react/PageRoute.jsx b/src/react/PageRoute.jsx
deleted file mode 100644
index fc79db036..000000000
--- a/src/react/PageRoute.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/* eslint-disable react/prop-types */
-// eslint-disable-next-line no-unused-vars
-import React, { useEffect } from 'react';
-import { useMatch } from 'react-router-dom';
-import { sendPageEvent } from '../analytics';
-
-/**
- * A react-router Route component that calls `sendPageEvent` when it becomes active.
- *
- * @see {@link module:frontend-platform/analytics~sendPageEvent}
- * @memberof module:React
- * @param {Object} props
- */
-export default function PageRoute({ children, ...props }) {
-  const match = useMatch({
-    path: props.path,
-    caseSensitive: props.sensitive,
-    end: props.strict,
-    exact: props.exact,
-  });
-
-  useEffect(() => {
-    if (match) {
-      sendPageEvent();
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(match)]);
-
-  return children;
-}
diff --git a/src/react/PageWrap.jsx b/src/react/PageWrap.jsx
new file mode 100644
index 000000000..d7130cd73
--- /dev/null
+++ b/src/react/PageWrap.jsx
@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+// eslint-disable-next-line no-unused-vars
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { sendPageEvent } from '../analytics';
+
+/**
+ * A Wrapper component that calls `sendPageEvent` when it becomes active.
+ *
+ * @see {@link module:frontend-platform/analytics~sendPageEvent}
+ * @memberof module:React
+ * @param {Object} props
+ */
+export default function PageWrap({ children }) {
+  const location = useLocation();
+
+  useEffect(() => {
+    sendPageEvent();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
+
+  return children;
+}
diff --git a/src/react/index.js b/src/react/index.js
index 37efa68b1..0985d9271 100644
--- a/src/react/index.js
+++ b/src/react/index.js
@@ -12,5 +12,5 @@ export { default as AuthenticatedPageRoute } from './AuthenticatedPageRoute';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as ErrorPage } from './ErrorPage';
 export { default as LoginRedirect } from './LoginRedirect';
-export { default as PageRoute } from './PageRoute';
+export { default as PageWrap } from './PageWrap';
 export { useAppEvent } from './hooks';