From 4bfee1050844bde4eeba1fc08444abe4154a0fa7 Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Mon, 9 Sep 2019 01:10:52 +0100
Subject: [PATCH] Allow no selection in categories/building-view

---
 app/src/frontend/building/building-view.tsx   | 28 +++---
 app/src/frontend/building/categories.tsx      | 13 ++-
 .../frontend/building/container-header.tsx    | 12 +--
 app/src/frontend/building/data-container.tsx  | 92 +++++++++----------
 4 files changed, 72 insertions(+), 73 deletions(-)

diff --git a/app/src/frontend/building/building-view.tsx b/app/src/frontend/building/building-view.tsx
index 480f5645..1aaab34a 100644
--- a/app/src/frontend/building/building-view.tsx
+++ b/app/src/frontend/building/building-view.tsx
@@ -21,15 +21,11 @@ import LikeContainer from './data-containers/like';
  * @param props
  */
 const BuildingView = (props) => {
-    if (typeof(props.building) === "undefined"){
-        return <BuildingNotFound mode="view" />
-    }
-
     switch (props.cat) {
         case 'location':
             return <LocationContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Location"
                 help="https://pages.colouring.london/location"
                 intro="Where are the buildings? Address, location and cross-references."
@@ -37,7 +33,7 @@ const BuildingView = (props) => {
         case 'use':
             return <UseContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 inactive={true}
                 title="Land Use"
                 intro="How are buildings used, and how does use change over time? Coming soon…"
@@ -46,7 +42,7 @@ const BuildingView = (props) => {
         case 'type':
             return <TypeContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 inactive={true}
                 title="Type"
                 intro="How were buildings previously used? Coming soon…"
@@ -55,7 +51,7 @@ const BuildingView = (props) => {
         case 'age':
             return <AgeContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Age"
                 help="https://pages.colouring.london/age"
                 intro="Building age data can support energy analysis and help predict long-term change."
@@ -63,7 +59,7 @@ const BuildingView = (props) => {
         case 'size':
             return <SizeContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Size &amp; Shape"
                 intro="How big are buildings?"
                 help="https://pages.colouring.london/shapeandsize"
@@ -71,7 +67,7 @@ const BuildingView = (props) => {
         case 'construction':
             return <ConstructionContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Construction"
                 intro="How are buildings built? Coming soon…"
                 help="https://pages.colouring.london/construction"
@@ -80,7 +76,7 @@ const BuildingView = (props) => {
         case 'team':
             return <TeamContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Team"
                 intro="Who built the buildings? Coming soon…"
                 help="https://pages.colouring.london/team"
@@ -89,7 +85,7 @@ const BuildingView = (props) => {
         case 'sustainability':
             return <SustainabilityContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Sustainability"
                 intro="Are buildings energy efficient? Coming soon…"
                 help="https://pages.colouring.london/sustainability"
@@ -98,7 +94,7 @@ const BuildingView = (props) => {
         case 'greenery':
             return <GreeneryContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Greenery"
                 intro="Is there greenery nearby? Coming soon…"
                 help="https://pages.colouring.london/greenery"
@@ -107,7 +103,7 @@ const BuildingView = (props) => {
         case 'community':
             return <CommunityContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Community"
                 intro="How does this building work for the local community?"
                 help="https://pages.colouring.london/community"
@@ -116,7 +112,7 @@ const BuildingView = (props) => {
         case 'planning':
             return <PlanningContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Planning"
                 intro="Planning controls relating to protection and reuse."
                 help="https://pages.colouring.london/planning"
@@ -124,7 +120,7 @@ const BuildingView = (props) => {
         case 'like':
             return <LikeContainer
                 {...props}
-                key={props.building.building_id}
+                key={props.building && props.building.building_id}
                 title="Like Me!"
                 intro="Do you like the building and think it contributes to the city?"
                 help="https://pages.colouring.london/likeme"
diff --git a/app/src/frontend/building/categories.tsx b/app/src/frontend/building/categories.tsx
index b1c779d7..5629278c 100644
--- a/app/src/frontend/building/categories.tsx
+++ b/app/src/frontend/building/categories.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import Sidebar from './sidebar';
-
 import './categories.css'
 
 const Categories = (props) => (
@@ -124,11 +122,15 @@ Categories.propTypes = {
     building_id: PropTypes.number
 }
 
-const Category = (props) => (
+const Category = (props) => {
+    let categoryLink = `/${props.mode}/${props.slug}`;
+    if (props.building_id != undefined) categoryLink += `/${props.building_id}`;
+    
+    return (
     <li className={`category-block ${props.slug} background-${props.slug}`}>
         <NavLink
             className="category-link"
-            to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`}
+            to={categoryLink}
             title={
                 (props.inactive)?
                     'Coming soon… Click more info for details.'
@@ -141,7 +143,8 @@ const Category = (props) => (
             More
         </a>
     </li>
-)
+    );
+}
 
 Category.propTypes = {
     title: PropTypes.string,
diff --git a/app/src/frontend/building/container-header.tsx b/app/src/frontend/building/container-header.tsx
index 184bc47e..2696ceea 100644
--- a/app/src/frontend/building/container-header.tsx
+++ b/app/src/frontend/building/container-header.tsx
@@ -6,17 +6,17 @@ import { BackIcon, EditIcon, ViewIcon }from '../components/icons';
 
 const ContainerHeader: React.FunctionComponent<any> = (props) => (
     <header className={`section-header view ${props.cat} background-${props.cat}`}>
-        <Link className="icon-button back" to="/view/categories.html">
+        <Link className="icon-button back" to={`/${props.mode}/categories${props.building != undefined ? `/${props.building.building_id}` : ''}`}>
             <BackIcon />
         </Link>
         <h2 className="h2">{props.title}</h2>
         <nav className="icon-buttons">
             {
-                (!props.inactive)?
+                props.building != undefined && !props.inactive ?
                     props.copy.copying?
                         <Fragment>
                             <NavLink
-                                to={`/multi-edit/${props.cat}.html?data=${props.data_string}`}
+                                to={`/multi-edit/${props.cat}?data=${props.data_string}`}
                                 className="icon-button copy">
                                 Copy selected
                             </NavLink>
@@ -45,19 +45,19 @@ const ContainerHeader: React.FunctionComponent<any> = (props) => (
                 : null
             }
             {
-                !props.inactive && !props.copy.copying?
+                props.building != undefined && !props.inactive && !props.copy.copying?
                     (props.mode === 'edit')?
                         <NavLink
                             className="icon-button view"
                             title="View data"
-                            to={`/view/${props.cat}/building/${props.building.building_id}.html`}>
+                            to={`/view/${props.cat}/${props.building.building_id}`}>
                             View
                             <ViewIcon />
                         </NavLink>
                         : <NavLink
                             className="icon-button edit"
                             title="Edit data"
-                            to={`/edit/${props.cat}/building/${props.building.building_id}.html`}>
+                            to={`/edit/${props.cat}/${props.building.building_id}`}>
                             Edit
                             <EditIcon />
                         </NavLink>
diff --git a/app/src/frontend/building/data-container.tsx b/app/src/frontend/building/data-container.tsx
index 02022cb6..192baad3 100644
--- a/app/src/frontend/building/data-container.tsx
+++ b/app/src/frontend/building/data-container.tsx
@@ -2,9 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
 
-import BuildingNotFound from './building-not-found';
 import ContainerHeader from './container-header';
-import Sidebar from './sidebar';
 import ErrorBox from '../components/error-box';
 import InfoBox from '../components/info-box';
 
@@ -198,8 +196,7 @@ const withCopyEdit = (WrappedComponent) => {
                 toggleCopyAttribute: this.toggleCopyAttribute,
                 copyingKey: (key) => this.state.keys_to_copy[key]
             }
-            return this.props.building?
-                <Sidebar>
+            return (
                 <section
                     id={this.props.slug}
                     className="data-section">
@@ -207,51 +204,54 @@ const withCopyEdit = (WrappedComponent) => {
                     {...this.props}
                     data_string={data_string}
                     copy={copy}
-                    />
-                <form
-                    action={`/edit/${this.props.slug}/building/${this.props.building.building_id}.html`}
-                    method="POST"
-                    onSubmit={this.handleSubmit}>
-                    <ErrorBox msg={this.state.error} />
-                    {
-                        (this.props.mode === 'edit' && this.props.inactive)?
-                            <InfoBox
-                                msg={`We're not collecting data on ${this.props.title.toLowerCase()} yet - check back soon.`}
+                />
+                {
+                    this.props.building != undefined ?
+                    <form
+                        action={`/edit/${this.props.slug}/${this.props.building.building_id}`}
+                        method="POST"
+                        onSubmit={this.handleSubmit}>
+                        <ErrorBox msg={this.state.error} />
+                        {
+                            (this.props.mode === 'edit' && this.props.inactive) ?
+                                <InfoBox
+                                    msg={`We're not collecting data on ${this.props.title.toLowerCase()} yet - check back soon.`}
                                 />
-                        : null
-                    }
-                    <WrappedComponent
-                        building={this.state.building}
-                        mode={this.props.mode}
-                        copy={copy}
-                        onChange={this.handleChange}
-                        onCheck={this.handleCheck}
-                        onLike={this.handleLike}
-                        onUpdate={this.handleUpdate}
+                                : null
+                        }
+                        <WrappedComponent
+                            building={this.state.building}
+                            mode={this.props.mode}
+                            copy={copy}
+                            onChange={this.handleChange}
+                            onCheck={this.handleCheck}
+                            onLike={this.handleLike}
+                            onUpdate={this.handleUpdate}
                         />
-                    {
-                        (this.props.mode === 'edit' && !this.props.inactive)?
-                            <Fragment>
-                            <InfoBox
-                                msg="Colouring may take a few seconds - try zooming the map or hitting refresh after saving (we're working on making this smoother)." />
-                                {
-                                    this.props.slug === 'like'? // special-case for likes
-                                        null :
-                                        <div className="buttons-container">
-                                            <button
-                                                type="submit"
-                                                className="btn btn-primary">
-                                                Save
-                                            </button>
-                                        </div>
-                                }
-                            </Fragment>
-                        : null
-                    }
-                </form>
+                        {
+                            (this.props.mode === 'edit' && !this.props.inactive) ?
+                                <Fragment>
+                                    <InfoBox
+                                        msg="Colouring may take a few seconds - try zooming the map or hitting refresh after saving (we're working on making this smoother)." />
+                                    {
+                                        this.props.slug === 'like' ? // special-case for likes
+                                            null :
+                                            <div className="buttons-container">
+                                                <button
+                                                    type="submit"
+                                                    className="btn btn-primary">
+                                                    Save
+                                        </button>
+                                            </div>
+                                    }
+                                </Fragment>
+                                : null
+                        }
+                    </form>
+                    : <InfoBox msg="Select a building to view data"></InfoBox>
+                }
                 </section>
-                </Sidebar>
-            : <BuildingNotFound mode="view" />
+            );
         }
     }
 }