Include if current user likes building in view

app/src/frontend/app.js

@@ -24,6 +24,7 @@ class App extends React.Component {
         this.state = {
             user: props.user,
             building: props.building,
+            building_like: props.building_like
         };
         this.login = this.login.bind(this);
         this.updateUser = this.updateUser.bind(this);
@@ -69,6 +70,26 @@ class App extends React.Component {
             console.error(err)
             this.setState({building: building});
         });
+
+        // get if liked and update
+        fetch(`/building/${building.building_id}/like.json`, {
+            method: 'GET',
+            headers:{
+              'Content-Type': 'application/json'
+            },
+            credentials: 'same-origin'
+        }).then(
+            res => res.json()
+        ).then((res) => {
+            if (res.error) {
+                console.error(res);
+            } else {
+                this.setState({building_like: res.like});
+            }
+        }).catch((err) => {
+            console.error(err)
+            this.setState({building_like: false});
+        });
     }
 
     render() {
@@ -99,6 +120,7 @@ class App extends React.Component {
                                         {...props}
                                         {...this.state.building}
                                         user={this.state.user}
+                                        building_like={this.state.building_like}
                                         />
                                 ) } />
                                 <Route exact path="/edit/:cat/building/:building.html" render={(props) => (
@@ -106,6 +128,7 @@ class App extends React.Component {
                                         {...props}
                                         {...this.state.building}
                                         user={this.state.user}
+                                        building_like={this.state.building_like}
                                         selectBuilding={this.selectBuilding}
                                         />
                                 ) } />

app/src/frontend/building-view.js

@@ -47,6 +47,13 @@ const BuildingView = (props) => {
                                             title={field_props.title}
                                             value={props[field_props.slug]}
                                             tooltip={field_props.tooltip} />
+                                    case "like":
+                                        return <LikeDataEntry
+                                            key={field_props.slug}
+                                            title={field_props.title}
+                                            value={props[field_props.slug]}
+                                            user_building_like={props.building_like}
+                                            tooltip={field_props.tooltip} />
                                     default:
                                         return <DataEntry
                                             key={field_props.slug}
@@ -110,6 +117,27 @@ const DataEntry = (props) => (
     </Fragment>
 );
 
+const LikeDataEntry = (props) => (
+    <Fragment>
+        <dt>
+            { props.title }
+            { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
+        </dt>
+        <dd>
+        {
+            (props.value != null)?
+                (props.value === 1)?
+                    `${props.value} person likes this building`
+                    : `${props.value} people like this building`
+                : '\u00A0'
+        }
+        </dd>
+        {
+            (props.user_building_like)? <dd>&hellip;including you!</dd> : null
+        }
+    </Fragment>
+);
+
 const MultiDataEntry = (props) => {
     let content;
 

app/src/server.js

@@ -74,6 +74,7 @@ function frontendRoute(req, res) {
     const data = {};
     context.status = 200;
 
+    const user_id = req.session.user_id;
     const building_id = parseBuildingURL(req.url);
     const is_building = (typeof(building_id) !== "undefined");
     if (is_building && isNaN(building_id)){
@@ -81,20 +82,23 @@ function frontendRoute(req, res) {
     }
 
     Promise.all([
-        req.session.user_id? getUserById(req.session.user_id) : undefined,
+        user_id? getUserById(user_id) : undefined,
         is_building? getBuildingById(building_id) : undefined,
-        is_building? getBuildingUPRNsById(building_id) : undefined
+        is_building? getBuildingUPRNsById(building_id) : undefined,
+        (is_building && user_id)? getBuildingLikeById(building_id, user_id) : false
     ]).then(function(values){
         const user = values[0];
         const building = values[1];
         const uprns = values[2];
+        const building_like = values[3];
         if (is_building && typeof(building) === "undefined"){
             context.status = 404
         }
         data.user = user;
         data.building = building;
         if (data.building != null) {
-            data.building.uprns = uprns
+            data.building.uprns = uprns;
+            data.building_like = building_like;
         }
         renderHTML(context, data, req, res)
     }).catch(error => {