Add a “version select” to the bridged app (#449)

Summary:
The bridge now lets you select any version of the app that you want, as
long as that’s V1, because that’s the only version that exists. We’ll
add a V3 version shortly.

This implements Step 2 of the plan described in #448.

Test Plan:
In `yarn start` and `node bin/sourcecred.js start`, note that navigating
to `/` redirects to `/v1`, and that the cred explorer works.

wchargin-branch: bridge-select
This commit is contained in:
William Chargin 2018-06-29 13:13:57 -07:00 committed by GitHub
parent ca5346b524
commit 1d49ec87dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 21 deletions

View File

@ -1,6 +1,12 @@
// @flow
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
NavLink,
Redirect,
Route,
} from "react-router-dom";
import "./index.css";
import V1App from "../../v1/app/App";
import registerServiceWorker from "./registerServiceWorker";
@ -9,5 +15,20 @@ const root = document.getElementById("root");
if (root == null) {
throw new Error("Unable to find root element!");
}
ReactDOM.render(<V1App />, root);
ReactDOM.render(
<Router>
<React.Fragment>
<strong>Select version:</strong>
<ul>
<li>
<NavLink to="/v1">V1</NavLink>
</li>
</ul>
<Route exact path="/" render={() => <Redirect to="/v1" />} />
<hr />
<Route path="/v1" component={V1App} />
</React.Fragment>
</Router>,
root
);
registerServiceWorker();

View File

@ -1,32 +1,31 @@
// @flow
import React from "react";
import {BrowserRouter as Router, Route, NavLink} from "react-router-dom";
import {Route, NavLink, type Match} from "react-router-dom";
import CredExplorer from "./credExplorer/App";
export default class App extends React.Component<{}> {
export default class App extends React.Component<{match: Match}> {
render() {
const CRED_EXPLORER_ROUTE = "/explorer";
const {match} = this.props;
const CRED_EXPLORER_ROUTE = match.url + "/explorer";
return (
<Router>
<div>
<nav>
<ul>
<li>
<NavLink to="/">Home</NavLink>
</li>
<li>
<NavLink to={CRED_EXPLORER_ROUTE}>Cred Explorer</NavLink>
</li>
</ul>
</nav>
<div>
<nav>
<ul>
<li>
<NavLink to={match.url}>Home</NavLink>
</li>
<li>
<NavLink to={CRED_EXPLORER_ROUTE}>Cred Explorer</NavLink>
</li>
</ul>
</nav>
<hr />
<Route exact path="/" component={Home} />
<Route path={CRED_EXPLORER_ROUTE} component={CredExplorer} />
</div>
</Router>
<hr />
<Route exact path={match.url} component={Home} />
<Route path={CRED_EXPLORER_ROUTE} component={CredExplorer} />
</div>
);
}
}