Skip to content

Add stringified place obj to return, add optional params prop #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
davidgolden wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add stringified place obj to return, add optional params prop #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7fee263
add "place" to result
SoprisAppsCI Dec 10, 2018
b91b105
add required babel plugins to dev dependencies; fix lodash map import…
SoprisAppsCI Dec 10, 2018
f501691
reincorporate country prop so that fix is not breaking
SoprisAppsCI Dec 10, 2018
554d4aa
reorder returned result to make non-breaking
SoprisAppsCI Dec 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 123 additions & 112 deletions ReactMapboxAutocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,142 +1,153 @@
import React from 'react';
import PropTypes from 'prop-types';
import { map } from 'lodash';
import map from 'lodash/map';
import './index.css';

class ReactMapboxAutocomplete extends React.Component {
state = {
error: false,
errorMsg: '',
query: this.props.query ? this.props.query : '',
queryResults: [],
publicKey: this.props.publicKey,
resetSearch: this.props.resetSearch ? this.props.resetSearch : false
}

_updateQuery = event => {
this.setState({ query: event.target.value });
const header = { 'Content-Type': 'application/json' };
let path = 'https://api.mapbox.com/geocoding/v5/mapbox.places/' + this.state.query + '.json?access_token=' + this.state.publicKey;

if(this.props.country) {
path = 'https://api.mapbox.com/geocoding/v5/mapbox.places/' + this.state.query + '.json?access_token=' + this.state.publicKey + '&country=' + this.props.country;
state = {
error: false,
errorMsg: '',
query: this.props.query ? this.props.query : '',
queryResults: [],
publicKey: this.props.publicKey,
resetSearch: this.props.resetSearch ? this.props.resetSearch : false
}

if(this.state.query.length > 2) {
return fetch(path, {
headers: header,
}).then(res => {
if (!res.ok) throw Error(res.statusText);
return res.json();
}).then(json => {
this.setState({
error: false,
queryResults: json.features
});
}).catch(err => {
this.setState({
error: true,
errorMsg: 'There was a problem retrieving data from mapbox',
queryResults: []
_updateQuery = event => {
this.setState({query: event.target.value});
const header = {'Content-Type': 'application/json'};
let path = 'https://api.mapbox.com/geocoding/v5/mapbox.places/' + this.state.query + '.json?access_token=' + this.state.publicKey;

if (this.props.country) {
path = 'https://api.mapbox.com/geocoding/v5/mapbox.places/' + this.state.query + '.json?access_token=' + this.state.publicKey + '&country=' + this.props.country;
}

this.props.params.forEach(param => {
path += `&${param.type}=${param.value}`;
});
})
} else {
this.setState({
error: false,
queryResults: []
});

if (this.state.query.length > 2) {
return fetch(path, {
headers: header,
}).then(res => {
if (!res.ok) throw Error(res.statusText);
return res.json();
}).then(json => {
this.setState({
error: false,
queryResults: json.features
});
}).catch(err => {
this.setState({
error: true,
errorMsg: 'There was a problem retrieving data from mapbox',
queryResults: []
});
})
} else {
this.setState({
error: false,
queryResults: []
});
}
}
}

_resetSearch = () => {
if(this.state.resetSearch) {
this.setState({
query: '',
queryResults: []
});
} else {
this.setState({ queryResults: [] });

_resetSearch = () => {
if (this.state.resetSearch) {
this.setState({
query: '',
queryResults: []
});
} else {
this.setState({queryResults: []});
}
}
}

_onSuggestionSelect = event => {
if(this.state.resetSearch === false) {
this.setState({ query: event.target.getAttribute('data-suggestion') });
_onSuggestionSelect = event => {
if (this.state.resetSearch === false) {
this.setState({query: event.target.getAttribute('data-suggestion')});
}

this.props.onSuggestionSelect(
event.target.getAttribute('data-suggestion'),
event.target.getAttribute('data-lat'),
event.target.getAttribute('data-lng'),
event.target.getAttribute('data-text'),
event.target.getAttribute('data-place')
)
}

this.props.onSuggestionSelect(
event.target.getAttribute('data-suggestion'),
event.target.getAttribute('data-lat'),
event.target.getAttribute('data-lng'),
event.target.getAttribute('data-text')
)
}

render() {
return (
<div>
<input placeholder={ this.props.placeholder || 'Search' }
id={this.props.inputId}
onClick={this.props.inputOnClick}
onBlur={this.props.inputOnBlur}
onFocus={this.props.inputOnFocus}
className={this.props.inputClass ?
this.props.inputClass + ' react-mapbox-ac-input'
: 'react-mapbox-ac-input'}
onChange={this._updateQuery}
value={this.state.query}
type='text'/>
<span>
render() {
return (
<div>
<input placeholder={this.props.placeholder || 'Search'}
id={this.props.inputId}
onClick={this.props.inputOnClick}
onBlur={this.props.inputOnBlur}
onFocus={this.props.inputOnFocus}
className={this.props.inputClass ?
this.props.inputClass + ' react-mapbox-ac-input'
: 'react-mapbox-ac-input'}
onChange={this._updateQuery}
value={this.state.query}
type='text'/>
<span>
<div className='react-mapbox-ac-menu'
style={this.state.queryResults.length > 0 || this.state.error ? { display: 'block' }
: { display: 'none' }}
style={this.state.queryResults.length > 0 || this.state.error ? {display: 'block'}
: {display: 'none'}}
onClick={this._resetSearch}>

{
map(this.state.queryResults, (place, i) => {
return(
<div className='react-mapbox-ac-suggestion'
onClick={this._onSuggestionSelect}
key={i}
data-suggestion={place.place_name}
data-lng={place.center[0]}
data-lat={place.center[1]}
data-text={place.text}>

{place.place_name}

</div>
)
})
map(this.state.queryResults, (place, i) => {
return (
<div className='react-mapbox-ac-suggestion'
onClick={this._onSuggestionSelect}
key={i}
data-place={JSON.stringify(place)}
data-suggestion={place.place_name}
data-lng={place.center[0]}
data-lat={place.center[1]}
data-text={place.text}>

{place.place_name}

</div>
)
})
}

{this.state.error && <div className="react-mapbox-ac-suggestion">{this.state.errorMsg}</div>}
{this.state.error && <div className="react-mapbox-ac-suggestion">{this.state.errorMsg}</div>}
</div>
</span>
</div>
);
}
</div>
);
}
}

ReactMapboxAutocomplete.defaultProps = {
inputId: null,
inputOnFocus: null,
inputOnBlur: null,
inputOnClick: null
inputId: null,
inputOnFocus: null,
inputOnBlur: null,
inputOnClick: null,
params: []
};

ReactMapboxAutocomplete.propTypes = {
inputId: PropTypes.string,
inputOnFocus: PropTypes.func,
inputOnBlur: PropTypes.func,
inputOnClick: PropTypes.func,
inputClass: PropTypes.string,
publicKey: PropTypes.string.isRequired,
placeholder: PropTypes.string,
onSuggestionSelect: PropTypes.func.isRequired,
country: PropTypes.string,
query: PropTypes.string,
resetSearch: PropTypes.bool
inputId: PropTypes.string,
inputOnFocus: PropTypes.func,
inputOnBlur: PropTypes.func,
inputOnClick: PropTypes.func,
inputClass: PropTypes.string,
publicKey: PropTypes.string.isRequired,
placeholder: PropTypes.string,
onSuggestionSelect: PropTypes.func.isRequired,
country: PropTypes.string,
params: PropTypes.array, // add optional query params, options include:
// [ country, language, limit, reverseMode, routing, types ]
// More info: https://www.mapbox.com/api-documentation/#retrieve-places-near-a-location
// prop type is array of { type, value } objects, where value is consistent with Mapbox API requirements
query: PropTypes.string,
resetSearch: PropTypes.bool
}

export default ReactMapboxAutocomplete;
Loading