Performance Optimization. (#141)

Also refactored page event logic.

VAN-343

src/common-components/Spinner.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Spinner as ParagonSpinner } from '@edx/paragon';
+
+const Spinner = () => (
+  <div className="container position-absolute h-90">
+    <div className="d-flex justify-content-center align-items-center h-90">
+      <ParagonSpinner animation="border" variant="primary" />
+    </div>
+  </div>
+);
+
+export default Spinner;

src/common-components/UnAuthOnlyRoute.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-import { AppContext } from '@edx/frontend-platform/react';
-
-import { DEFAULT_REDIRECT_URL } from '../data/constants';
-
-/**
- * This wrapper redirects the requester to our default redirect url if they are
- * already authenticated.
- */
-const UnAuthOnlyRoute = (props) => {
-  const { authenticatedUser, config } = React.useContext(AppContext);
-
-  if (authenticatedUser) {
-    global.location.href = config.LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
-    return null;
-  }
-
-  return <Route {...props} />;
-};
-
-export default UnAuthOnlyRoute;

src/common-components/UnAuthenticatedRoute.jsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect } from 'react';
+import { Route, useRouteMatch } from 'react-router-dom';
+import { AppContext } from '@edx/frontend-platform/react';
+import { sendPageEvent } from '@edx/frontend-platform/analytics';
+
+import { DEFAULT_REDIRECT_URL } from '../data/constants';
+
+/**
+ * This wrapper redirects the requester to our default redirect url if they are
+ * already authenticated.
+ */
+const UnAuthenticatedRoute = (props) => {
+  const { authenticatedUser, config } = React.useContext(AppContext);
+  const match = useRouteMatch({
+    path: props.path,
+    exact: props.exact,
+    strict: props.strict,
+    sensitive: props.sensitive,
+  });
+
+  if (authenticatedUser) {
+    global.location.href = config.LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+    return null;
+  }
+
+  useEffect(() => {
+    if (match) {
+      sendPageEvent('login_and_registration', props.path.replace('/', ''));
+    }
+  }, [match]);
+
+  return <Route {...props} />;
+};
+
+export default UnAuthenticatedRoute;

src/common-components/index.jsx

@@ -1,7 +1,7 @@
 export { default as HeaderLayout } from './HeaderLayout';
 export { default as RedirectLogistration } from './RedirectLogistration';
 export { default as registerIcons } from './RegisterFaIcons';
-export { default as UnAuthOnlyRoute } from './UnAuthOnlyRoute';
+export { default as UnAuthenticatedRoute } from './UnAuthenticatedRoute';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as SocialAuthProviders } from './SocialAuthProviders';
 export { default as ThirdPartyAuthAlert } from './ThirdPartyAuthAlert';
@@ -12,3 +12,4 @@ export { default as APIFailureMessage } from './APIFailureMessage';
 export { default as reducer } from './data/reducers';
 export { default as saga } from './data/sagas';
 export { storeName } from './data/selectors';
+export { default as Spinner } from './Spinner';

src/common-components/tests/UnAuthenticatedRoute.test.jsx

@@ -1,31 +1,36 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { mount } from 'enzyme';
 import { BrowserRouter as Router, MemoryRouter, Switch } from 'react-router-dom';
 
 import { getConfig } from '@edx/frontend-platform';
+import * as analytics from '@edx/frontend-platform/analytics';
 
-import { UnAuthOnlyRoute } from '..';
-import { DEFAULT_REDIRECT_URL, LOGIN_PAGE } from '../../data/constants';
+import { UnAuthenticatedRoute } from '..';
+import { DEFAULT_REDIRECT_URL, LOGIN_PAGE, REGISTER_PAGE } from '../../data/constants';
 
 const RRD = require('react-router-dom');
 // Just render plain div with its children
-// eslint-disable-next-line react/prop-types
 RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
 module.exports = RRD;
 
+jest.mock('@edx/frontend-platform/analytics');
+analytics.sendPageEvent = jest.fn();
+
 const TestApp = () => (
   <Router>
     <div>
       <Switch>
-        <UnAuthOnlyRoute path={LOGIN_PAGE} render={() => (<span>Login Page</span>)} />
+        <UnAuthenticatedRoute path={LOGIN_PAGE} render={() => (<span>Login Page</span>)} />
+        <UnAuthenticatedRoute path={REGISTER_PAGE} render={() => (<span>Register Page</span>)} />
       </Switch>
     </div>
   </Router>
 );
 
-describe('UnAuthOnlyRoute', () => {
-  const routerWrapper = () => (
-    <MemoryRouter initialEntries={[LOGIN_PAGE]}>
+describe('UnAuthenticatedRoute', () => {
+  const routerWrapper = (initialEntry) => (
+    <MemoryRouter initialEntries={[initialEntry || LOGIN_PAGE]}>
       <TestApp />
     </MemoryRouter>
   );
@@ -60,4 +65,14 @@ describe('UnAuthOnlyRoute', () => {
 
     expect(wrapper.find('span').text()).toBe('Login Page');
   });
+
+  it('send page event when login page is rendered', () => {
+    mount(routerWrapper());
+    expect(analytics.sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login');
+  });
+
+  it('send page event when register page is rendered', () => {
+    mount(routerWrapper(REGISTER_PAGE));
+    expect(analytics.sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register');
+  });
 });