Fetch data when opening building page without SSR

app/src/frontend/map-app.tsx

@@ -2,6 +2,8 @@ import { parse } from 'query-string';
 import React, { Fragment } from 'react';
 import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';
 
+import { strictParseInt } from '../parse';
+
 import BuildingView from './building/building-view';
 import Categories from './building/categories';
 import { EditHistory } from './building/edit-history/edit-history';
@@ -56,6 +58,7 @@ class MapApp extends React.Component<MapAppProps, MapAppState> {
 
     componentDidMount() {
         this.fetchLatestRevision();
+        this.fetchBuildingData();
     }
 
     async fetchLatestRevision() {
@@ -75,6 +78,52 @@ class MapApp extends React.Component<MapAppProps, MapAppState> {
         }
     }
 
+    /**
+     * Fetches building data if a building is selected but no data provided through 
+     * props (from server-side rendering)
+     */
+    async fetchBuildingData() {
+        if(this.props.match.params.building != undefined && this.props.building == undefined) {
+            try {
+                // TODO: simplify API calls, create helpers for fetching data
+                const buildingId = strictParseInt(this.props.match.params.building);
+                let [building, building_uprns, building_like] = await Promise.all([
+                    fetch(`/api/buildings/${buildingId}.json`, {
+                        method: 'GET',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        credentials: 'same-origin'
+                    }).then(res => res.json()),
+                    fetch(`/api/buildings/${buildingId}/uprns.json`, {
+                        method: 'GET',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        credentials: 'same-origin'
+                    }).then(res => res.json()),
+                    fetch(`/api/buildings/${buildingId}/like.json`, {
+                        method: 'GET',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }, 
+                        credentials: 'same-origin'
+                    }).then(res => res.json())
+                ]);
+
+                building.uprns = building_uprns.uprns;
+
+                this.setState({
+                    building: building,
+                    building_like: building_like.like
+                });
+            } catch(error) {
+                console.error(error);
+                // TODO: add UI for API errors
+            }
+        }
+    }
+
     getCategory(category: string) {
         if (category === 'categories') return undefined;