Skip to content

Commit

Permalink
feat: migrate to react router v6
Browse files Browse the repository at this point in the history
  • Loading branch information
gleiser-oliveira committed Sep 6, 2023
1 parent 03a1846 commit 040fc3a
Show file tree
Hide file tree
Showing 39 changed files with 474 additions and 605 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@
"react-dom": "^18.2.0",
"react-i18next": "^12.3.1",
"react-query": "^3.39.3",
"react-router": "^5.2.1",
"react-router-dom": "^5.0.1",
"react-router": "^6.15.0",
"react-router-dom": "^6.15.0",
"react-toastify": "9.0.1",
"react-uid": "^2.3.3",
"recharts": "2.1.9",
Expand Down
88 changes: 88 additions & 0 deletions src/App/Router/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React, { useEffect } from 'react';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import { isFeatureEnabled } from 'utilities';

import 'assets/styles/App.scss';
import { routes } from 'constants/routing';
import { useAuth } from 'context/AuthContext';
import Account from 'pages/Account';
import ConvertVrt from 'pages/ConvertVrt';
import Dashboard from 'pages/Dashboard';
import Vote from 'pages/Governance';
import History from 'pages/History';
import IsolatedPools from 'pages/IsolatedPools';
import { CorePoolMarket, IsolatedPoolMarket } from 'pages/Market';
import { CorePool, IsolatedPool } from 'pages/Pool';
import Proposal from 'pages/Proposal';
import Swap from 'pages/Swap';
import Vai from 'pages/Vai';
import Vaults from 'pages/Vault';
import Voter from 'pages/Voter';
import VoterLeaderboard from 'pages/VoterLeaderboard';
import Xvs from 'pages/Xvs';

const Router = () => {
const { accountAddress } = useAuth();
const location = useLocation();
const navigate = useNavigate();

// Redirect to account page if user has already connected their wallet and is
// visiting the dashboard. If they refresh the page while being on the
// dashboard, the redirection will not happen
useEffect(() => {
if (
!!accountAddress &&
location.pathname === routes.dashboard.path &&
window.history.length <= 2
) {
navigate(routes.account.path);
}
}, [location, accountAddress]);

return (
<Routes>
<Route path={routes.dashboard.path} element={<Dashboard />} />

{!!accountAddress && <Route path={routes.account.path} element={<Account />} />}

{isFeatureEnabled('isolatedPools') && (
<Route path={routes.isolatedPools.path} element={<IsolatedPools />} />
)}

{isFeatureEnabled('isolatedPools') && (
<Route path={routes.isolatedPool.path} element={<IsolatedPool />} />
)}

{isFeatureEnabled('isolatedPools') && (
<Route path={routes.isolatedPoolMarket.path} element={<IsolatedPoolMarket />} />
)}

<Route path={routes.corePool.path} element={<CorePool />} />
<Route path={routes.corePoolMarket.path} element={<CorePoolMarket />} />

<Route path={routes.vaults.path} element={<Vaults />} />

<Route path={routes.history.path} element={<History />} />

{/* suffix with a /* to make it accept nested routes */}
<Route path={`${routes.governance.path}/*`} element={<Vote />} />

<Route path={routes.governanceLeaderBoard.path} element={<VoterLeaderboard />} />
<Route path={routes.governanceVoter.path} element={<Voter />} />
<Route path={routes.governanceProposal.path} element={<Proposal />} />

<Route path={routes.xvs.path} element={<Xvs />} />

<Route path={routes.convertVrt.path} element={<ConvertVrt />} />

<Route path={routes.swap.path} element={<Swap />} />

<Route path={routes.vai.path} element={<Vai />} />

{/* redirect to the dashboard if no route matches */}
<Route path="*" element={<Dashboard />} />
</Routes>
);
};

export default Router;
86 changes: 0 additions & 86 deletions src/App/Switch/index.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions src/App/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { ErrorLoggerProvider } from 'context/ErrorLogger';
import { SuccessfulTransactionModalProvider } from 'context/SuccessfulTransactionModalContext';
import { MuiThemeProvider } from 'theme/MuiThemeProvider';

import Switch from './Switch';
import Router from './Router';

const App = () => (
<ErrorLoggerProvider>
Expand All @@ -31,7 +31,7 @@ const App = () => (
<Layout>
<ResetScrollOnRouteChange />

<Switch />
<Router />
</Layout>
</HashRouter>
</DisableLunaUstWarningProvider>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Layout/ClaimRewardButton/__tests__/index.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('components/Layout/ClaimRewardButton', () => {
});

it('renders claim button if user has pending rewards to claim', async () => {
const { getByTestId } = renderComponent(() => <ClaimRewardButton />, {
const { getByTestId } = renderComponent(<ClaimRewardButton />, {
authContextValue: {
accountAddress: fakeAddress,
},
Expand All @@ -57,7 +57,7 @@ describe('components/Layout/ClaimRewardButton', () => {
});

it('renders correct reward breakdown in modal', async () => {
const { getByTestId } = renderComponent(() => <ClaimRewardButton />, {
const { getByTestId } = renderComponent(<ClaimRewardButton />, {
authContextValue: {
accountAddress: fakeAddress,
},
Expand All @@ -73,7 +73,7 @@ describe('components/Layout/ClaimRewardButton', () => {
});

it('it disables submit button if user unchecks all groups', async () => {
const { getByTestId, queryAllByRole } = renderComponent(() => <ClaimRewardButton />, {
const { getByTestId, queryAllByRole } = renderComponent(<ClaimRewardButton />, {
authContextValue: {
accountAddress: fakeAddress,
},
Expand All @@ -100,7 +100,7 @@ describe('components/Layout/ClaimRewardButton', () => {

const { openSuccessfulTransactionModal } = useSuccessfulTransactionModal();

const { getByTestId } = renderComponent(() => <ClaimRewardButton />, {
const { getByTestId } = renderComponent(<ClaimRewardButton />, {
authContextValue: {
accountAddress: fakeAddress,
},
Expand Down Expand Up @@ -130,7 +130,7 @@ describe('components/Layout/ClaimRewardButton', () => {

const { openSuccessfulTransactionModal } = useSuccessfulTransactionModal();

const { getByTestId, queryAllByRole } = renderComponent(() => <ClaimRewardButton />, {
const { getByTestId, queryAllByRole } = renderComponent(<ClaimRewardButton />, {
authContextValue: {
accountAddress: fakeAddress,
},
Expand Down
64 changes: 38 additions & 26 deletions src/components/Layout/Header/Breadcrumbs/index.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import Vi from 'vitest';

import fakeAddress from '__mocks__/models/address';
Expand All @@ -21,31 +20,44 @@ describe('component/Layout/Header/Breadcrumbs', () => {
});

it.each([
routes.dashboard.path,
routes.account.path,
routes.governance.path,
routes.governanceLeaderBoard.path,
routes.governanceProposal.path.replace(':proposalId', 'FAKE-PROPOSAL-ID'),
routes.governanceVoter.path.replace(':address', fakeAddress),
routes.history.path,
routes.isolatedPools.path,
routes.isolatedPool.path.replace(':poolComptrollerAddress', fakeAddress),
routes.isolatedPoolMarket.path
.replace(':poolComptrollerAddress', fakeAddress)
.replace(':vTokenAddress', poolData[0].assets[0].vToken.address),
routes.corePool.path,
routes.corePoolMarket.path.replace(':vTokenAddress', poolData[0].assets[0].vToken.address),
routes.xvs.path,
routes.vai.path,
routes.vaults.path,
routes.convertVrt.path,
routes.swap.path,
])('outputs the right DOM based on the current path: %s', async pathname => {
const { container } = renderComponent(
<MemoryRouter initialEntries={[pathname]}>
<Breadcrumbs />
</MemoryRouter>,
);
[routes.dashboard.path, routes.dashboard.path],
[routes.account.path, routes.account.path],
[routes.governance.path, routes.governance.path],
[routes.governanceLeaderBoard.path, routes.governanceLeaderBoard.path],
[
routes.governanceProposal.path.replace(':proposalId', 'FAKE-PROPOSAL-ID'),
routes.governanceProposal.path,
],
[routes.governanceVoter.path.replace(':address', fakeAddress), routes.governanceVoter.path],
[routes.history.path, routes.history.path],
[routes.isolatedPools.path, routes.isolatedPools.path],
[
routes.isolatedPool.path.replace(':poolComptrollerAddress', fakeAddress),
routes.isolatedPool.path,
],
[
routes.isolatedPoolMarket.path
.replace(':poolComptrollerAddress', fakeAddress)
.replace(':vTokenAddress', poolData[0].assets[0].vToken.address),
routes.isolatedPoolMarket.path,
],
[routes.corePool.path, routes.corePool.path],
[
routes.corePoolMarket.path.replace(':vTokenAddress', poolData[0].assets[0].vToken.address),
routes.corePoolMarket.path,
],
[routes.xvs.path, routes.xvs.path],
[routes.vai.path, routes.vai.path],
[routes.vaults.path, routes.vaults.path],
[routes.convertVrt.path, routes.convertVrt.path],
[routes.swap.path, routes.swap.path],
])('outputs the right DOM based on the current path: %s', async (pathname, originalRoute) => {
const { container } = renderComponent(<Breadcrumbs />, {
routerOpts: {
routerInitialEntries: [pathname],
routePath: originalRoute,
},
});

expect(container.textContent).toMatchSnapshot();
});
Expand Down
Loading

0 comments on commit 040fc3a

Please sign in to comment.