Permalink
Browse files

Step 4: Fetch and render data from Giphy API

  • Loading branch information...
samanthamichele7 committed May 31, 2017
1 parent fcc479a commit 8039092c06656f43d639f8fb73b2b7ba5f7a60e3
Showing with 14 additions and 21 deletions.
  1. +3 −2 package.json
  2. +1 −1 src/components/GifItem.js
  3. +10 −18 src/index.js
@@ -4,7 +4,8 @@
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
"react-dom": "^15.5.4",
"superagent": "^3.5.2"
},
"devDependencies": {
"react-scripts": "1.0.7"
@@ -15,4 +16,4 @@
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
}
@@ -3,7 +3,7 @@ import React from 'react';
const GifItem = (image) => {
return (
<li>
<img src={image.gif.url} />
<img src={image.gif.images.downsized.url} alt="" />
</li>
)
};
@@ -2,38 +2,30 @@ import React from 'react';
import ReactDOM from 'react-dom';
import GifList from './components/GifList';
import SearchBar from './components/SearchBar';
import request from 'superagent';

class App extends React.Component {
constructor() {
super();

this.state = {
gifs: [
{
id: 1,
url: 'http://fakeimg.pl/300/'
},
{
id: 2,
url: 'http://fakeimg.pl/300/'
},
{
id: 3,
url: 'http://fakeimg.pl/300/'
}
]
}
gifs: []
};
}

handleTermChange(term) {
console.log(term);
const url = `http://api.giphy.com/v1/gifs/search?q=${term.replace(/\s/g, '+')}&api_key=dc6zaTOxFJmzC`;

request.get(url, (err, res) => {
this.setState({ gifs: res.body.data })
});
}

render() {
return (
<div>
<SearchBar onTermChange={this.handleTermChange} />
<GifList gifs={this.state.gifs} />
<SearchBar onTermChange={term => this.handleTermChange(term)}/>
<GifList gifs={this.state.gifs}/>
</div>
);
}

0 comments on commit 8039092

Please sign in to comment.