Fix issues caused by the upgrade

Changes:
* Updated imports to be from `react-router-dom` as opposed to `react-router`
* `react-router` v6 provides a cleaner way of managing routes and nested
  routes. Refactored `Routes` and `SettingsPage` to reflect this.
* Renamed `Routes` to `AppRoutes` to avoid confict with `react-router`'s
  `Routes` component.
* Using `BrowserRouter` instead of `Router`
* Use `useNavigate` and `useLocation` hooks in the component instead of using
  `routerStore` to avoid `history` dependency and to avoid calling
  `createBrowserHistory`

Author: rohit-nair

app/src/App.tsx

@@ -5,7 +5,7 @@ import AlertContainer from 'components/common/AlertContainer';
 import FullHeight from 'components/common/FullHeight';
 import { ThemeProvider } from 'components/theme';
 import TourHost from 'components/tour/TourHost';
-import Routes from './Routes';
+import AppRoutes from './AppRoutes';
 
 const App = () => {
   const store = createStore();
@@ -14,7 +14,7 @@ const App = () => {
     <FullHeight>
       <StoreProvider store={store}>
         <ThemeProvider>
-          <Routes />
+          <AppRoutes />
           <AlertContainer />
           <TourHost />
         </ThemeProvider>

app/src/AppRoutes.tsx

@@ -0,0 +1,62 @@
+import React, { Suspense } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Loading from 'components/common/Loading';
+import { Layout } from 'components/layout';
+
+const LazyAuthPage = React.lazy(() => import('components/auth/AuthPage'));
+const LazyLoopPage = React.lazy(() => import('components/loop/LoopPage'));
+const LazyHistoryPage = React.lazy(() => import('components/history/HistoryPage'));
+const LazyPoolPage = React.lazy(() => import('components/pool/PoolPage'));
+const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPage'));
+const LazyConnectPage = React.lazy(() => import('components/connect/ConnectPage'));
+
+const AppRoutes: React.FC = () => {
+  return (
+    <Suspense fallback={<Loading delay={500} />}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<LazyAuthPage />} />
+          <Route>
+            <Route
+              path="loop"
+              element={
+                <Layout>
+                  <LazyLoopPage />
+                </Layout>
+              }
+            />
+            <Route
+              path="history"
+              element={
+                <Layout>
+                  <LazyHistoryPage />
+                </Layout>
+              }
+            />
+            <Route
+              path="pool"
+              element={
+                <Layout>
+                  <LazyPoolPage />
+                </Layout>
+              }
+            />
+            {/* Only the GeneralSettings component needs hamburger menu 
+            hence not wrapping entire settings page in <Layout>. */}
+            <Route path="settings/*" element={<LazySettingsPage />} />
+            <Route
+              path="connect"
+              element={
+                <Layout>
+                  <LazyConnectPage />
+                </Layout>
+              }
+            />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </Suspense>
+  );
+};
+
+export default AppRoutes;

app/src/Routes.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, useMemo } from 'react';
-import { Router } from 'react-router';
+import { BrowserRouter } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import { BalanceMode, Unit } from 'util/constants';
 import { AuthenticationError } from 'util/errors';
@@ -70,13 +70,13 @@ const StoryWrapper: React.FC<{
   return (
     <StoreProvider store={store}>
       <ThemeProvider>
-        <Router history={store.router.history}>
+        <BrowserRouter>
           {/* modify the bg styles so it isn't too big in docs mode */}
           <Background style={{ minHeight: 'inherit', height: '100%' }}>
             {/* render the Story after the store has been initialized */}
             {store.initialized ? <div style={style}>{children}</div> : null}
           </Background>
-        </Router>
+        </BrowserRouter>
         <AlertContainer />
       </ThemeProvider>
     </StoreProvider>

app/src/__stories__/StoryWrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Routes from 'Routes';
+import AppRoutes from 'AppRoutes';
 import { renderWithProviders } from 'util/tests';
 import { createStore, Store } from 'store';
 
@@ -12,7 +12,7 @@ describe('Routes Component', () => {
   });
 
   const render = () => {
-    return renderWithProviders(<Routes />, store);
+    return renderWithProviders(<AppRoutes />, store);
   };
 
   it('should display the Auth page by default', async () => {

app/src/__tests__/Routes.spec.tsx renamed to app/src/__tests__/AppRoutes.spec.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { ArrowLeft, Download, HeaderThree, HelpCircle } from '../base';
 import Tip from './Tip';
+import { useNavigate } from 'react-router-dom';
 
 const Styled = {
   Wrapper: styled.div`
@@ -43,7 +44,7 @@ const Styled = {
 
 interface Props {
   title: ReactNode;
-  onBackClick?: () => void;
+  showBackButton?: boolean;
   backText?: string;
   onHelpClick?: () => void;
   exportTip?: string;
@@ -52,19 +53,23 @@ interface Props {
 
 const PageHeader: React.FC<Props> = ({
   title,
-  onBackClick,
+  showBackButton,
   backText,
   onHelpClick,
   exportTip,
   onExportClick,
 }) => {
   const { l } = usePrefixedTranslation('cmps.common.PageHeader');
+  const navigate = useNavigate();
+  const onBackClick = () => {
+    navigate(-1);
+  };
 
   const { Wrapper, Left, Center, Right, BackLink } = Styled;
   return (
     <Wrapper>
       <Left>
-        {onBackClick && (
+        {showBackButton && (
           <BackLink onClick={onBackClick}>
             <ArrowLeft />
             {backText}

app/src/components/common/PageHeader.tsx

@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
 import { useStore } from 'store';
 import { Background, Menu } from 'components/base';
 import Sidebar from './Sidebar';
+import { useLocation } from 'react-router-dom';
 
 interface CollapsedProps {
   collapsed: boolean;
@@ -110,11 +111,13 @@ const Styled = {
 
 export const Layout: React.FC = ({ children }) => {
   const { settingsStore, appView } = useStore();
+  const location = useLocation();
+  const fullWidth = location.pathname === `/pool`;
 
   const { Container, Hamburger, Aside, Content, Fluid } = Styled;
   return (
     <Background>
-      <Container fullWidth={appView.fullWidth}>
+      <Container fullWidth={fullWidth}>
         <Hamburger
           collapsed={!settingsStore.sidebarVisible}
           onClick={settingsStore.toggleSidebar}
@@ -124,7 +127,7 @@ export const Layout: React.FC = ({ children }) => {
         <Aside collapsed={!settingsStore.sidebarVisible}>
           <Sidebar />
         </Aside>
-        <Content collapsed={!settingsStore.sidebarVisible} fullWidth={appView.fullWidth}>
+        <Content collapsed={!settingsStore.sidebarVisible} fullWidth={fullWidth}>
           <Fluid className="container-fluid">{children}</Fluid>
         </Content>
       </Container>

app/src/components/layout/Layout.tsx

@@ -5,6 +5,8 @@ import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Badge, HeaderFour } from 'components/base';
 import { PUBLIC_URL } from '../../config';
+import { Link } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 const Styled = {
   NavHeader: styled(HeaderFour)`
@@ -19,7 +21,7 @@ const Styled = {
     font-size: ${props => props.theme.sizes.xs};
     margin-right: -17px;
 
-    > span {
+    > a > span {
       display: block;
       height: 50px;
       line-height: 50px;
@@ -35,7 +37,7 @@ const Styled = {
       }
     }
 
-    &.active > span {
+    &.active > a > span {
       border-left: 3px solid ${props => props.theme.colors.offWhite};
       background-color: ${props => props.theme.colors.blue};
 
@@ -49,42 +51,44 @@ const Styled = {
 const NavItem: React.FC<{
   page: string;
   badge?: string;
-  onClick: () => void;
-}> = observer(({ page, badge, onClick }) => {
+}> = observer(({ page, badge }) => {
   const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
-  const { router } = useStore();
-  const className = router.location.pathname.startsWith(`${PUBLIC_URL}/${page}`)
-    ? 'active'
-    : '';
+  const { settingsStore, log } = useStore();
+  const location = useLocation();
+  const className = location.pathname.startsWith(`/${page}`) ? 'active' : '';
 
+  const onClick = () => {
+    settingsStore.autoCollapseSidebar();
+    log.info(`Go to the ${page} page`);
+  };
   return (
     <Styled.NavItem className={className}>
-      <span onClick={onClick}>
-        {l(page)}
-        {badge && (
-          <sup>
-            <Badge muted>{badge}</Badge>
-          </sup>
-        )}
-      </span>
+      <Link to={`/${page}`} onClick={onClick}>
+        <span>
+          {l(page)}
+          {badge && (
+            <sup>
+              <Badge muted>{badge}</Badge>
+            </sup>
+          )}
+        </span>
+      </Link>
     </Styled.NavItem>
   );
 });
 
 const NavMenu: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
-  const { appView } = useStore();
-
   const { NavHeader, Nav } = Styled;
   return (
     <>
       <NavHeader>{l('menu')}</NavHeader>
       <Nav>
-        <NavItem page="loop" onClick={appView.goToLoop} />
-        <NavItem page="history" onClick={appView.goToHistory} />
-        <NavItem page="pool" badge={l('common.preview')} onClick={appView.goToPool} />
-        <NavItem page="settings" onClick={appView.goToSettings} />
-        <NavItem page="connect" badge={l('common.beta')} onClick={appView.goToConnect} />
+        <NavItem page="loop" />
+        <NavItem page="history" />
+        <NavItem page="pool" badge={l('common.preview')} />
+        <NavItem page="settings" />
+        <NavItem page="connect" badge={l('common.beta')} />
       </Nav>
     </>
   );

app/src/components/layout/NavMenu.tsx

@@ -43,11 +43,7 @@ const BalanceSettings: React.FC = () => {
   const { Wrapper, Content } = Styled;
   return (
     <Wrapper>
-      <PageHeader
-        title={l('pageTitle')}
-        backText={l('backText')}
-        onBackClick={handleBack}
-      />
+      <PageHeader title={l('pageTitle')} backText={l('backText')} showBackButton />
       <Content>
         <HeaderFour>{l('title')}</HeaderFour>
         <BalanceModeItem mode={BalanceMode.receive} />

app/src/components/settings/BalanceSettings.tsx

@@ -98,11 +98,7 @@ const ExplorerSettings: React.FC = () => {
   const { Wrapper, Content, Actions } = Styled;
   return (
     <Wrapper>
-      <PageHeader
-        title={l('pageTitle')}
-        backText={l('backText')}
-        onBackClick={handleBack}
-      />
+      <PageHeader title={l('pageTitle')} backText={l('backText')} showBackButton />
       <Content>
         <ExplorerField
           label={l('bitcoinTxUrl')}