Lint whitespace, case, prop-types
This commit is contained in:
Tom Russell
parent
426c7ff9f6
commit
0008bbb860
@ -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
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user