Fix frontend building_id references

app/src/frontend/building-edit.js

@@ -11,7 +11,7 @@ class BuildingEdit extends Component {
         const user = props.user || {};
         this.state = {
             error: undefined,
-            id: props.id,
+            building_id: props.building_id,
             geometry_id: props.geometry_id,
             location_name: props.location_name,
             location_number: props.location_number,
@@ -22,12 +22,15 @@ class BuildingEdit extends Component {
             date_lower: props.date_lower,
             date_upper: props.date_upper,
             date_source: props.date_source,
-            date_facade: props.date_facade,
+            facade_year: props.facade_year,
+            facade_upper: props.facade_upper,
+            facade_lower: props.facade_lower,
+            facade_source: props.facade_source,
             size_attic: props.size_attic,
             size_core: props.size_core,
             size_basement: props.size_basement,
-            likes: props.likes || [],
+            likes_total: props.likes_total,
-            liked: this.user_likes(user.id, props.likes)
+            liked: props.liked
         };
 
         this.handleChange = this.handleChange.bind(this);
@@ -35,10 +38,6 @@ class BuildingEdit extends Component {
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
-    user_likes(user_id, likes) {
-        return likes && likes.indexOf(user_id) !== -1;
-    }
-
     handleChange(event) {
         const target = event.target;
         const value = target.value;
@@ -69,7 +68,7 @@ class BuildingEdit extends Component {
         event.preventDefault();
         this.setState({error: undefined})
 
-        fetch(`/building/${this.props.id}.json`, {
+        fetch(`/building/${this.props.building_id}.json`, {
             method: 'POST',
             body: JSON.stringify(this.state),
             headers:{
@@ -83,7 +82,7 @@ class BuildingEdit extends Component {
                 this.setState({error: res.error})
             } else {
                 this.props.selectBuilding(this.state);  // could use server response?
-                this.props.history.push(`/building/${this.state.id}.html`);
+                this.props.history.push(`/building/${this.props.building_id}.html`);
             }
         }.bind(this)).catch(
             (err) => this.setState({error: err})
@@ -94,7 +93,7 @@ class BuildingEdit extends Component {
         if (!this.props.user){
             return <Redirect to="/sign-up.html" />
         }
-        if (!this.props.id){
+        if (!this.props.building_id){
             return (
                 <Sidebar title="Building Not Found">
                     <InfoBox msg="We can't find that one anywhere - try the map again?" />
@@ -105,7 +104,7 @@ class BuildingEdit extends Component {
             );
         }
         return (
-            <Sidebar title={`Building ${this.props.id}`}>
+            <Sidebar title={`Edit Building`}>
                 <form action="building-view.html" method="GET" onSubmit={this.handleSubmit}>
 
                     <ErrorBox msg={this.state.error} />
@@ -238,7 +237,7 @@ class BuildingEdit extends Component {
                         </div>
                     </fieldset>
                     <div className="buttons-container">
-                        <Link to={`/building/${this.props.id}.html`} className="btn btn-secondary">Cancel</Link>
+                        <Link to={`/building/${this.props.building_id}.html`} className="btn btn-secondary">Cancel</Link>
                         <button type="submit" className="btn btn-primary">Save</button>
                     </div>
                 </form>

app/src/frontend/building-view.js

@@ -6,7 +6,7 @@ import Tooltip from './tooltip';
 import InfoBox from './info-box';
 
 const BuildingView = function(props){
-    if (!props.id){
+    if (!props.building_id){
         return (
             <Sidebar title="Building Not Found">
                 <InfoBox msg="We can't find that one anywhere - try the map again?" />
@@ -17,7 +17,7 @@ const BuildingView = function(props){
         );
     }
     return (
-        <Sidebar title={`Building ${props.id}`}>
+        <Sidebar title={`View Building`}>
             <section className="data-section">
                 <h3 className="h3 bullet-prefix location">Location</h3>
                 <p className="data-intro">
@@ -80,7 +80,7 @@ const BuildingView = function(props){
             </section>
             <div className="buttons-container">
                 <Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
-                <Link to={`/building/${props.id}/edit.html`} className="btn btn-primary">Edit data</Link>
+                <Link to={`/building/${props.building_id}/edit.html`} className="btn btn-primary">Edit data</Link>
             </div>
         </Sidebar>
     );

app/src/frontend/map.js

@@ -32,9 +32,10 @@ class ColouringMap extends Component {
         ).then(
             (res) => res.json()
         ).then(function(data){
-            if (data.geometry_id && data.id){
+            if (data && data.length){
-                this.props.selectBuilding(data);
+                const building = data[0];
-                this.props.history.push(`/building/${data.id}.html`);
+                this.props.selectBuilding(building);
+                this.props.history.push(`/building/${building.building_id}.html`);
             } else {
                 // should deselect but keep/return to expected colour theme
                 // this.props.selectBuilding(undefined);
@@ -77,8 +78,8 @@ class ColouringMap extends Component {
         // highlight
         const geometry_id = (this.props.building) ? this.props.building.geometry_id : undefined;
         const highlight = `/tiles/highlight/{z}/{x}/{y}.png?highlight=${geometry_id}`
-        const highlightLayer = is_building ? (
+        const highlightLayer = (is_building && this.props.building) ? (
-            <TileLayer key={this.props.building.id} url={highlight} />
+            <TileLayer key={this.props.building.building_id} url={highlight} />
         ) : null;
 
         return (