From 00687dbaed19f108aa68ac5b232eafe1922a7f15 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Thu, 1 Aug 2019 10:29:32 +0100
Subject: [PATCH] Switch to JSON in URL for copy

In preparation for multi-attribute copy.
---
 app/src/frontend/app.js           |  14 ++--
 app/src/frontend/building-edit.js |  35 +++++-----
 app/src/frontend/building-view.js | 106 ++++++++++++++++--------------
 app/src/frontend/multi-edit.js    |  11 +++-
 4 files changed, 96 insertions(+), 70 deletions(-)

diff --git a/app/src/frontend/app.js b/app/src/frontend/app.js
index 857ef73f..f23ffc3f 100644
--- a/app/src/frontend/app.js
+++ b/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)
         }
     }
diff --git a/app/src/frontend/building-edit.js b/app/src/frontend/building-edit.js
index a7925cba..37f7ce71 100644
--- a/app/src/frontend/building-edit.js
+++ b/app/src/frontend/building-edit.js
@@ -564,21 +564,26 @@ LikeButton.propTypes = {
     handleLike: PropTypes.func
 }
 
-const Label = (props) => (
-    <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}`}
-                    className="icon-button copy">
-                    Copy
-                </NavLink>
-            </div> : null
-        }
-    </label>
-);
+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?data=${data_string}`}
+                        className="icon-button copy">
+                        Copy
+                    </NavLink>
+                </div> : null
+            }
+        </label>
+    );
+}
 
 Label.propTypes = {
     slug: PropTypes.string,
diff --git a/app/src/frontend/building-view.js b/app/src/frontend/building-view.js
index bd770195..5d7dd97c 100644
--- a/app/src/frontend/building-view.js
+++ b/app/src/frontend/building-view.js
@@ -135,30 +135,35 @@ DataSection.propTypes = {
     children: PropTypes.node
 }
 
-const DataEntry = (props) => (
-    <Fragment>
-        <dt>
-            { 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}`}
-                        className="icon-button copy">
-                        Copy
-                    </NavLink>
-                </div>
-                : null
-            }
-        </dt>
-        <dd>{
-            (props.value != null && props.value !== '')?
-                (typeof(props.value) === 'boolean')?
-                    (props.value)? 'Yes' : 'No'
-                    : props.value
-                : '\u00A0'}</dd>
-    </Fragment>
-);
+const DataEntry = (props) => {
+    const data = {};
+    data[props.slug] = props.value;
+    const data_string = JSON.stringify(data);
+    return (
+        <Fragment>
+            <dt>
+                { 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?data=${data_string}`}
+                            className="icon-button copy">
+                            Copy
+                        </NavLink>
+                    </div>
+                    : null
+                }
+            </dt>
+            <dd>{
+                (props.value != null && props.value !== '')?
+                    (typeof(props.value) === 'boolean')?
+                        (props.value)? 'Yes' : 'No'
+                        : props.value
+                    : '\u00A0'}</dd>
+        </Fragment>
+    );
+}
 
 DataEntry.propTypes = {
     title: PropTypes.string,
@@ -169,33 +174,36 @@ DataEntry.propTypes = {
     value: PropTypes.any
 }
 
-const LikeDataEntry = (props) => (
-    <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}`}
-                    className="icon-button copy">
-                    Copy
-                </NavLink>
-            </div>
-        </dt>
-        <dd>
+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?data=${data_string}`}
+                        className="icon-button copy">
+                        Copy
+                    </NavLink>
+                </div>
+            </dt>
+            <dd>
+                {
+                    (props.value != null)?
+                        (props.value === 1)?
+                            `${props.value} person likes this building`
+                            : `${props.value} people like this building`
+                        : '\u00A0'
+                }
+            </dd>
             {
-                (props.value != null)?
-                    (props.value === 1)?
-                        `${props.value} person likes this building`
-                        : `${props.value} people like this building`
-                    : '\u00A0'
+                (props.user_building_like)? <dd>&hellip;including you!</dd> : null
             }
-        </dd>
-        {
-            (props.user_building_like)? <dd>&hellip;including you!</dd> : null
-        }
-    </Fragment>
-);
+        </Fragment>
+    );
+}
 
 LikeDataEntry.propTypes = {
     title: PropTypes.string,
diff --git a/app/src/frontend/multi-edit.js b/app/src/frontend/multi-edit.js
index ab592533..231dfa7a 100644
--- a/app/src/frontend/multi-edit.js
+++ b/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' />