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