at the end of the day, it was inevitable

frontend/app/routing/AppRoutes.js

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import reduxConnect from '../redux/utils/connect';
+import LoadersAdvanced from '../components/common/Loader/Loader';
+
+import i18n from '../i18n';
+import { Slide, ToastContainer } from 'react-toastify';
+import UnauthenticatedRoute from './UnauthenticatedRoute';
+import AuthenticatedRoute from './AuthenticatedRoute';
+import usePageTracking from '../components/common/hooks/usePageTracking';
+import { getIP, setIP } from '../common/helper';
+
+function AppRoutes(props) {
+  usePageTracking();
+  const {
+    common: { auth, base }
+  } = props;
+  const authIsPending = auth.isAuthPending;
+
+  useEffect(() => {
+    const { actions } = props;
+    actions.handleErrors();
+    actions.refreshLogin();
+
+    if (!getIP()) {
+      setIP(); // set IP to use when submit HubSpot form
+    }
+
+    //Set active language after load
+    const activeLang = i18n.language.slice(0, 2);
+    actions.chooseLanguage(activeLang);
+  }, []);
+
+  return (
+    <div className="root-layout">
+      {authIsPending && <LoadersAdvanced />}
+
+      {!authIsPending && (
+        <Switch>
+          <Route path="/app/:activeTab" component={AuthenticatedRoute} />
+          <Route path="/" component={UnauthenticatedRoute} />
+          <Redirect to="/auth/login" />
+        </Switch>
+      )}
+
+      <ToastContainer
+        pauseOnHover
+        closeOnClick={false}
+        position="top-right"
+        transition={Slide}
+        draggable={false}
+        closeButton={CloseButton}
+        rtl={base.rtlLang}
+      />
+    </div>
+  );
+}
+
+const CloseButton = ({ closeToast }) => (
+  <button
+    className="Toastify__close-button"
+    type="button"
+    aria-label="close"
+    onClick={closeToast}
+  >
+    ✖︎
+  </button>
+);
+
+CloseButton.propTypes = {
+  closeToast: PropTypes.func.isRequired
+};
+
+AppRoutes.propTypes = {
+  common: PropTypes.object.isRequired,
+  actions: PropTypes.object.isRequired,
+  children: PropTypes.object
+};
+
+export default reduxConnect('common', ['common'])(AppRoutes);

frontend/app/routing/AuthenticatedRoute.js

@@ -0,0 +1,94 @@
+import React, { Fragment, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import reduxConnect from '../redux/utils/connect';
+import { Route, Redirect, Switch } from 'react-router-dom';
+import App from '../components/App/App';
+import SearchTab from '../components/App/TabsContent/SearchTab/SearchTab';
+import ShareTab from '../components/App/TabsContent/ShareTab/ShareTab';
+import AnalyzeTab from '../components/App/TabsContent/AnalyzeNewTab/AnalyzeTab';
+import UserPlans from '../components/App/Account/Plans/UserPlans';
+import UpgradePlanModal from '../components/App/Account/Plans/UpgradePlanModal';
+
+function AuthenticatedRoute(props) {
+  const {
+    common: { base, auth },
+    match,
+    history,
+    actions
+  } = props;
+  const { isAuthPending, token: isLoggedIn, user } = auth;
+
+  const isMaster = user && user.role === 'ROLE_MASTER_USER';
+  const activeTab = match.params && match.params.activeTab;
+
+  const allowAnalytics = get(user, [
+    'restrictions',
+    'permissions',
+    'analytics'
+  ]);
+
+  useEffect(() => {
+    if (!isAuthPending && !isLoggedIn) {
+      history.push('/auth/login');
+      return;
+    }
+  }, [isAuthPending, isLoggedIn]);
+
+  const activeTabDetails = base.tabs[activeTab];
+  let subTabs = activeTabDetails && activeTabDetails.items;
+
+  if (subTabs) {
+    subTabs = subTabs.filter((tab) => {
+      return !tab.masterOnly || auth.user.role === 'ROLE_MASTER_USER';
+    });
+  }
+
+  if (!isAuthPending && !isLoggedIn) {
+    return null;
+  }
+
+  return (
+    <App>
+      <Fragment>
+        <Switch>
+          <Route path="/app/search">
+            <SearchTab activeTabName={activeTab} subTabs={subTabs} />
+          </Route>
+          <Route path="/app/analyze">
+            <AnalyzeTab
+              activeTabName={activeTab}
+              subTabs={subTabs}
+              allowAnalytics={allowAnalytics}
+            />
+          </Route>
+          <Route path="/app/share">
+            <ShareTab
+              activeTabName={activeTab}
+              subTabs={subTabs}
+              isMaster={isMaster}
+            />
+          </Route>
+          <Route path="/app/plans">
+            <UserPlans />
+          </Route>
+          <Redirect to="/app/search/search" />
+        </Switch>
+
+        <UpgradePlanModal
+          isModalOpen={base.isUpgradeVisible}
+          toggle={actions.toggleUpgradeModal}
+        />
+      </Fragment>
+    </App>
+  );
+}
+
+AuthenticatedRoute.propTypes = {
+  actions: PropTypes.object.isRequired,
+  common: PropTypes.object.isRequired,
+  match: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
+};
+
+export default reduxConnect('common', ['common'])(AuthenticatedRoute);

frontend/app/routing/SiteScripts.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import {
+  fbPixelScript,
+  gtagScript,
+  gtagScriptURL,
+  hubspotTracking,
+  linkedInsightTag
+} from '../common/scripts';
+
+function SiteScripts() {
+  const [initHubSpot, setInitHubSpot] = useState(false);
+
+  useEffect(() => {
+    /* Below pushes a setPath call into _hsq before the tracking code loads to set the URL that gets tracked for the first page view (the trackPageView function is called automatically when the tracking code is loaded). Subsequent calls are in usePageTracking.js
+     */
+    const _hsq = (window._hsq = window._hsq || []);
+    _hsq.push(['setPath', window.location.pathname + window.location.search]);
+    setInitHubSpot(true);
+  }, []);
+
+  return (
+    <Helmet>
+      {gtagScriptURL}
+      {gtagScript}
+
+      {fbPixelScript}
+      {/* noscript tag for fb pixel may not be required here */}
+
+      {initHubSpot && hubspotTracking}
+
+      {linkedInsightTag}
+      {/* noscript tag for insight tag may not be required here */}
+    </Helmet>
+  );
+}
+
+export default SiteScripts;

frontend/app/routing/UnauthenticatedRoute.js

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react';
+import { Redirect, Switch, Route } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import ForgotPassword from '../components/LoginRegister/ForgotPassword';
+import Login from '../components/LoginRegister/Login';
+import ResetPassword from '../components/LoginRegister/ResetPassword';
+import reduxConnect from '../redux/utils/connect';
+// import Register from '../components/LoginRegister/Registration/Register';
+import RegisterSuccess from '../components/LoginRegister/Registration/RegisterSuccess';
+import RegisterConfirmEmail from '../components/LoginRegister/Registration/RegisterConfirmEmail';
+import RegisterFreeAccount from '../components/LoginRegister/Registration/RegisterFreeAccount';
+// import CostCalculator from '../components/LoginRegister/Registration/CostCalculator';
+
+function UnauthenticatedRoute(props) {
+  const { auth, history } = props;
+  const { isAuthPending, token: isLoggedIn } = auth;
+
+  useEffect(() => {
+    if (!isAuthPending && isLoggedIn) {
+      history.push('/app/search/search');
+      return;
+    }
+  }, [isAuthPending, isLoggedIn]);
+
+  if (!isAuthPending && isLoggedIn) {
+    return null;
+  }
+
+  return (
+    <Switch>
+      <Route path="/auth/login" component={Login} />
+      <Route path="/auth/register/:step?" component={RegisterFreeAccount} />
+      {/* <Route path="/auth/register/:step?" component={Register} /> */}
+      <Route path="/auth/register-success" component={RegisterSuccess} />
+      <Route
+        path="/auth/confirm-account/:token"
+        component={RegisterConfirmEmail}
+      />
+      <Route path="/auth/forgot-password" component={ForgotPassword} />
+      <Route path="/auth/reset-password" component={ResetPassword} />
+      {/* <Route path="/cost-calculator" component={CostCalculator} /> */}
+      <Redirect to="/auth/login" />
+    </Switch>
+  );
+}
+
+UnauthenticatedRoute.propTypes = {
+  auth: PropTypes.object.isRequired,
+  match: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
+};
+
+export default reduxConnect('auth', ['common', 'auth'])(UnauthenticatedRoute);