Use react-router Switch to control visible content
This commit is contained in:
parent
d629e67b32
commit
04677cb831
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, Switch, Route, Redirect } from "react-router-dom";
|
||||
|
||||
import ClusterStatusButton from "./components/ClusterStatusButton";
|
||||
import AccountsCard from "./components/AccountsCard";
|
||||
|
@ -9,10 +9,11 @@ import TransactionModal from "./components/TransactionModal";
|
|||
import AccountModal from "./components/AccountModal";
|
||||
import Logo from "./img/logos-solana/light-explorer-logo.svg";
|
||||
import { useCurrentTab, Tab } from "./providers/tab";
|
||||
import { TX_PATHS } from "./providers/transactions";
|
||||
import { ACCOUNT_PATHS } from "./providers/accounts";
|
||||
|
||||
function App() {
|
||||
const [showClusterModal, setShowClusterModal] = React.useState(false);
|
||||
const currentTab = useCurrentTab();
|
||||
return (
|
||||
<>
|
||||
<ClusterModal
|
||||
|
@ -65,16 +66,17 @@ function App() {
|
|||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{currentTab === "Transactions" ? <TransactionsCard /> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{currentTab === "Accounts" ? <AccountsCard /> : null}
|
||||
</div>
|
||||
</div>
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/transactions" />
|
||||
</Route>
|
||||
<Route path={TX_PATHS}>
|
||||
<TransactionsCard />
|
||||
</Route>
|
||||
<Route path={ACCOUNT_PATHS}>
|
||||
<AccountsCard />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
@ -122,14 +122,20 @@ function reducer(state: State, action: Action): State {
|
|||
return state;
|
||||
}
|
||||
|
||||
export const ACCOUNT_PATHS = ["account", "accounts", "address", "addresses"];
|
||||
export const ACCOUNT_PATHS = [
|
||||
"/account",
|
||||
"/accounts",
|
||||
"/address",
|
||||
"/addresses"
|
||||
];
|
||||
|
||||
function urlAddresses(): Array<string> {
|
||||
const addresses: Array<string> = [];
|
||||
|
||||
ACCOUNT_PATHS.forEach(path => {
|
||||
const params = findGetParameter(path)?.split(",") || [];
|
||||
const segments = findPathSegment(path)?.split(",") || [];
|
||||
const name = path.slice(1);
|
||||
const params = findGetParameter(name)?.split(",") || [];
|
||||
const segments = findPathSegment(name)?.split(",") || [];
|
||||
addresses.push(...params);
|
||||
addresses.push(...segments);
|
||||
});
|
||||
|
|
|
@ -9,7 +9,10 @@ const StateContext = React.createContext<Tab | undefined>(undefined);
|
|||
type TabProviderProps = { children: React.ReactNode };
|
||||
export function TabProvider({ children }: TabProviderProps) {
|
||||
const location = useLocation();
|
||||
const paths = location.pathname.slice(1).split("/");
|
||||
const paths = location.pathname
|
||||
.slice(1)
|
||||
.split("/")
|
||||
.map(name => `/${name}`);
|
||||
let tab: Tab = "Transactions";
|
||||
if (ACCOUNT_PATHS.includes(paths[0].toLowerCase())) {
|
||||
tab = "Accounts";
|
||||
|
|
|
@ -138,20 +138,21 @@ function reducer(state: State, action: Action): State {
|
|||
}
|
||||
|
||||
export const TX_PATHS = [
|
||||
"tx",
|
||||
"txs",
|
||||
"txn",
|
||||
"txns",
|
||||
"transaction",
|
||||
"transactions"
|
||||
"/tx",
|
||||
"/txs",
|
||||
"/txn",
|
||||
"/txns",
|
||||
"/transaction",
|
||||
"/transactions"
|
||||
];
|
||||
|
||||
function urlSignatures(): Array<string> {
|
||||
const signatures: Array<string> = [];
|
||||
|
||||
TX_PATHS.forEach(path => {
|
||||
const params = findGetParameter(path)?.split(",") || [];
|
||||
const segments = findPathSegment(path)?.split(",") || [];
|
||||
const name = path.slice(1);
|
||||
const params = findGetParameter(name)?.split(",") || [];
|
||||
const segments = findPathSegment(name)?.split(",") || [];
|
||||
signatures.push(...params);
|
||||
signatures.push(...segments);
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue