From f8201da28390d1076cf85d1244b9be25e3f6e138 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Mon, 1 Oct 2018 00:32:24 +0100
Subject: [PATCH] Create component for section in building-view

---
 app/src/frontend/building-view.js | 97 +++++++++++++++----------------
 app/src/frontend/styles/forms.css |  3 +
 2 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/app/src/frontend/building-view.js b/app/src/frontend/building-view.js
index 8dbeebd1..e06c1d1b 100644
--- a/app/src/frontend/building-view.js
+++ b/app/src/frontend/building-view.js
@@ -1,10 +1,24 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Link, NavLink } from 'react-router-dom';
 
 import Sidebar from './sidebar';
 import Tooltip from './tooltip';
 import InfoBox from './info-box';
 
+
+const DataSection = function(props){
+    const match = props.hash && props.slug.match(props.hash);
+    return (
+        <section className="data-section">
+            <NavLink className="bullet-prefix" to={(match)? '#': `#${props.slug}`}
+                     isActive={() => match}>
+                <h3 className="h3">{props.title}</h3>
+            </NavLink>
+            { (match)? props.children : null }
+        </section>
+    );
+}
+
 const BuildingView = function(props){
     if (!props.building_id){
         return (
@@ -16,49 +30,36 @@ const BuildingView = function(props){
             </Sidebar>
         );
     }
-    const hash = (props.location && props.location.hash)? props.location.hash: undefined;
+    const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined;
     return (
         <Sidebar title={`View Building`}>
-            <section className="data-section">
-                <NavLink className="bullet-prefix" to="#location">
-                    <h3 className="h3 location">Location</h3>
-                </NavLink>
-                {
-                    ( hash.match('location') )
-                    ? (
-                        <Fragment>
-                        <p className="data-intro">
+            <DataSection title="Location" slug="location" hash={hash}>
+                <p className="data-intro">
 
-                            Section introduction of up to roughly 100 characters will take
-                            approx&shy;imately this much space.
+                    Section introduction of up to roughly 100 characters will take
+                    approx&shy;imately this much space.
 
-                            <a href="/">Read more</a>.
-                        </p>
-                        <dl id="data-list-location" className="data-list collapse show">
-                            <dt>
-                                Building Name
-                                <Tooltip text="Hint tooltip content should be ~40 chars." />
-                            </dt>
-                            <dd>{props.location_name ? props.location_name : '-'}</dd>
-                            <dt>Building Number</dt>
-                            <dd>{props.location_number ? props.location_number : '-'}</dd>
-                            <dt>Street</dt>
-                            <dd>{props.location_street ? props.location_street : '-'}</dd>
-                            <dt>Address line 2</dt>
-                            <dd>{props.location_line_two ? props.location_line_two : '-'}</dd>
-                            <dt>Town</dt>
-                            <dd>{props.location_town ? props.location_town : '-'}</dd>
-                            <dt>Postcode</dt>
-                            <dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
-                        </dl>
-                        </Fragment>
-                    ) : null
-                }
-            </section>
-            <section className="data-section">
-                <NavLink className="bullet-prefix" to="#age">
-                    <h3 className="h3 age">Age</h3>
-                </NavLink>
+                    <a href="/">Read more</a>.
+                </p>
+                <dl id="data-list-location" className="data-list collapse show">
+                    <dt>
+                        Building Name
+                        <Tooltip text="Hint tooltip content should be ~40 chars." />
+                    </dt>
+                    <dd>{props.location_name ? props.location_name : '-'}</dd>
+                    <dt>Building Number</dt>
+                    <dd>{props.location_number ? props.location_number : '-'}</dd>
+                    <dt>Street</dt>
+                    <dd>{props.location_street ? props.location_street : '-'}</dd>
+                    <dt>Address line 2</dt>
+                    <dd>{props.location_line_two ? props.location_line_two : '-'}</dd>
+                    <dt>Town</dt>
+                    <dd>{props.location_town ? props.location_town : '-'}</dd>
+                    <dt>Postcode</dt>
+                    <dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
+                </dl>
+            </DataSection>
+            <DataSection title="Age" slug="age" hash={hash}>
                 <dl className="data-list">
                     <dt>Year built (best estimate)</dt>
                     <dd>{props.date_year? props.date_year : '-'}</dd>
@@ -71,11 +72,8 @@ const BuildingView = function(props){
                     <dt>Facade date</dt>
                     <dd>{props.date_facade? props.date_facade : '-'}</dd>
                 </dl>
-            </section>
-            <section className="data-section">
-                <NavLink className="bullet-prefix" to="#size">
-                    <h3 className="h3 size">Size</h3>
-                </NavLink>
+            </DataSection>
+            <DataSection title="Size" slug="size" hash={hash}>
                 <dl className="data-list">
                     <dt>Attic storeys</dt>
                     <dd>{props.size_storeys_attic? props.size_storeys_attic : '-'}</dd>
@@ -84,16 +82,13 @@ const BuildingView = function(props){
                     <dt>Basement storeys</dt>
                     <dd>{props.size_storeys_basement? props.size_storeys_basement : '-'}</dd>
                 </dl>
-            </section>
-            <section className="data-section">
-                <NavLink className="bullet-prefix" to="#like">
-                    <h3 className="h3 like">Like Me!</h3>
-                </NavLink>
+            </DataSection>
+            <DataSection title="Like Me!" slug="like" hash={hash}>
                 <dl className="data-list">
                     <dt>Likes</dt>
                     <dd>{props.likes ? props.likes.length : 0}</dd>
                 </dl>
-            </section>
+            </DataSection>
             <div className="buttons-container">
                 <Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
                 <Link to={`/building/${props.building_id}/edit.html`} className="btn btn-primary">Edit data</Link>
diff --git a/app/src/frontend/styles/forms.css b/app/src/frontend/styles/forms.css
index 53e2d2c8..e010a481 100644
--- a/app/src/frontend/styles/forms.css
+++ b/app/src/frontend/styles/forms.css
@@ -21,6 +21,9 @@ label {
 .buttons-container {
     margin-bottom: 0.75rem;
 }
+.info-container .buttons-container {
+    padding: 0 0.75rem;
+}
 .buttons-container .btn {
     margin-bottom: 0.25rem;
     margin-right: 0.25rem;