90 lines
1.8 KiB
JavaScript
90 lines
1.8 KiB
JavaScript
|
const ReactRedux = require('react-redux');
|
||
|
|
const actions = require('./actions');
|
||
|
|
const React = require('react');
|
||
|
|
const axios = require('axios');
|
||
|
|
const users = require('../../users');
|
||
|
|
|
||
|
|
var ReactSelectize = require("react-selectize");
|
||
|
|
var SimpleSelect = ReactSelectize.SimpleSelect;
|
||
|
|
|
||
|
|
const {
|
||
|
|
connect
|
||
|
|
} = ReactRedux;
|
||
|
|
|
||
|
|
const {
|
||
|
|
fetch
|
||
|
|
} = actions;
|
||
|
|
|
||
|
|
const mapStateToProps = (state) => {
|
||
|
|
return state;
|
||
|
|
};
|
||
|
|
|
||
|
|
const mapDispatchToProps = (dispatch, ownProps) => {
|
||
|
|
return {
|
||
|
|
fetch: () => {
|
||
|
|
return dispatch(fetch());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const Search = React.createClass({
|
||
|
|
|
||
|
|
getInitialState: function(){
|
||
|
|
return {
|
||
|
|
countries: [],
|
||
|
|
country: undefined
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillMount: function(){
|
||
|
|
var self = this;
|
||
|
|
this.req = axios.get("http://restverse.com/countries").then(function(countries){
|
||
|
|
self.setState({countries: countries.data}, function(){
|
||
|
|
self.refs.select.highlightFirstSelectableOption();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function(){
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
const _onValueChange = (country) => {
|
||
|
|
self.setState({country: country});
|
||
|
|
}
|
||
|
|
|
||
|
|
const _renderNoResultsFound = () => {
|
||
|
|
return (
|
||
|
|
<div className = "no-results-found">
|
||
|
|
{!!self.req ? "loading countries ..." : "No results found"}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<SimpleSelect
|
||
|
|
ref = "select"
|
||
|
|
placeholder = "Select a country"
|
||
|
|
options = {this.state.countries}
|
||
|
|
value = {this.state.country}
|
||
|
|
onValueChange = {_onValueChange}
|
||
|
|
renderNoResultsFound = {_renderNoResultsFound}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{ !!self.state.country ? (
|
||
|
|
<div style = {{margin: 8}}>
|
||
|
|
<span>you selected: </span>
|
||
|
|
<span style = {{fontWeight: "bold"}}>{self.state.country.label}</span>
|
||
|
|
</div>
|
||
|
|
) : null }
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
module.exports = connect(
|
||
|
|
mapStateToProps,
|
||
|
|
mapDispatchToProps,
|
||
|
|
)(Search);
|