Pull BuildingNotFound out of view/edit

app/src/frontend/building/building-edit.tsx

@@ -2,9 +2,10 @@ import React, { Component, Fragment } from 'react';
 import { Link, NavLink, Redirect } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+import Sidebar from './sidebar';
+import BuildingNotFound from './building-not-found';
 import ErrorBox from '../components/error-box';
 import InfoBox from '../components/info-box';
-import Sidebar from './sidebar';
 import Tooltip from '../components/tooltip';
 import { BackIcon, SaveIcon } from '../components/icons';
 
@@ -18,14 +19,7 @@ const BuildingEdit = (props) => {
     const sections = CONFIG.filter((d) => d.slug === cat)
 
     if (!props.building_id || sections.length !== 1){
-        return (
+        return (<BuildingNotFound mode="edit" />);
-            <Sidebar>
-                <InfoBox msg="We can't find that one anywhere - try the map again?" />
-                <div className="buttons-container ml-3 mr-3">
-                    <Link to={`/edit/categories.html`} className="btn btn-secondary">Back to categories</Link>
-                </div>
-            </Sidebar>
-        );
     }
 
     const section = sections[0];

app/src/frontend/building/building-not-found.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import Sidebar from './sidebar';
+import InfoBox from '../components/info-box';
+
+
+interface BuildingNotFoundProps {
+  mode: string
+}
+
+const BuildingNotFound: React.FunctionComponent<BuildingNotFoundProps> = (props) => (
+  <Sidebar>
+    <InfoBox msg="We can't find that one anywhere - try the map again?" />
+    <div className="buttons-container ml-3 mr-3">
+        <Link to={`/${props.mode}/categories.html`} className="btn btn-secondary">Back to categories</Link>
+    </div>
+  </Sidebar>
+);
+
+BuildingNotFound.propTypes = {
+  mode: PropTypes.string
+}
+
+export default BuildingNotFound;

app/src/frontend/building/building-view.tsx

@@ -2,9 +2,9 @@ import React, { Fragment } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+import BuildingNotFound from './building-not-found';
 import Sidebar from './sidebar';
 import Tooltip from '../components/tooltip';
-import InfoBox from '../components/info-box';
 import { BackIcon, EditIcon } from '../components/icons';
 import { sanitiseURL } from '../helpers';
 
@@ -15,14 +15,7 @@ const BuildingView = (props) => {
     const sections = CONFIG.filter((d) => d.slug === cat)
 
     if (!props.building_id || sections.length !== 1){
-        return (
+        return (<BuildingNotFound mode="view" />);
-            <Sidebar>
-                <InfoBox msg="We can't find that one anywhere - try the map again?" />
-                <div className="buttons-container with-space">
-                    <Link to="/view/categories.html" className="btn btn-secondary">Back to categories</Link>
-                </div>
-            </Sidebar>
-        );
     }
 
     const section = sections[0];