Skip to content

Commit 0db6be4

Browse files
authored
Merge pull request #370 from rohit-nair/rn/react-router-upgrade
deps: Upgrade `react-router` to v6
2 parents 43b251e + 2b2879c commit 0db6be4

File tree

12 files changed

+152
-152
lines changed

12 files changed

+152
-152
lines changed

app/package.json

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"date-fns": "2.14.0",
3030
"debug": "4.1.1",
3131
"file-saver": "2.0.2",
32-
"history": "4.10.1",
3332
"http-proxy-middleware": "1.0.4",
3433
"i18next": "19.5.1",
3534
"i18next-browser-languagedetector": "5.0.0",
@@ -43,7 +42,7 @@
4342
"react": "17.0.2",
4443
"react-dom": "17.0.2",
4544
"react-i18next": "11.7.0",
46-
"react-router": "5.2.0",
45+
"react-router-dom": "^6.3.0",
4746
"react-scripts": "5.0.0",
4847
"react-toastify": "6.0.6",
4948
"react-virtualized": "9.21.2",
@@ -72,7 +71,7 @@
7271
"@types/node": "14.0.14",
7372
"@types/react": "17.0.13",
7473
"@types/react-dom": "17.0.8",
75-
"@types/react-router": "5.1.8",
74+
"@types/react-router-dom": "^5.3.3",
7675
"@types/react-virtualized": "9.21.10",
7776
"@types/reactour": "1.17.1",
7877
"@types/semver": "^7.3.9",
@@ -90,9 +89,6 @@
9089
"ts-protoc-gen": "0.12.0",
9190
"typescript": "4.1.6"
9291
},
93-
"resolutions": {
94-
"history": "4.10.1"
95-
},
9692
"eslintConfig": {
9793
"extends": "react-app",
9894
"ignorePatterns": [

app/src/App.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import React from 'react';
1+
import React, { Suspense } from 'react';
2+
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
23
import './App.scss';
34
import { createStore, StoreProvider } from 'store';
45
import AlertContainer from 'components/common/AlertContainer';
56
import FullHeight from 'components/common/FullHeight';
67
import { ThemeProvider } from 'components/theme';
78
import TourHost from 'components/tour/TourHost';
8-
import Routes from './Routes';
9+
import AppRoutes from './AppRoutes';
10+
import Loading from 'components/common/Loading';
11+
import { PUBLIC_URL } from 'config';
912

1013
const App = () => {
1114
const store = createStore();
@@ -14,9 +17,13 @@ const App = () => {
1417
<FullHeight>
1518
<StoreProvider store={store}>
1619
<ThemeProvider>
17-
<Routes />
18-
<AlertContainer />
19-
<TourHost />
20+
<Suspense fallback={<Loading delay={500} />}>
21+
<HistoryRouter basename={PUBLIC_URL} history={store.router.history}>
22+
<AppRoutes />
23+
<AlertContainer />
24+
<TourHost />
25+
</HistoryRouter>
26+
</Suspense>
2027
</ThemeProvider>
2128
</StoreProvider>
2229
</FullHeight>

app/src/AppRoutes.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { Route, Routes } from 'react-router-dom';
3+
import { Layout } from 'components/layout';
4+
5+
const LazyAuthPage = React.lazy(() => import('components/auth/AuthPage'));
6+
const LazyLoopPage = React.lazy(() => import('components/loop/LoopPage'));
7+
const LazyHistoryPage = React.lazy(() => import('components/history/HistoryPage'));
8+
const LazyPoolPage = React.lazy(() => import('components/pool/PoolPage'));
9+
const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPage'));
10+
const LazyConnectPage = React.lazy(() => import('components/connect/ConnectPage'));
11+
12+
const AppRoutes: React.FC = () => {
13+
return (
14+
<Routes>
15+
<Route path="/" element={<LazyAuthPage />} />
16+
<Route>
17+
<Route
18+
path="loop"
19+
element={
20+
<Layout>
21+
<LazyLoopPage />
22+
</Layout>
23+
}
24+
/>
25+
<Route
26+
path="history"
27+
element={
28+
<Layout>
29+
<LazyHistoryPage />
30+
</Layout>
31+
}
32+
/>
33+
<Route
34+
path="pool"
35+
element={
36+
<Layout>
37+
<LazyPoolPage />
38+
</Layout>
39+
}
40+
/>
41+
<Route
42+
path="settings/*"
43+
element={
44+
<Layout>
45+
<LazySettingsPage />
46+
</Layout>
47+
}
48+
/>
49+
<Route
50+
path="connect"
51+
element={
52+
<Layout>
53+
<LazyConnectPage />
54+
</Layout>
55+
}
56+
/>
57+
</Route>
58+
</Routes>
59+
);
60+
};
61+
62+
export default AppRoutes;

app/src/Routes.tsx

Lines changed: 0 additions & 41 deletions
This file was deleted.

app/src/__stories__/StoryWrapper.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { CSSProperties, useMemo } from 'react';
2-
import { Router } from 'react-router';
2+
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
33
import { observer } from 'mobx-react-lite';
44
import { BalanceMode, Unit } from 'util/constants';
55
import { AuthenticationError } from 'util/errors';
@@ -70,13 +70,13 @@ const StoryWrapper: React.FC<{
7070
return (
7171
<StoreProvider store={store}>
7272
<ThemeProvider>
73-
<Router history={store.router.history}>
73+
<HistoryRouter history={store.router.history}>
7474
{/* modify the bg styles so it isn't too big in docs mode */}
7575
<Background style={{ minHeight: 'inherit', height: '100%' }}>
7676
{/* render the Story after the store has been initialized */}
7777
{store.initialized ? <div style={style}>{children}</div> : null}
7878
</Background>
79-
</Router>
79+
</HistoryRouter>
8080
<AlertContainer />
8181
</ThemeProvider>
8282
</StoreProvider>

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import Routes from 'Routes';
2+
import { act } from '@testing-library/react';
3+
import AppRoutes from 'AppRoutes';
34
import { renderWithProviders } from 'util/tests';
45
import { createStore, Store } from 'store';
56

@@ -12,7 +13,7 @@ describe('Routes Component', () => {
1213
});
1314

1415
const render = () => {
15-
return renderWithProviders(<Routes />, store);
16+
return renderWithProviders(<AppRoutes />, store);
1617
};
1718

1819
it('should display the Auth page by default', async () => {
@@ -29,21 +30,27 @@ describe('Routes Component', () => {
2930

3031
it('should display the Loop page', async () => {
3132
const { findByText, store } = render();
32-
store.appView.goToLoop();
33+
act(() => {
34+
store.appView.goToLoop();
35+
});
3336
expect(await findByText('Total Outbound Liquidity')).toBeInTheDocument();
3437
expect(store.router.location.pathname).toBe('/loop');
3538
});
3639

3740
it('should display the History page', async () => {
3841
const { findByText, store } = render();
39-
store.appView.goToHistory();
42+
act(() => {
43+
store.appView.goToHistory();
44+
});
4045
expect(await findByText('History')).toBeInTheDocument();
4146
expect(store.router.location.pathname).toBe('/history');
4247
});
4348

4449
it('should display the Settings page', async () => {
4550
const { findByText, store } = render();
46-
store.appView.goToSettings();
51+
act(() => {
52+
store.appView.goToSettings();
53+
});
4754
expect(await findByText('My Node')).toBeInTheDocument();
4855
expect(store.router.location.pathname).toBe('/settings');
4956
});

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { Route, Routes } from 'react-router-dom';
23
import { runInAction } from 'mobx';
34
import { fireEvent } from '@testing-library/react';
45
import copyToClipboard from 'copy-to-clipboard';
@@ -20,7 +21,12 @@ describe('SettingsPage', () => {
2021
});
2122

2223
const render = () => {
23-
return renderWithProviders(<SettingsPage />, store);
24+
return renderWithProviders(
25+
<Routes>
26+
<Route path="settings/*" element={<SettingsPage />} />
27+
</Routes>,
28+
store,
29+
);
2430
};
2531

2632
it('should display the title', () => {

app/src/components/common/PageHeader.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const Styled = {
1212
`,
1313
Left: styled.span`
1414
flex: 1;
15+
padding-left: 16px;
1516
text-align: left;
1617
`,
1718
Center: styled.span`

app/src/components/settings/SettingsPage.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react';
2-
import { Route, Switch } from 'react-router';
2+
import { Route, Routes } from 'react-router';
33
import { observer } from 'mobx-react-lite';
44
import styled from '@emotion/styled';
5-
import { PUBLIC_URL } from '../../config';
65
import BalanceSettings from './BalanceSettings';
76
import ExplorerSettings from './ExplorerSettings';
87
import GeneralSettings from './GeneralSettings';
@@ -19,12 +18,12 @@ const SettingsPage: React.FC = () => {
1918

2019
return (
2120
<Wrapper>
22-
<Switch>
23-
<Route path={`${PUBLIC_URL}/settings`} exact component={GeneralSettings} />
24-
<Route path={`${PUBLIC_URL}/settings/unit`} component={UnitSettings} />
25-
<Route path={`${PUBLIC_URL}/settings/balance`} component={BalanceSettings} />
26-
<Route path={`${PUBLIC_URL}/settings/explorers`} component={ExplorerSettings} />
27-
</Switch>
21+
<Routes>
22+
<Route path="/" element={<GeneralSettings />} />
23+
<Route path="unit" element={<UnitSettings />} />
24+
<Route path="balance" element={<BalanceSettings />} />
25+
<Route path="explorers" element={<ExplorerSettings />} />
26+
</Routes>
2827
</Wrapper>
2928
);
3029
};

app/src/store/stores/routerStore.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default class RouterStore {
1414
this.history = history;
1515
this.location = history.location;
1616

17-
history.listen(location => {
17+
history.listen(({ location }) => {
1818
runInAction(() => {
1919
this.location = location;
2020
});

0 commit comments

Comments
 (0)