a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor top-level routing

Browse Source
This commit is contained in:
Tom Russell 2018-10-03 21:46:51 +01:00
parent b180602a5b
commit 3539e1126c
2 changed files with 38 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/src/frontend/app.js
View File

@ -54,41 +54,38 @@ class App extends React.Component {
<BetaBanner /> <BetaBanner />
<Header user={this.state.user} /> <Header user={this.state.user} />
<main className="beta"> <main className="beta">
<Switch>
<Route path="/(map|building)?(/\w+)?(.html)?" render={(props) => (
<Fragment>
<TransitionGroup> <TransitionGroup>
<CSSTransition timeout={3000} classNames='fade' key={props.location.key}> <CSSTransition timeout={3000} classNames='fade'>
<Switch location={props.location}> <Switch>
<Route exact path="/"> <Route exact path="/">
<Welcome /> <Welcome />
</Route> </Route>
<Route exact path="/map/:map.html" component={Legend} /> <Route exact path="/map/:map.html" component={Legend} />
<Route exact path="/building/:building.html"> <Route exact path="/building/:building.html" render={(props) => (
<BuildingView <BuildingView
{...props}
{...this.state.building} {...this.state.building}
{...props} // includes route history/match
user={this.state.user} user={this.state.user}
selectBuilding={this.selectBuilding}
/> />
</Route> ) } />
<Route exact path="/building/:building/edit.html"> <Route exact path="/building/:building/edit.html" render={(props) => (
<BuildingEdit <BuildingEdit
{...props}
{...this.state.building} {...this.state.building}
{...props} // includes route history/match
user={this.state.user} user={this.state.user}
selectBuilding={this.selectBuilding} selectBuilding={this.selectBuilding}
/> />
</Route> ) } />
</Switch> </Switch>
</CSSTransition> </CSSTransition>
</TransitionGroup> </TransitionGroup>
<Switch>
<Route exact path="/(map.*|building.*)?" render={(props) => (
<ColouringMap <ColouringMap
{...props} {...props}
building={this.state.building} building={this.state.building}
selectBuilding={this.selectBuilding} selectBuilding={this.selectBuilding}
/> />
</Fragment>
) } /> ) } />
<Route exact path="/about.html" component={AboutPage} /> <Route exact path="/about.html" component={AboutPage} />
<Route exact path="/login.html"> <Route exact path="/login.html">
@ -110,7 +107,7 @@ class App extends React.Component {
const NotFound = () => ( const NotFound = () => (
<article> <article>
<section className="main-col"> <section className="main-col">
<h1 class="h1">Page not found</h1> <h1 className="h1">Page not found</h1>
<p className="lead"> <p className="lead">
We can't find that one anywhere. We can't find that one anywhere.

17
app/src/frontend/map.js
View File

@ -63,17 +63,12 @@ class ColouringMap extends Component {
const attribution = 'Building attribute data is © Colouring London contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines.' const attribution = 'Building attribute data is © Colouring London contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines.'
// colour-data tiles // colour-data tiles
var data_tileset, is_building; const is_building = /building/.test(this.props.match.url)
if (this.props.match && this.props.match.params && this.props.match.params[1]) { const themer = /theme=([^&]*)/
data_tileset = this.props.match.params[1].replace("/", "") const data_tileset = themer.test(this.props.match.url)? themer.exec(this.props.match.url)[1] : 'date_year';
is_building = this.props.match.params[0] === 'building' console.log(is_building, data_tileset)
} else {
is_building = false; const dataLayer = <TileLayer key={data_tileset} url={`/tiles/${data_tileset}/{z}/{x}/{y}.png`} />;
data_tileset = 'date_year';
}
const dataLayer = !is_building ? (
<TileLayer key={data_tileset} url={`/tiles/${data_tileset}/{z}/{x}/{y}.png`} />
) : null;
// highlight // highlight
const geometry_id = (this.props.building) ? this.props.building.geometry_id : undefined; const geometry_id = (this.props.building) ? this.props.building.geometry_id : undefined;