Forked from kubr2017/gist:1b2dd0868b31a3c45020587b9a153264
Created
March 18, 2019 14:33
-
-
Save itsMapleLeaf/f9700947276d8b70b6caf6876f3c4a28 to your computer and use it in GitHub Desktop.
simple scheme async request
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class App extends Component { | |
state = {isLoading:true, | |
query:'', | |
focus:'', | |
places:[]} | |
getVenues = (location) => { | |
const endPoint = 'https://api....' | |
const parameters = {...bla-bla...} | |
axios.get(endPoint+new URLSearchParams(parameters)) | |
.then(response=>{response.data.map((item) => {this.venue = {id:item.id, name:item.name, lat:item.location.lat, lng:item.location.lng, rate:'',pic:'No pic',menu:'No menu',hours:'No hours',address:'No address'}; | |
places.push(this.venue)}) | |
this.getVenuesDetails(places); | |
} | |
) | |
} | |
getVenuesDetails = (places) => { | |
for (let i=0;i<places.length;i++) { | |
const endPoint = 'https://api....'+places[i].id+'?' | |
const parameters = {...bla-bla..} | |
axios.get(endPoint+new URLSearchParams(parameters)) | |
.then(response=>{ places[i].rate = Number(response.data.rating) | |
places[i].pic = response.data.photos | |
places[i].menu=response.data.menu | |
places[i].address=response.data.address | |
places[i].hours=response.hours | |
if (i===places.length-1){ | |
places = places.filter((item)=>{return item.rate>=3;}) | |
this.setState({places:places}); //rerender components with new gotten data | |
} | |
}) | |
} | |
} | |
//search functionality | |
updateQuery = (e) => { | |
this.setState({query:e.target.value.trim()}) | |
} | |
componentDidMount(){ | |
this.getVenues(location) | |
} | |
render() { | |
// search box functionality | |
let searchTitles = []; | |
if (this.state.places.length){ | |
if (this.state.query){ | |
const match = new RegExp(escapeRegExp(this.state.query),'i') | |
searchTitles = places.filter(function(item){return match.test(item.name)}) | |
}else{ | |
searchTitles = this.state.places.slice(); | |
} | |
} | |
let venue = {id:'',name:'',lat:'',lng:'',rate:''}; | |
return ( | |
<div className="App"> | |
<div className='search-box'> | |
<input type='text' onChange={this.updateQuery} value={this.state.query}/> | |
</div> | |
<List places = {searchTitles} focus={this.state.focus} LoadStatus={this.state.isLoading}/> | |
</div> | |
); | |
} | |
} | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment