From 3539e1126c0bc5a5812b33c333a3dcf78321fffc Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Wed, 3 Oct 2018 21:46:51 +0100
Subject: [PATCH] Refactor top-level routing

---
 app/src/frontend/app.js | 67 ++++++++++++++++++++---------------------
 app/src/frontend/map.js | 17 ++++-------
 2 files changed, 38 insertions(+), 46 deletions(-)

diff --git a/app/src/frontend/app.js b/app/src/frontend/app.js
index 8e0adadc..751a3d89 100644
--- a/app/src/frontend/app.js
+++ b/app/src/frontend/app.js
@@ -54,41 +54,38 @@ class App extends React.Component {
                 <BetaBanner />
                 <Header user={this.state.user} />
                 <main className="beta">
+                    <TransitionGroup>
+                        <CSSTransition timeout={3000} classNames='fade'>
+                            <Switch>
+                                <Route exact path="/">
+                                    <Welcome />
+                                </Route>
+                                <Route exact path="/map/:map.html" component={Legend} />
+                                <Route exact path="/building/:building.html" render={(props) => (
+                                    <BuildingView
+                                        {...props}
+                                        {...this.state.building}
+                                        user={this.state.user}
+                                        />
+                                ) } />
+                                <Route exact path="/building/:building/edit.html" render={(props) => (
+                                    <BuildingEdit
+                                        {...props}
+                                        {...this.state.building}
+                                        user={this.state.user}
+                                        selectBuilding={this.selectBuilding}
+                                        />
+                                ) } />
+                            </Switch>
+                        </CSSTransition>
+                    </TransitionGroup>
                     <Switch>
-                        <Route path="/(map|building)?(/\w+)?(.html)?" render={(props) => (
-                            <Fragment>
-                                <TransitionGroup>
-                                    <CSSTransition timeout={3000} classNames='fade' key={props.location.key}>
-                                        <Switch location={props.location}>
-                                            <Route exact path="/">
-                                                <Welcome />
-                                            </Route>
-                                            <Route exact path="/map/:map.html" component={Legend} />
-                                            <Route exact path="/building/:building.html">
-                                                <BuildingView
-                                                    {...this.state.building}
-                                                    {...props} // includes route history/match
-                                                    user={this.state.user}
-                                                    selectBuilding={this.selectBuilding}
-                                                    />
-                                            </Route>
-                                            <Route exact path="/building/:building/edit.html">
-                                                <BuildingEdit
-                                                    {...this.state.building}
-                                                    {...props} // includes route history/match
-                                                    user={this.state.user}
-                                                    selectBuilding={this.selectBuilding}
-                                                    />
-                                            </Route>
-                                        </Switch>
-                                    </CSSTransition>
-                                </TransitionGroup>
-                                <ColouringMap
-                                    {...props}
-                                    building={this.state.building}
-                                    selectBuilding={this.selectBuilding}
-                                    />
-                            </Fragment>
+                        <Route exact path="/(map.*|building.*)?" render={(props) => (
+                            <ColouringMap
+                                {...props}
+                                building={this.state.building}
+                                selectBuilding={this.selectBuilding}
+                                />
                         ) } />
                         <Route exact path="/about.html" component={AboutPage} />
                         <Route exact path="/login.html">
@@ -110,7 +107,7 @@ class App extends React.Component {
 const NotFound = () => (
     <article>
         <section className="main-col">
-            <h1 class="h1">Page not found</h1>
+            <h1 className="h1">Page not found</h1>
             <p className="lead">
 
             We can't find that one anywhere.
diff --git a/app/src/frontend/map.js b/app/src/frontend/map.js
index 8e3b6f7e..e00f7fbe 100644
--- a/app/src/frontend/map.js
+++ b/app/src/frontend/map.js
@@ -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.'
 
         // colour-data tiles
-        var data_tileset, is_building;
-        if (this.props.match && this.props.match.params && this.props.match.params[1]) {
-            data_tileset = this.props.match.params[1].replace("/", "")
-            is_building = this.props.match.params[0] === 'building'
-        } else {
-            is_building = false;
-            data_tileset = 'date_year';
-        }
-        const dataLayer = !is_building ? (
-            <TileLayer key={data_tileset} url={`/tiles/${data_tileset}/{z}/{x}/{y}.png`} />
-        ) : null;
+        const is_building = /building/.test(this.props.match.url)
+        const themer = /theme=([^&]*)/
+        const data_tileset = themer.test(this.props.match.url)? themer.exec(this.props.match.url)[1] : 'date_year';
+        console.log(is_building, data_tileset)
+
+        const dataLayer = <TileLayer key={data_tileset} url={`/tiles/${data_tileset}/{z}/{x}/{y}.png`} />;
 
         // highlight
         const geometry_id = (this.props.building) ? this.props.building.geometry_id : undefined;