Skip to content

Commit c5ca1f6

Browse files
rohit-nairrohit-nair
committed
Use unstable_HistoryRouter and fix tests
Instead of resorting using `BrowserRouter` with `useNagigate` and `useLocation` use `unstable_HistoryRouter` as it gets us to upgrade to ReactRouter v6 without having to do significant refactor as to how `goTo*` methods and tests work. Let's refactor to use `BrowserRouter` and hooks in a separate PR.
1 parent 26340b6 commit c5ca1f6

File tree

12 files changed

+177
-163
lines changed

12 files changed

+177
-163
lines changed

‎app/src/App.tsx

Lines changed: 11 additions & 4 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';
89
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-
<AppRoutes />
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: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { Suspense } from 'react';
2-
import { BrowserRouter, Route, Routes } from 'react-router-dom';
2+
import { unstable_HistoryRouter as HistoryRouter, Route, Routes } from 'react-router-dom';
33
import Loading from 'components/common/Loading';
44
import { Layout } from 'components/layout';
55
import { PUBLIC_URL } from 'config';
6+
import { useStore } from 'store';
67

78
const LazyAuthPage = React.lazy(() => import('components/auth/AuthPage'));
89
const LazyLoopPage = React.lazy(() => import('components/loop/LoopPage'));
@@ -12,51 +13,53 @@ const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPa
1213
const LazyConnectPage = React.lazy(() => import('components/connect/ConnectPage'));
1314

1415
const AppRoutes: React.FC = () => {
16+
const { router } = useStore();
1517
return (
16-
<Suspense fallback={<Loading delay={500} />}>
17-
<BrowserRouter basename={PUBLIC_URL}>
18-
<Routes>
19-
<Route path="/" element={<LazyAuthPage />} />
20-
<Route>
21-
<Route
22-
path="loop"
23-
element={
24-
<Layout>
25-
<LazyLoopPage />
26-
</Layout>
27-
}
28-
/>
29-
<Route
30-
path="history"
31-
element={
32-
<Layout>
33-
<LazyHistoryPage />
34-
</Layout>
35-
}
36-
/>
37-
<Route
38-
path="pool"
39-
element={
40-
<Layout>
41-
<LazyPoolPage />
42-
</Layout>
43-
}
44-
/>
45-
{/* Only the GeneralSettings component needs hamburger menu
46-
hence not wrapping entire settings page in <Layout>. */}
47-
<Route path="settings/*" element={<LazySettingsPage />} />
48-
<Route
49-
path="connect"
50-
element={
51-
<Layout>
52-
<LazyConnectPage />
53-
</Layout>
54-
}
55-
/>
56-
</Route>
57-
</Routes>
58-
</BrowserRouter>
59-
</Suspense>
18+
<Routes>
19+
<Route path="/" element={<LazyAuthPage />} />
20+
<Route>
21+
<Route
22+
path="loop"
23+
element={
24+
<Layout>
25+
<LazyLoopPage />
26+
</Layout>
27+
}
28+
/>
29+
<Route
30+
path="history"
31+
element={
32+
<Layout>
33+
<LazyHistoryPage />
34+
</Layout>
35+
}
36+
/>
37+
<Route
38+
path="pool"
39+
element={
40+
<Layout>
41+
<LazyPoolPage />
42+
</Layout>
43+
}
44+
/>
45+
<Route
46+
path="settings/*"
47+
element={
48+
<Layout>
49+
<LazySettingsPage />
50+
</Layout>
51+
}
52+
/>
53+
<Route
54+
path="connect"
55+
element={
56+
<Layout>
57+
<LazyConnectPage />
58+
</Layout>
59+
}
60+
/>
61+
</Route>
62+
</Routes>
6063
);
6164
};
6265

‎app/src/__tests__/AppRoutes.spec.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { act } from '@testing-library/react';
23
import AppRoutes from 'AppRoutes';
34
import { renderWithProviders } from 'util/tests';
45
import { createStore, Store } from 'store';
@@ -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: 8 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,13 @@ describe('SettingsPage', () => {
2021
});
2122

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

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

‎app/src/components/common/PageHeader.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { ReactNode } from 'react';
1+
import React, { ReactNode, useCallback } from 'react';
22
import { observer } from 'mobx-react-lite';
33
import styled from '@emotion/styled';
44
import { usePrefixedTranslation } from 'hooks';
55
import { ArrowLeft, Download, HeaderThree, HelpCircle } from '../base';
66
import Tip from './Tip';
7-
import { useNavigate } from 'react-router-dom';
7+
import { useStore } from 'store';
88

99
const Styled = {
1010
Wrapper: styled.div`
@@ -13,6 +13,7 @@ const Styled = {
1313
`,
1414
Left: styled.span`
1515
flex: 1;
16+
padding-left: 16px;
1617
text-align: left;
1718
`,
1819
Center: styled.span`
@@ -60,17 +61,15 @@ const PageHeader: React.FC<Props> = ({
6061
onExportClick,
6162
}) => {
6263
const { l } = usePrefixedTranslation('cmps.common.PageHeader');
63-
const navigate = useNavigate();
64-
const onBackClick = () => {
65-
navigate(-1);
66-
};
64+
const { appView } = useStore();
65+
const handleBack = useCallback(() => appView.showSettings(''), [appView]);
6766

6867
const { Wrapper, Left, Center, Right, BackLink } = Styled;
6968
return (
7069
<Wrapper>
7170
<Left>
7271
{showBackButton && (
73-
<BackLink onClick={onBackClick}>
72+
<BackLink onClick={handleBack}>
7473
<ArrowLeft />
7574
{backText}
7675
</BackLink>

‎app/src/components/layout/NavMenu.tsx

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { usePrefixedTranslation } from 'hooks';
55
import { useStore } from 'store';
66
import { Badge, HeaderFour } from 'components/base';
77
import { PUBLIC_URL } from '../../config';
8-
import { Link } from 'react-router-dom';
9-
import { useLocation } from 'react-router-dom';
108

119
const Styled = {
1210
NavHeader: styled(HeaderFour)`
@@ -21,7 +19,7 @@ const Styled = {
2119
font-size: ${props => props.theme.sizes.xs};
2220
margin-right: -17px;
2321
24-
> a > span {
22+
> span {
2523
display: block;
2624
height: 50px;
2725
line-height: 50px;
@@ -37,7 +35,7 @@ const Styled = {
3735
}
3836
}
3937
40-
&.active > a > span {
38+
&.active > span {
4139
border-left: 3px solid ${props => props.theme.colors.offWhite};
4240
background-color: ${props => props.theme.colors.blue};
4341
@@ -51,44 +49,42 @@ const Styled = {
5149
const NavItem: React.FC<{
5250
page: string;
5351
badge?: string;
54-
}> = observer(({ page, badge }) => {
52+
onClick: () => void;
53+
}> = observer(({ page, badge, onClick }) => {
5554
const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
56-
const { settingsStore, log } = useStore();
57-
const location = useLocation();
58-
const className = location.pathname.startsWith(`/${page}`) ? 'active' : '';
55+
const { router } = useStore();
56+
const className = router.location.pathname.startsWith(`${PUBLIC_URL}/${page}`)
57+
? 'active'
58+
: '';
5959

60-
const onClick = () => {
61-
settingsStore.autoCollapseSidebar();
62-
log.info(`Go to the ${page} page`);
63-
};
6460
return (
6561
<Styled.NavItem className={className}>
66-
<Link to={`/${page}`} onClick={onClick}>
67-
<span>
68-
{l(page)}
69-
{badge && (
70-
<sup>
71-
<Badge muted>{badge}</Badge>
72-
</sup>
73-
)}
74-
</span>
75-
</Link>
62+
<span onClick={onClick}>
63+
{l(page)}
64+
{badge && (
65+
<sup>
66+
<Badge muted>{badge}</Badge>
67+
</sup>
68+
)}
69+
</span>
7670
</Styled.NavItem>
7771
);
7872
});
7973

8074
const NavMenu: React.FC = () => {
8175
const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
76+
const { appView } = useStore();
77+
8278
const { NavHeader, Nav } = Styled;
8379
return (
8480
<>
8581
<NavHeader>{l('menu')}</NavHeader>
8682
<Nav>
87-
<NavItem page="loop" />
88-
<NavItem page="history" />
89-
<NavItem page="pool" badge={l('common.preview')} />
90-
<NavItem page="settings" />
91-
<NavItem page="connect" badge={l('common.beta')} />
83+
<NavItem page="loop" onClick={appView.goToLoop} />
84+
<NavItem page="history" onClick={appView.goToHistory} />
85+
<NavItem page="pool" badge={l('common.preview')} onClick={appView.goToPool} />
86+
<NavItem page="settings" onClick={appView.goToSettings} />
87+
<NavItem page="connect" badge={l('common.beta')} onClick={appView.goToConnect} />
9288
</Nav>
9389
</>
9490
);

‎app/src/components/settings/BalanceSettings.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,6 @@ const BalanceModeItem: React.FC<{ mode: BalanceMode }> = observer(({ mode }) =>
3636

3737
const BalanceSettings: React.FC = () => {
3838
const { l } = usePrefixedTranslation('cmps.settings.BalanceSettings');
39-
const { appView } = useStore();
40-
41-
const handleBack = useCallback(() => appView.showSettings(''), [appView]);
4239

4340
const { Wrapper, Content } = Styled;
4441
return (

0 commit comments

Comments
 (0)