Switch to JSON in URL for copy

In preparation for multi-attribute copy.

app/src/frontend/app.js

@@ -118,16 +118,22 @@ class App extends React.Component {
         });
     }
 
+    /**
+     * Colour building
+     *
+     * Used in multi-edit mode to colour buildings on map click
+     *
+     * Pulls data from URL to form update
+     *
+     * @param {object} building
+     */
     colourBuilding(building) {
         const cat = parseCategoryURL(window.location.pathname);
         const q = parse(window.location.search);
-        let data;
+        const data = (cat === 'like')? {like: true}: JSON.parse(q.data);
         if (cat === 'like'){
-            data = {like: true}
             this.likeBuilding(building.building_id)
         } else {
-            data = {}
-            data[q.k] = q.v;
             this.updateBuilding(building.building_id, data)
         }
     }

app/src/frontend/building-edit.js

@@ -564,14 +564,18 @@ LikeButton.propTypes = {
     handleLike: PropTypes.func
 }
 
-const Label = (props) => (
+const Label = (props) => {
+    const data = {};
+    data[props.slug] = props.value;
+    const data_string = JSON.stringify(data);
+    return (
         <label htmlFor={props.slug}>
             {props.title}
             { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
             { (props.cat && props.slug && !props.disabled)?
                 <div className="icon-buttons">
                     <NavLink
-                    to={`/multi-edit/${props.cat}.html?k=${props.slug}&v=${props.value}`}
+                        to={`/multi-edit/${props.cat}.html?data=${data_string}`}
                         className="icon-button copy">
                         Copy
                     </NavLink>
@@ -579,6 +583,7 @@ const Label = (props) => (
             }
         </label>
     );
+}
 
 Label.propTypes = {
     slug: PropTypes.string,

app/src/frontend/building-view.js

@@ -135,7 +135,11 @@ DataSection.propTypes = {
     children: PropTypes.node
 }
 
-const DataEntry = (props) => (
+const DataEntry = (props) => {
+    const data = {};
+    data[props.slug] = props.value;
+    const data_string = JSON.stringify(data);
+    return (
         <Fragment>
             <dt>
                 { props.title }
@@ -143,7 +147,7 @@ const DataEntry = (props) => (
                 { (props.cat && props.slug && !props.disabled)?
                     <div className="icon-buttons">
                         <NavLink
-                        to={`/multi-edit/${props.cat}.html?k=${props.slug}&v=${props.value}`}
+                            to={`/multi-edit/${props.cat}.html?data=${data_string}`}
                             className="icon-button copy">
                             Copy
                         </NavLink>
@@ -159,6 +163,7 @@ const DataEntry = (props) => (
                     : '\u00A0'}</dd>
         </Fragment>
     );
+}
 
 DataEntry.propTypes = {
     title: PropTypes.string,
@@ -169,14 +174,16 @@ DataEntry.propTypes = {
     value: PropTypes.any
 }
 
-const LikeDataEntry = (props) => (
+const LikeDataEntry = (props) => {
+    const data_string = JSON.stringify({like: true});
+    (
         <Fragment>
             <dt>
                 { props.title }
                 { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
                 <div className="icon-buttons">
                     <NavLink
-                    to={`/multi-edit/${props.cat}.html?k=like&v=${true}`}
+                        to={`/multi-edit/${props.cat}.html?data=${data_string}`}
                         className="icon-button copy">
                         Copy
                     </NavLink>
@@ -196,6 +203,7 @@ const LikeDataEntry = (props) => (
             }
         </Fragment>
     );
+}
 
 LikeDataEntry.propTypes = {
     title: PropTypes.string,

app/src/frontend/multi-edit.js

@@ -34,7 +34,7 @@ const MultiEdit = (props) => {
     }
 
     const q = parse(props.location.search);
-    const label = fieldTitleFromSlug(q.k);
+    const data = JSON.parse(q.data)
     const title = sectionTitleFromCat(cat);
     return (
         <Sidebar
@@ -44,7 +44,14 @@ const MultiEdit = (props) => {
                 <header className={`section-header view ${cat} active`}>
                     <a><h3 className="h3">{title}</h3></a>
                 </header>
-                <p class='data-intro'>Set <strong>{label}</strong> to <strong>{q.v}</strong></p>
+                {
+                    Object.keys(data).map((key => {
+                        const label = fieldTitleFromSlug(key);
+                        return (<p className='data-intro' key={key}>
+                            Set <strong>{label}</strong> to <strong>{data[key]}</strong>
+                            </p>)
+                    }))
+                }
                 <form className='buttons-container'>
                     <InfoBox msg='Click buildings to colour' />