From 0008bbb8604eda17fc5777edb91dc3eca50e3676 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Mon, 27 May 2019 20:13:43 +0100
Subject: [PATCH] Lint whitespace, case, prop-types

---
 app/src/frontend/app.js           |  20 +++---
 app/src/frontend/building-edit.js | 110 ++++++++++++++++--------------
 app/src/frontend/building-view.js |   5 +-
 app/src/frontend/map.js           |   6 +-
 app/src/frontend/multi-edit.js    |  39 ++++++-----
 5 files changed, 99 insertions(+), 81 deletions(-)

diff --git a/app/src/frontend/app.js b/app/src/frontend/app.js
index 32949f09..68f97d50 100644
--- a/app/src/frontend/app.js
+++ b/app/src/frontend/app.js
@@ -66,10 +66,10 @@ class App extends React.Component {
         this.setState({user: undefined});
     }
 
-    increaseRevision(revision_id) {
+    increaseRevision(revisionId) {
         // bump revision id, only ever increasing
-        if (revision_id > this.state.revision_id){
-            this.setState({revision_id: revision_id})
+        if (revisionId > this.state.revision_id){
+            this.setState({revision_id: revisionId})
         }
     }
 
@@ -131,11 +131,11 @@ class App extends React.Component {
         }
     }
 
-    likeBuilding(building_id) {
-        fetch(`/building/${building_id}/like.json`, {
+    likeBuilding(buildingId) {
+        fetch(`/building/${buildingId}/like.json`, {
             method: 'POST',
             headers:{
-              'Content-Type': 'application/json'
+                'Content-Type': 'application/json'
             },
             credentials: 'same-origin',
             body: JSON.stringify({like: true})
@@ -152,12 +152,12 @@ class App extends React.Component {
         );
     }
 
-    updateBuilding(building_id, data){
-        fetch(`/building/${building_id}.json`, {
+    updateBuilding(buildingId, data){
+        fetch(`/building/${buildingId}.json`, {
             method: 'POST',
             body: JSON.stringify(data),
             headers:{
-              'Content-Type': 'application/json'
+                'Content-Type': 'application/json'
             },
             credentials: 'same-origin'
         }).then(
@@ -198,7 +198,7 @@ class App extends React.Component {
                             <MultiEdit
                                 {...props}
                                 user={this.state.user}
-                                />
+                            />
                         ) } />
                         <Route exact path="/view/:cat/building/:building.html" render={(props) => (
                             <BuildingView
diff --git a/app/src/frontend/building-edit.js b/app/src/frontend/building-edit.js
index b8f06321..dcadf33c 100644
--- a/app/src/frontend/building-edit.js
+++ b/app/src/frontend/building-edit.js
@@ -206,62 +206,62 @@ class EditForm extends Component {
                     </nav>
                 </header>
                 {
-                match? (
-                    !this.props.inactive?
-                    <form action={`/edit/${this.props.slug}/building/${this.props.building_id}.html`}
-                        method="GET" onSubmit={this.handleSubmit}>
-                        {
-                            this.props.slug === 'location'?
-                            <InfoBox msg="Text-based address fields are disabled at the moment. We're looking into how best to collect this data." />
-                            : null
-                        }
-                        <ErrorBox msg={this.state.error} />
-                        {
-                            this.props.fields.map((props) => {
-                                switch (props.type) {
-                                    case "text":
-                                        return <TextInput {...props} handleChange={this.handleChange}
+                    match? (
+                        !this.props.inactive?
+                            <form action={`/edit/${this.props.slug}/building/${this.props.building_id}.html`}
+                                method="GET" onSubmit={this.handleSubmit}>
+                                {
+                                    this.props.slug === 'location'?
+                                        <InfoBox msg="Text-based address fields are disabled at the moment. We're looking into how best to collect this data." />
+                                        : null
+                                }
+                                <ErrorBox msg={this.state.error} />
+                                {
+                                    this.props.fields.map((props) => {
+                                        switch (props.type) {
+                                        case 'text':
+                                            return <TextInput {...props} handleChange={this.handleChange}
                                                 value={this.state[props.slug]} key={props.slug} cat={cat} />
-                                    case "text_list":
-                                        return <TextListInput {...props} handleChange={this.handleChange}
+                                        case 'text_list':
+                                            return <TextListInput {...props} handleChange={this.handleChange}
                                                 value={this.state[props.slug]} key={props.slug} cat={cat} />
-                                    case "text_long":
-                                        return <LongTextInput {...props} handleChange={this.handleChange}
+                                        case 'text_long':
+                                            return <LongTextInput {...props} handleChange={this.handleChange}
                                                 value={this.state[props.slug]} key={props.slug} cat={cat} />
-                                    case "number":
-                                        return <NumberInput {...props} handleChange={this.handleChange}
+                                        case 'number':
+                                            return <NumberInput {...props} handleChange={this.handleChange}
                                                 value={this.state[props.slug]} key={props.slug} cat={cat} />
-                                    case "year_estimator":
-                                        return <YearEstimator {...props} handleChange={this.handleChange}
+                                        case 'year_estimator':
+                                            return <YearEstimator {...props} handleChange={this.handleChange}
                                                 value={this.state[props.slug]} key={props.slug} cat={cat} />
-                                    case "text_multi":
-                                        return <MultiTextInput {...props} handleChange={this.handleUpdate}
+                                        case 'text_multi':
+                                            return <MultiTextInput {...props} handleChange={this.handleUpdate}
                                                 value={this.state[props.slug]} key={props.slug} cat={cat} />
-                                    case "checkbox":
-                                        return <CheckboxInput {...props} handleChange={this.handleCheck}
+                                        case 'checkbox':
+                                            return <CheckboxInput {...props} handleChange={this.handleCheck}
                                                 value={this.state[props.slug]} key={props.slug} cat={cat} />
-                                    case "like":
-                                        return <LikeButton {...props} handleLike={this.handleLike}
+                                        case 'like':
+                                            return <LikeButton {...props} handleLike={this.handleLike}
                                                 building_like={buildingLike}
                                                 value={this.state[props.slug]} key={props.slug} cat={cat} />
-                                    default:
-                                        return null
+                                        default:
+                                            return null
+                                        }
+                                    })
                                 }
-                            })
-                        }
-                        <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>
-                        }
-                    </form>
-                    : <form>
-                        <InfoBox msg={`We're not collection data on ${this.props.title.toLowerCase()} yet - check back soon.`} />
-                    </form>
-                ) : null
+                                <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>
+                                }
+                            </form>
+                            : <form>
+                                <InfoBox msg={`We're not collection data on ${this.props.title.toLowerCase()} yet - check back soon.`} />
+                            </form>
+                    ) : null
                 }
             </section>
         )
@@ -286,8 +286,8 @@ const TextInput = (props) => (
     <Fragment>
         <Label slug={props.slug} title={props.title} tooltip={props.tooltip}
             cat={props.cat}
-            value={props.value || ""}
-            />
+            value={props.value || ''}
+        />
         <input className="form-control" type="text"
             id={props.slug} name={props.slug}
             value={props.value || ''}
@@ -301,6 +301,7 @@ const TextInput = (props) => (
 
 TextInput.propTypes = {
     slug: PropTypes.string,
+    cat: PropTypes.string,
     title: PropTypes.string,
     tooltip: PropTypes.string,
     value: PropTypes.string,
@@ -414,8 +415,8 @@ const TextListInput = (props) => (
     <Fragment>
         <Label slug={props.slug} title={props.title} tooltip={props.tooltip}
             cat={props.cat}
-            value={props.value || ""}
-            />
+            value={props.value || ''}
+        />
         <select className="form-control"
             id={props.slug} name={props.slug}
             value={props.value || ''}
@@ -434,6 +435,7 @@ const TextListInput = (props) => (
 
 TextListInput.propTypes = {
     slug: PropTypes.string,
+    cat: PropTypes.string,
     title: PropTypes.string,
     tooltip: PropTypes.string,
     options: PropTypes.arrayOf(PropTypes.string),
@@ -446,8 +448,8 @@ const NumberInput = (props) => (
     <Fragment>
         <Label slug={props.slug} title={props.title} tooltip={props.tooltip}
             cat={props.cat}
-            value={props.value || ""}
-            />
+            value={props.value || ''}
+        />
         <input className="form-control" type="number" step={props.step}
             id={props.slug} name={props.slug}
             value={props.value || ''}
@@ -459,6 +461,7 @@ const NumberInput = (props) => (
 
 NumberInput.propTypes = {
     slug: PropTypes.string,
+    cat: PropTypes.string,
     title: PropTypes.string,
     tooltip: PropTypes.string,
     step: PropTypes.number,
@@ -549,6 +552,7 @@ const LikeButton = (props) => (
 
 LikeButton.propTypes = {
     slug: PropTypes.string,
+    cat: PropTypes.string,
     title: PropTypes.string,
     tooltip: PropTypes.string,
     value: PropTypes.number,
@@ -575,6 +579,8 @@ const Label = (props) => (
 
 Label.propTypes = {
     slug: PropTypes.string,
+    cat: PropTypes.string,
+    value: PropTypes.any,
     title: PropTypes.string,
     tooltip: PropTypes.string
 }
diff --git a/app/src/frontend/building-view.js b/app/src/frontend/building-view.js
index 66b4c2d1..c8b1b92a 100644
--- a/app/src/frontend/building-view.js
+++ b/app/src/frontend/building-view.js
@@ -56,7 +56,7 @@ const BuildingView = (props) => {
                                 default:
                                     return <DataEntry
                                         key={field.slug}
-                                        slug={field_props.slug}
+                                        slug={field.slug}
                                         cat={cat}
                                         title={field.title}
                                         value={props[field.slug]}
@@ -160,6 +160,8 @@ const DataEntry = (props) => (
 
 DataEntry.propTypes = {
     title: PropTypes.string,
+    cat: PropTypes.string,
+    slug: PropTypes.string,
     tooltip: PropTypes.string,
     value: PropTypes.any
 }
@@ -194,6 +196,7 @@ const LikeDataEntry = (props) => (
 
 LikeDataEntry.propTypes = {
     title: PropTypes.string,
+    cat: PropTypes.string,
     tooltip: PropTypes.string,
     value: PropTypes.any,
     user_building_like: PropTypes.bool
diff --git a/app/src/frontend/map.js b/app/src/frontend/map.js
index 86314a32..f41b5aef 100644
--- a/app/src/frontend/map.js
+++ b/app/src/frontend/map.js
@@ -64,7 +64,7 @@ class ColouringMap extends Component {
                     this.props.colourBuilding(building);
                 } else {
                     this.props.selectBuilding(building);
-                    this.props.history.push(`/${mode}/${map_cat}/building/${building.building_id}.html`);
+                    this.props.history.push(`/${mode}/${mapCat}/building/${building.building_id}.html`);
                 }
             } else {
                 // deselect but keep/return to expected colour theme
@@ -106,7 +106,7 @@ class ColouringMap extends Component {
         const tileset = tilesetByCat[cat];
         // pick revision id to bust browser cache
         const rev = this.props.revision_id;
-        const dataLayer = data_tileset?
+        const dataLayer = tileset?
             <TileLayer
                 key={tileset}
                 url={`/tiles/${tileset}/{z}/{x}/{y}.png?rev=${rev}`}
@@ -169,7 +169,9 @@ class ColouringMap extends Component {
 
 ColouringMap.propTypes = {
     building: PropTypes.object,
+    revision_id: PropTypes.number,
     selectBuilding: PropTypes.func,
+    colourBuilding: PropTypes.func,
     match: PropTypes.object,
     history: PropTypes.object
 }
diff --git a/app/src/frontend/multi-edit.js b/app/src/frontend/multi-edit.js
index bdc612b9..79845ad1 100644
--- a/app/src/frontend/multi-edit.js
+++ b/app/src/frontend/multi-edit.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import { parse } from 'query-string';
+import PropTypes from 'prop-types';
 
 import Sidebar from './sidebar';
 import CONFIG from './fields-config.json';
@@ -14,14 +15,14 @@ const MultiEdit = (props) => {
         // special case for likes
         return (
             <Sidebar
-            title={`Quick like`}
-            back={`/edit/${cat}.html`}>
-                <section className="data-section">
-                    <p className="data-intro">Click all the buildings that you like and think contribute to the city!</p>
+                title='Quick like'
+                back={`/edit/${cat}.html`}>
+                <section className='data-section'>
+                    <p className='data-intro'>Click all the buildings that you like and think contribute to the city!</p>
 
-                    <div className="buttons-container ml-3 mr-3">
-                        <Link to={`/view/like.html`} className="btn btn-secondary">Back to view</Link>
-                        <Link to={`/edit/like.html`} className="btn btn-secondary">Back to edit</Link>
+                    <div className='buttons-container ml-3 mr-3'>
+                        <Link to='/view/like.html' className='btn btn-secondary'>Back to view</Link>
+                        <Link to='/edit/like.html' className='btn btn-secondary'>Back to edit</Link>
                     </div>
                 </section>
             </Sidebar>
@@ -29,25 +30,31 @@ const MultiEdit = (props) => {
     }
 
     const q = parse(props.location.search);
-    const label = field_title_from_slug(q.k);
+    const label = fieldTitleFromSlug(q.k);
     return (
         <Sidebar
-            title={`Quick edit`}
+            title='Quick edit'
             back={`/edit/${cat}.html`}>
-            <section className="data-section">
-                <p className="data-intro">Click a building to colour</p>
-                <p className="data-intro">Set <strong>{label}</strong> to <strong>{q.v}</strong></p>
+            <section className='data-section'>
+                <p className='data-intro'>Click a building to colour</p>
+                <p className='data-intro'>Set <strong>{label}</strong> to <strong>{q.v}</strong></p>
 
-                <div className="buttons-container ml-3">
-                    <Link to={`/view/${cat}.html`} className="btn btn-secondary">Back to view</Link>
-                    <Link to={`/edit/${cat}.html`} className="btn btn-secondary">Back to edit</Link>
+                <div className='buttons-container ml-3'>
+                    <Link to={`/view/${cat}.html`} className='btn btn-secondary'>Back to view</Link>
+                    <Link to={`/edit/${cat}.html`} className='btn btn-secondary'>Back to edit</Link>
                 </div>
             </section>
         </Sidebar>
     );
 }
 
-function field_title_from_slug(slug) {
+MultiEdit.propTypes = {
+    user: PropTypes.object,
+    match: PropTypes.object,
+    location: PropTypes.object
+}
+
+function fieldTitleFromSlug(slug) {
     const fields = CONFIG.reduce(
         (prev, section) => {
             const el = prev.concat(