Merge pull request #370 from rohit-nair/rn/react-router-upgrade

deps: Upgrade `react-router` to v6

Author: jamaljsr

app/package.json

@@ -29,7 +29,6 @@
     "date-fns": "2.14.0",
     "debug": "4.1.1",
     "file-saver": "2.0.2",
-    "history": "4.10.1",
     "http-proxy-middleware": "1.0.4",
     "i18next": "19.5.1",
     "i18next-browser-languagedetector": "5.0.0",
@@ -43,7 +42,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.7.0",
-    "react-router": "5.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "react-toastify": "6.0.6",
     "react-virtualized": "9.21.2",
@@ -72,7 +71,7 @@
     "@types/node": "14.0.14",
     "@types/react": "17.0.13",
     "@types/react-dom": "17.0.8",
-    "@types/react-router": "5.1.8",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized": "9.21.10",
     "@types/reactour": "1.17.1",
     "@types/semver": "^7.3.9",
@@ -90,9 +89,6 @@
     "ts-protoc-gen": "0.12.0",
     "typescript": "4.1.6"
   },
-  "resolutions": {
-    "history": "4.10.1"
-  },
   "eslintConfig": {
     "extends": "react-app",
     "ignorePatterns": [

app/src/App.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { Suspense } from 'react';
+import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
 import './App.scss';
 import { createStore, StoreProvider } from 'store';
 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';
+import Loading from 'components/common/Loading';
+import { PUBLIC_URL } from 'config';
 
 const App = () => {
   const store = createStore();
@@ -14,9 +17,13 @@ const App = () => {
     <FullHeight>
       <StoreProvider store={store}>
         <ThemeProvider>
-          <Routes />
-          <AlertContainer />
-          <TourHost />
+          <Suspense fallback={<Loading delay={500} />}>
+            <HistoryRouter basename={PUBLIC_URL} history={store.router.history}>
+              <AppRoutes />
+              <AlertContainer />
+              <TourHost />
+            </HistoryRouter>
+          </Suspense>
         </ThemeProvider>
       </StoreProvider>
     </FullHeight>

app/src/AppRoutes.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+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 (
+    <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>
+          }
+        />
+        <Route
+          path="settings/*"
+          element={
+            <Layout>
+              <LazySettingsPage />
+            </Layout>
+          }
+        />
+        <Route
+          path="connect"
+          element={
+            <Layout>
+              <LazyConnectPage />
+            </Layout>
+          }
+        />
+      </Route>
+    </Routes>
+  );
+};
+
+export default AppRoutes;

app/src/Routes.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, useMemo } from 'react';
-import { Router } from 'react-router';
+import { unstable_HistoryRouter as HistoryRouter } 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}>
+        <HistoryRouter history={store.router.history}>
           {/* 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>
+        </HistoryRouter>
         <AlertContainer />
       </ThemeProvider>
     </StoreProvider>

app/src/__stories__/StoryWrapper.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Routes from 'Routes';
+import { act } from '@testing-library/react';
+import AppRoutes from 'AppRoutes';
 import { renderWithProviders } from 'util/tests';
 import { createStore, Store } from 'store';
 
@@ -12,7 +13,7 @@ describe('Routes Component', () => {
   });
 
   const render = () => {
-    return renderWithProviders(<Routes />, store);
+    return renderWithProviders(<AppRoutes />, store);
   };
 
   it('should display the Auth page by default', async () => {
@@ -29,21 +30,27 @@ describe('Routes Component', () => {
 
     it('should display the Loop page', async () => {
       const { findByText, store } = render();
-      store.appView.goToLoop();
+      act(() => {
+        store.appView.goToLoop();
+      });
       expect(await findByText('Total Outbound Liquidity')).toBeInTheDocument();
       expect(store.router.location.pathname).toBe('/loop');
     });
 
     it('should display the History page', async () => {
       const { findByText, store } = render();
-      store.appView.goToHistory();
+      act(() => {
+        store.appView.goToHistory();
+      });
       expect(await findByText('History')).toBeInTheDocument();
       expect(store.router.location.pathname).toBe('/history');
     });
 
     it('should display the Settings page', async () => {
       const { findByText, store } = render();
-      store.appView.goToSettings();
+      act(() => {
+        store.appView.goToSettings();
+      });
       expect(await findByText('My Node')).toBeInTheDocument();
       expect(store.router.location.pathname).toBe('/settings');
     });

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Route, Routes } from 'react-router-dom';
 import { runInAction } from 'mobx';
 import { fireEvent } from '@testing-library/react';
 import copyToClipboard from 'copy-to-clipboard';
@@ -20,7 +21,12 @@ describe('SettingsPage', () => {
   });
 
   const render = () => {
-    return renderWithProviders(<SettingsPage />, store);
+    return renderWithProviders(
+      <Routes>
+        <Route path="settings/*" element={<SettingsPage />} />
+      </Routes>,
+      store,
+    );
   };
 
   it('should display the title', () => {

app/src/__tests__/components/settings/SettingsPage.spec.tsx

@@ -12,6 +12,7 @@ const Styled = {
   `,
   Left: styled.span`
     flex: 1;
+    padding-left: 16px;
     text-align: left;
   `,
   Center: styled.span`

app/src/components/common/PageHeader.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';
 import { observer } from 'mobx-react-lite';
 import styled from '@emotion/styled';
-import { PUBLIC_URL } from '../../config';
 import BalanceSettings from './BalanceSettings';
 import ExplorerSettings from './ExplorerSettings';
 import GeneralSettings from './GeneralSettings';
@@ -19,12 +18,12 @@ const SettingsPage: React.FC = () => {
 
   return (
     <Wrapper>
-      <Switch>
-        <Route path={`${PUBLIC_URL}/settings`} exact component={GeneralSettings} />
-        <Route path={`${PUBLIC_URL}/settings/unit`} component={UnitSettings} />
-        <Route path={`${PUBLIC_URL}/settings/balance`} component={BalanceSettings} />
-        <Route path={`${PUBLIC_URL}/settings/explorers`} component={ExplorerSettings} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<GeneralSettings />} />
+        <Route path="unit" element={<UnitSettings />} />
+        <Route path="balance" element={<BalanceSettings />} />
+        <Route path="explorers" element={<ExplorerSettings />} />
+      </Routes>
     </Wrapper>
   );
 };

app/src/components/settings/SettingsPage.tsx

@@ -14,7 +14,7 @@ export default class RouterStore {
     this.history = history;
     this.location = history.location;
 
-    history.listen(location => {
+    history.listen(({ location }) => {
       runInAction(() => {
         this.location = location;
       });