Skip to content

Instantly share code, notes, and snippets.

@laere
Created February 6, 2016 16:46
Show Gist options
  • Save laere/aee694ed4495fd38e170 to your computer and use it in GitHub Desktop.
Save laere/aee694ed4495fd38e170 to your computer and use it in GitHub Desktop.
var baseURL = 'http://swapi.co/api';
var service = {
get: function(url) {
return fetch(baseURL + url)
//returning a promise
//function callback that will promise us something
.then(function(response) {
return response.json();
});
}
};
module.exports = service;
var React = require('react');
var Search = require('./Search.jsx')
var Img = require('./Img.jsx');
var Info = require('./Info.jsx');
var HTTP = require('../services/api');
var UI = React.createClass({
getInitialState: function() {
return {
people: []
}
},
// THIS WILL RETURN API JSON DATA BEFORE FIRST RENDER
componentDidMount: function() {
//GRAB THE URL
HTTP.get('/people')
//THEN GRAB THE URL DATA
.then(function(data) {
//SET STATE FROM INITIAL TO DATA RECEIVED
console.log(data);
this.setState({
people: data
//BIND THIS OR 'THIS' REFERS TO THE FUNCTION
});
}.bind(this));
console.log(this.state.people) // empty
},
filterByName: function(name) {
var filtered = this.state.people.filter(function(name) {
return obj.name.indexOf(name) > -1;
});
console.log(this.state.people)
return ({filtered});
console.log(filtered);
},
render: function() {
return (
<div className="ui">
<header className="search-bar">
{/*SEARCH BAR TO LOOK UP API INFO*/}
<Search onNewSearch={this.filterByName} characters={this.state.people} />
</header>
<input type="submit" value="search" onClick={this.filterByName} />
<Img />
<Info />
</div>
);
}
});
module.exports = UI;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment