From 43f239c8530a787835334de70958dfa54098f806 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Wed, 14 Aug 2019 11:36:38 +0100
Subject: [PATCH] Render single section in view/edit

---
 app/src/frontend/building/building-edit.tsx | 32 ++++++++++---------
 app/src/frontend/building/building-view.tsx | 34 ++++++++++++---------
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/app/src/frontend/building/building-edit.tsx b/app/src/frontend/building/building-edit.tsx
index f3a0e65f..7743a16a 100644
--- a/app/src/frontend/building/building-edit.tsx
+++ b/app/src/frontend/building/building-edit.tsx
@@ -6,7 +6,7 @@ import ErrorBox from '../components/error-box';
 import InfoBox from '../components/info-box';
 import Sidebar from './sidebar';
 import Tooltip from '../components/tooltip';
-import { SaveIcon } from '../components/icons';
+import { BackIcon, SaveIcon } from '../components/icons';
 
 import CONFIG from './fields-config.json';
 
@@ -15,28 +15,27 @@ const BuildingEdit = (props) => {
         return <Redirect to="/sign-up.html" />
     }
     const cat = props.match.params.cat;
-    if (!props.building_id){
+    const sections = CONFIG.filter((d) => d.slug === cat)
+
+    if (!props.building_id || sections.length !== 1){
         return (
-            <Sidebar title="Building Not Found" back={`/edit/${cat}.html`}>
+            <Sidebar title="Building Not Found" back={`/edit/categories.html`}>
                 <InfoBox msg="We can't find that one anywhere - try the map again?" />
                 <div className="buttons-container ml-3 mr-3">
-                    <Link to={`/edit/${cat}.html`} className="btn btn-secondary">Back to maps</Link>
+                    <Link to={`/edit/categories.html`} className="btn btn-secondary">Back to maps</Link>
                 </div>
             </Sidebar>
         );
     }
+
+    const section = sections[0];
     return (
-        <Sidebar
-            key={props.building_id}
-            title={'You are editing'}
-            back={`/edit/${cat}.html`}>
-            {
-                CONFIG.map((section) => {
-                    return <EditForm
-                        {...section} {...props}
-                        cat={cat} key={section.slug} />
-                })
-            }
+        <Sidebar>
+            <EditForm
+                {...section}
+                {...props}
+                cat={cat}
+            />
         </Sidebar>
     );
 }
@@ -237,6 +236,9 @@ class EditForm extends Component<any, any> { // TODO: add proper types
         return (
             <section className={(this.props.inactive)? 'data-section inactive': 'data-section'}>
                 <header className={`section-header edit ${this.props.slug} ${(match? 'active' : '')}`}>
+                    <Link className="icon-button back" to="/edit/categories.html">
+                        <BackIcon />
+                    </Link>
                     <NavLink
                         to={`/edit/${this.props.slug}/building/${this.props.building_id}.html`}
                         title={(this.props.inactive)? 'Coming soon… Click the ? for more info.' :
diff --git a/app/src/frontend/building/building-view.tsx b/app/src/frontend/building/building-view.tsx
index 98eb3c3e..23df9169 100644
--- a/app/src/frontend/building/building-view.tsx
+++ b/app/src/frontend/building/building-view.tsx
@@ -5,33 +5,36 @@ import PropTypes from 'prop-types';
 import Sidebar from './sidebar';
 import Tooltip from '../components/tooltip';
 import InfoBox from '../components/info-box';
-import { EditIcon } from '../components/icons';
+import { BackIcon, EditIcon } from '../components/icons';
 import { sanitiseURL } from '../helpers';
 
 import CONFIG from './fields-config.json';
 
 const BuildingView = (props) => {
-    if (!props.building_id){
+    const cat = props.match.params.cat;
+    const sections = CONFIG.filter((d) => d.slug === cat)
+
+    if (!props.building_id || sections.length !== 1){
         return (
-            <Sidebar title="Building Not Found">
+            <Sidebar title="Building Not Found" back={`/view/categories.html`}>
                 <InfoBox msg="We can't find that one anywhere - try the map again?" />
                 <div className="buttons-container with-space">
-                    <Link to="/view/age.html" className="btn btn-secondary">Back to maps</Link>
+                    <Link to="/view/categories.html" className="btn btn-secondary">Back to categories</Link>
                 </div>
             </Sidebar>
         );
     }
-    const cat = props.match.params.cat;
+
+    const section = sections[0];
     return (
-        <Sidebar title={'Data available for this building'} back={`/view/${cat}.html`}>
-            {
-                CONFIG.map(section => (
-                    <DataSection
-                        key={section.slug} cat={cat}
-                        building_id={props.building_id}
-                        {...section} {...props} />
-                ))
-            }
+        <Sidebar>
+            <DataSection
+                key={section.slug}
+                cat={cat}
+                building_id={props.building_id}
+                {...section}
+                {...props}
+            />
         </Sidebar>
     );
 }
@@ -102,6 +105,9 @@ class DataSection extends React.Component<any, any> { // TODO: add proper types
         return (
             <section id={props.slug} className={(props.inactive)? 'data-section inactive': 'data-section'}>
                 <header className={`section-header view ${props.slug} ${(match? 'active' : '')}`}>
+                    <Link className="icon-button back" to="/view/categories.html">
+                        <BackIcon />
+                    </Link>
                     <NavLink
                         to={`/view/${props.slug}/building/${props.building_id}.html`}
                         title={(props.inactive)? 'Coming soon… Click the ? for more info.' :