React-router and Staking page with tabbed navigation

noisekit · noisekit · commit 4a6a16988be4 · 2022-07-19T10:10:34.000+08:00
diff --git a/content/LoansPage.tsx b/content/LoansPage.tsx
@@ -1,8 +1,7 @@
-import { useEffect, FC } from 'react';
+import { FC } from 'react';
 import Head from 'next/head';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
-import { useRouter } from 'next/router';
 
 import StatBox from 'components/StatBox';
 import { LineSpacer } from 'styles/common';
@@ -23,20 +22,13 @@ type LoansPageProps = {};
 
 const LoansPage: FC<LoansPageProps> = () => {
 	const { t } = useTranslation();
-	const router = useRouter();
 
 	const walletAddress = useRecoilValue(walletAddressState);
 
 	const { stakedCollateralValue, debtBalance } = useStakingCalculations();
 	const { selectedPriceCurrency, getPriceAtCurrentRate } = useSelectedPriceCurrency();
 	const { stakingAPR } = useUserStakingData(walletAddress);
 
-	useEffect(() => {
-		if (router.asPath === '/loans') {
-			router.push('/loans/new');
-		}
-	}, [router, router.asPath, router.push]);
-
 	return (
 		<>
 			<Head>
diff --git a/no-next/App.tsx b/no-next/App.tsx
@@ -8,7 +8,6 @@ import { ThemeProvider } from 'styled-components';
 import WithAppContainers from 'containers';
 import theme from 'styles/theme';
 import Layout from 'sections/shared/Layout';
-import AppLayout from 'sections/shared/Layout/AppLayout';
 import { MediaContextProvider } from 'styles/media';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
@@ -21,7 +20,7 @@ import SystemStatus from 'sections/shared/SystemStatus';
 import '../i18n';
 import Connector from 'containers/Connector';
 
-import DashboardPage from 'content/DashboardPage';
+import Routes from './Routes';
 
 const queryClient = new QueryClient({
 	defaultOptions: {
@@ -59,9 +58,7 @@ function InnerApp() {
 			>
 				<Layout>
 					<SystemStatus>
-						<AppLayout>
-							<DashboardPage />
-						</AppLayout>
+						<Routes />
 					</SystemStatus>
 				</Layout>
 				<ReactQueryDevtools />
diff --git a/no-next/Routes.tsx b/no-next/Routes.tsx
@@ -0,0 +1,51 @@
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+
+import { safeLazy } from '@synthetixio/safe-import';
+import AppLayout from '../sections/shared/Layout/AppLayout';
+
+const DashboardPage = safeLazy(
+	() => import(/* webpackChunkName: "dashboard" */ 'content/DashboardPage')
+);
+const SynthsPage = safeLazy(() => import(/* webpackChunkName: "synths" */ 'content/SynthsPage'));
+
+const StakingPage = safeLazy(() => import(/* webpackChunkName: "staking" */ 'content/StakingPage'));
+
+const LoansPage = safeLazy(() => import(/* webpackChunkName: "loans" */ 'content/LoansPage'));
+const NotFound = safeLazy(() => import(/* webpackChunkName: "404" */ '../pages/404'));
+
+function Page(props) {
+	return <pre style={{ padding: '50px' }}>{JSON.stringify(props, null, 2)}</pre>;
+}
+
+export default function AppRoutes() {
+	return (
+		<BrowserRouter>
+			<AppLayout>
+				<Routes>
+					<Route path="/loans" element={<Navigate to="/loans/new" replace={true} />} />
+					<Route path="/escrow" element={<Navigate to="/loans/rewards" replace={true} />} />
+
+					<Route path="/" element={<DashboardPage />} />
+					<Route path="/staking" element={<StakingPage />}>
+						<Route path="/staking/:action" element={<StakingPage />} />
+					</Route>
+					<Route path="/loans" element={<LoansPage />} />
+					<Route path="/synths" element={<SynthsPage />} />
+
+					<Route path="/gov" element={<Page />} />
+					<Route path="/earn" element={<Page />} />
+					<Route path="/debt" element={<Page />} />
+					<Route path="/l2" element={<Page />} />
+					<Route path="/escrow" element={<Page />} />
+					<Route path="/escrow/rewards" element={<Page />} />
+					<Route path="/escrow/ico" element={<Page />} />
+					<Route path="/history" element={<Page />} />
+					<Route path="/delegate" element={<Page />} />
+					<Route path="/merge-accounts" element={<Page />} />
+
+					<Route path="*" element={<NotFound />} />
+				</Routes>
+			</AppLayout>
+		</BrowserRouter>
+	);
+}
diff --git a/no-next/next-link.tsx b/no-next/next-link.tsx
@@ -1,4 +1,5 @@
-export default function Link({ ...props }) {
-	// eslint-disable-next-line jsx-a11y/anchor-has-content
-	return <a {...props} />;
+import { Link } from 'react-router-dom';
+
+export default function NoNextLink({ href, ...props }) {
+	return <Link to={href} {...props} />;
 }
diff --git a/no-next/next-router.ts b/no-next/next-router.ts
@@ -1,10 +1,13 @@
-const router = {
-	push: function push() {},
-	asPath: '',
-};
+import { useNavigate, useLocation } from 'react-router-dom';
 
 export function useRouter() {
-	return router;
-}
+	const navigate = useNavigate();
+	const location = useLocation();
 
-export default router;
+	return {
+		query: {},
+		push: navigate,
+		pathname: '',
+		asPath: location.pathname,
+	};
+}
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
 		"react-outside-click-handler": "^1.3.0",
 		"react-query": "3.16.0",
 		"react-responsive": "^8.2.0",
+		"react-router-dom": "^6.3.0",
 		"react-select": "^4.3.1",
 		"react-slick": "^0.27.13",
 		"react-table": "^7.7.0",
diff --git a/sections/layer2/migrate/MigrateTab/TabContent.tsx b/sections/layer2/migrate/MigrateTab/TabContent.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
-import router from 'next/router';
+import { useRouter } from 'next/router';
 
 import { formatCurrency } from 'utils/formatters/number';
 import { CryptoCurrency } from 'constants/currency';
@@ -59,6 +59,8 @@ const TabContent: FC<TabContentProps> = ({
 	const { t } = useTranslation();
 	const vestingCurrencyKey = CryptoCurrency['SNX'];
 
+	const router = useRouter();
+
 	const renderButton = () => {
 		if (isVestNeeded) {
 			return (
diff --git a/sections/loans/components/ActionBox/ActionBox.tsx b/sections/loans/components/ActionBox/ActionBox.tsx
@@ -56,7 +56,7 @@ const ActionBox: React.FC<ActionBoxProps> = () => {
 		<StructuredTab
 			boxPadding={20}
 			tabData={tabData}
-			setActiveTab={(key: string) => router.push(`/loans/${key}`)}
+			setActiveTab={(key) => router.push(`/loans/${key}`)}
 			activeTab={currentTab}
 		/>
 	);
diff --git a/sections/shared/Layout/AppLayout.tsx b/sections/shared/Layout/AppLayout.tsx
@@ -1,5 +1,5 @@
 import { FC, ReactNode, useEffect } from 'react';
-import router from 'next/router';
+// import { useRouter } from 'next/router';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 
@@ -18,6 +18,7 @@ type AppLayoutProps = {
 };
 
 const AppLayout: FC<AppLayoutProps> = ({ children }) => {
+	// const router = useRouter();
 	const isL2 = useRecoilValue(isL2State);
 	const isMainnet = useRecoilValue(isMainnetState);
 
@@ -26,11 +27,11 @@ const AppLayout: FC<AppLayoutProps> = ({ children }) => {
 	const depositsInactive = !(useIsBridgeActiveQuery().data ?? true); // Deposits are active by default to prevent redirects when status unknown
 	const delegateWallet = useRecoilValue(delegateWalletState);
 
-	useEffect(() => {
-		if (delegateWallet && router.pathname !== ROUTES.Home) {
-			router.push(ROUTES.Home);
-		}
-	}, [isL2, isMainnet, depositsInactive, delegateWallet]);
+	// useEffect(() => {
+	// 	if (delegateWallet && router.pathname !== ROUTES.Home) {
+	// 		router.push(ROUTES.Home);
+	// 	}
+	// }, [isL2, isMainnet, depositsInactive, delegateWallet, router]);
 
 	return (
 		<>
diff --git a/sections/shared/Layout/SideNav/Desktop/DesktopMenu.tsx b/sections/shared/Layout/SideNav/Desktop/DesktopMenu.tsx
@@ -1,5 +1,6 @@
 import { FC, useState, MouseEvent } from 'react';
 import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';
 import { useRecoilValue } from 'recoil';
@@ -36,10 +37,11 @@ const DesktopMenu: FC = () => {
 					if (!subMenu) return;
 					setOpenMenu(link);
 				};
+
 				return (
 					<div key={link}>
 						<MenuLinkItem
-							onClick={() => router.push(link)}
+							to={link}
 							onMouseEnter={() => onMouseEnter(link)}
 							data-testid={`sidenav-${link}`}
 							isActive={
@@ -55,21 +57,16 @@ const DesktopMenu: FC = () => {
 						</MenuLinkItem>
 						{subMenu && (
 							<DesktopSubMenu i={i} isActive={openMenu === link} key={link}>
-								{subMenu.map(({ i18nLabel, subLink }, j) => {
-									const onClick = () => {
-										router.push(subLink);
-									};
-									return (
-										<SubMenuLinkItem
-											key={`subMenuLinkItem-${j}`}
-											isActive={router.asPath === subLink}
-											data-testid={`sidenav-submenu-${subLink}`}
-											onClick={onClick}
-										>
-											{t(i18nLabel)}
-										</SubMenuLinkItem>
-									);
-								})}
+								{subMenu.map(({ i18nLabel, subLink }) => (
+									<SubMenuLinkItem
+										to={subLink}
+										key={subLink}
+										isActive={router.asPath === subLink}
+										data-testid={`sidenav-submenu-${subLink}`}
+									>
+										{t(i18nLabel)}
+									</SubMenuLinkItem>
+								))}
 							</DesktopSubMenu>
 						)}
 					</div>
@@ -88,7 +85,7 @@ const MenuLinks = styled.div`
 	position: relative;
 `;
 
-export const MenuLinkItem = styled.div<{ isActive?: boolean; isL2Switcher?: boolean }>`
+export const MenuLinkItem = styled(Link)<{ isCurrent?: boolean; isL2Switcher?: boolean }>`
 	line-height: 40px;
 	padding-bottom: 10px;
 	position: relative;
diff --git a/sections/shared/Layout/SideNav/Desktop/DesktopSubMenu.tsx b/sections/shared/Layout/SideNav/Desktop/DesktopSubMenu.tsx
@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 import { FlexDivColCentered } from 'styles/common';
 import media from 'styles/media';
+import { Link } from 'react-router-dom';
 
 type SubMenuProps = {
 	children: ReactNode;
@@ -28,9 +29,8 @@ const DesktopSubMenu: FC<SubMenuProps> = ({ children, i, isActive }) => {
 export const SubContainer = styled(FlexDivColCentered)<{ i: number; isActive: boolean }>`
 	padding-top: ${({ i }) => 111 + i * 50}px; // (Logo + container) + index offset * link height;
 	background: ${(props) => props.theme.colors.darkGradient1};
-	top: 0px;
-	bottom: 0px;
-	transform: translateX(0px);
+	top: 0;
+	bottom: 0;
 	border-right: 1px solid ${(props) => props.theme.colors.grayBlue};
 	height: 100%;
 	width: 128px;
@@ -47,8 +47,8 @@ export const SubContainer = styled(FlexDivColCentered)<{ i: number; isActive: bo
 		`}
 `;
 
-export const SubMenuLinkItem = styled.div<{ isActive: boolean }>`
-	zindex: ${zIndex.BASE};
+export const SubMenuLinkItem = styled(Link)<{ isCurrent: boolean }>`
+	z-index: ${zIndex.BASE};
 	padding-left: 26px;
 	line-height: 40px;
 	padding-bottom: 10px;
@@ -84,11 +84,10 @@ export const SubMenuLinkItem = styled.div<{ isActive: boolean }>`
 `;
 
 const Inner = styled.div`
-	position: relative;
 	height: 100%;
 	width: 100%;
 	position: fixed;
-	zindex: -100;
+	z-index: -100;
 `;
 
 export default DesktopSubMenu;
diff --git a/sections/staking/index.tsx b/sections/staking/index.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import styled from 'styled-components';
-import { useRouter } from 'next/router';
+import { useParams } from 'react-router-dom';
 
 import { StakingPanelType } from 'store/staking';
 import { FlexDivCol } from 'styles/common';
@@ -10,16 +10,20 @@ import InfoBox from './components/InfoBox';
 import ActionBox from './components/ActionBox';
 
 const Index: FC = () => {
-	const router = useRouter();
-	const defaultTab = (router.query.action && router.query.action[0]) || StakingPanelType.MINT;
+	const params = useParams();
+	const action = params.action || '';
+	// @ts-ignore
+	const currentTab = Object.values(StakingPanelType).includes(action)
+		? action
+		: StakingPanelType.MINT;
 
 	return (
 		<Container>
 			<Col>
-				<ActionBox currentTab={defaultTab} />
+				<ActionBox currentTab={currentTab} />
 			</Col>
 			<Col>
-				<InfoBox currentTab={defaultTab} />
+				<InfoBox currentTab={currentTab} />
 			</Col>
 		</Container>
 	);
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`		`-export default function Link({ ...props }) {`
`2`		`- // eslint-disable-next-line jsx-a11y/anchor-has-content`
`3`		`- return <a {...props} />;`
	`1`	`+import { Link } from 'react-router-dom';`
	`2`	`+`
	`3`	`+export default function NoNextLink({ href, ...props }) {`
	`4`	`+ return <Link to={href} {...props} />;`
`4`	`5`	`}`