Permalink
Browse files

Step 6: Add third-party modal component

  • Loading branch information...
samanthamichele7 committed May 31, 2017
1 parent d525230 commit 89e7a97081355864dfe50a899053a13062f42f5a
Showing with 63 additions and 7 deletions.
  1. +1 −0 package.json
  2. +3 −3 src/components/GifItem.js
  3. +3 −1 src/components/GifList.js
  4. +24 −0 src/components/GifModal.js
  5. +1 −1 src/components/SearchBar.js
  6. +23 −2 src/index.js
  7. +8 −0 src/styles/app.css
@@ -5,6 +5,7 @@
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-modal": "^1.7.7",
"superagent": "^3.5.2"
},
"devDependencies": {
@@ -1,9 +1,9 @@
import React from 'react';

const GifItem = (image) => {
const GifItem = ({gif, onGifSelect}) => {
return (
<div className="gif-item">
<img src={image.gif.images.downsized.url} alt="" />
<div className="gif-item" onClick={() => onGifSelect(gif)}>
<img src={gif.images.downsized.url} alt="" />
</div>
)
};
@@ -3,7 +3,9 @@ import GifItem from './GifItem';

const GifList = (props) => {
const gifItems = props.gifs.map((image) => {
return <GifItem key={image.id} gif={image} />
return <GifItem key={image.id}
gif={image}
onGifSelect={props.onGifSelect} />
});

return (
@@ -0,0 +1,24 @@
import React from 'react';
import Modal from 'react-modal';

const GifModal = (props) => {
if (!props.selectedGif) {
return <div></div>;
}

return (
<Modal
isOpen={ props.modalIsOpen }
onRequestClose={ () => props.onRequestClose() }>
<div className="gif-modal">
<img src={ props.selectedGif.images.original.url } alt="" />
<p><strong>Source:</strong> <a href={ props.selectedGif.source }>{ props.selectedGif.source }</a></p>
<p><strong>Rating:</strong> { props.selectedGif.rating }</p>

<button onClick={() => props.onRequestClose()}>close</button>
</div>
</Modal>
);
};

export default GifModal;
@@ -14,7 +14,7 @@ class SearchBar extends React.Component {
render() {
return (
<div className="search">
<input onChange={event => this.onInputChange(event.target.value)} />
<input placeholder="Enter text to search for gifs!" onChange={event => this.onInputChange(event.target.value)} />
</div>
);
}
@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import GifList from './components/GifList';
import GifModal from './components/GifModal';
import SearchBar from './components/SearchBar';
import request from 'superagent';
import './styles/app.css';
@@ -10,10 +11,26 @@ class App extends React.Component {
super();

this.state = {
gifs: []
gifs: [],
selectedGif: null,
modalIsOpen: false
};
}

openModal(gif) {
this.setState({
modalIsOpen: true,
selectedGif: gif
});
}

closeModal() {
this.setState({
modalIsOpen: false,
selectedGif: null
});
}

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

@@ -26,7 +43,11 @@ class App extends React.Component {
return (
<div>
<SearchBar onTermChange={term => this.handleTermChange(term)}/>
<GifList gifs={this.state.gifs}/>
<GifList gifs={this.state.gifs}
onGifSelect={selectedGif => this.openModal(selectedGif) } />
<GifModal modalIsOpen={this.state.modalIsOpen}
selectedGif={this.state.selectedGif}
onRequestClose={ () => this.closeModal() } />
</div>
);
}
@@ -23,6 +23,14 @@
padding: 0;
}

.gif-modal {
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}

input {
display: block;
font-size: 22px;

0 comments on commit 89e7a97

Please sign in to comment.