wizelineacademy · Zitle-Nancy · Jul 7, 2018 · Jul 7, 2018 · Jul 7, 2018 · Jul 8, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "giphy-js-sdk-core": "^1.0.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.1"
   },
   "jest": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,7 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,13 +19,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Giphy</title>
   </head>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <div id="modal-giphy"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,25 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import {BrowserRouter, Switch, Route} from "react-router-dom";
+import ContainerListGiphy from './giphy/container/container-list-giphy';
+import ContainerGiphysFavorites from './giphy-favorite/container/container-giphys-favorites';
+import NotFound from './giphy/components/not-found';
 import './App.css';
 
-class App extends Component {
+
+export default class App extends Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+      <React.Fragment>
+        <BrowserRouter>
+          <Switch>
+            <Route exact path="/" component={ ContainerListGiphy } />
+            <Route path="/favorites" component={ ContainerGiphysFavorites } />
+            <Route path='*' component={NotFound} />
+          </Switch>
+        </BrowserRouter>
+      </React.Fragment>
     );
   }
 }
 
-export default App;
+
diff --git a/src/giphy-favorite/components/giphy-favorite.js b/src/giphy-favorite/components/giphy-favorite.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function GiphyFavorite(props){
+  return(
+    <div>
+      giphy favorites
+    </div>
+  )
+}
diff --git a/src/giphy-favorite/container/container-giphys-favorites.js b/src/giphy-favorite/container/container-giphys-favorites.js
@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import GiphyFavorite from '../components/giphy-favorite';
+
+export default class ContainerGiphysFavorites extends Component{
+
+  render(){
+    return(
+      <div>
+        <GiphyFavorite />
+      </div>
+    )
+  }
+}
diff --git a/src/giphy/components/list-giphy.css b/src/giphy/components/list-giphy.css
@@ -0,0 +1,42 @@
+ .container{
+  width: 80%;
+  margin: auto;
+  text-align: center;
+  box-sizing: border-box;
+}
+.container-giphy{
+  display: inline-block;
+  width: 200px;
+  height: 200px;
+  margin:10px 5px 5px 10px;
+  cursor: pointer;
+}
+.container-giphy img{
+  width: 100%;
+  height: 100%;
+}
+.container-giphy p{
+  text-align: center;
+  margin: auto;
+  right: 0;
+  position: relative;
+  font-size: 12px;
+} 
+.input-search{
+  background-color: #fff;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  border-radius: 0;
+  font-weight: 400;
+  width: 100%;
+  border: 0;
+  margin: 0;
+  height: 52px;
+  letter-spacing: 1px;
+  font-size: 18px;
+  background-image: url('../../img/search.gif');
+  background-repeat: no-repeat;
+  background-size: 5% 100%;
+  background-position-x: right;
+  border: solid gray 1px;
+}
diff --git a/src/giphy/components/list-giphy.js b/src/giphy/components/list-giphy.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import Modal from '../../modal/component/modal';
+import './list-giphy.css';
+
+export default function ListGiphy(props){
+  return(
+    <React.Fragment>
+      <div className="container-giphy" onClick={props.handleOpenModal}>
+        <img  src={props.urlGiphy} alt="Giphy"/>
+      </div>
+    </React.Fragment>
+  )
+}
diff --git a/src/giphy/components/not-found.js b/src/giphy/components/not-found.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import image from '../../img/0757.png';
+export default function NotFoud(){
+  return(
+    <div className="container">
+      <img src={image} alt="Not Found"/>
+      <h2>Upss Elemento no encontrado</h2>
+    </div>
+  )
+}
diff --git a/src/giphy/components/search.js b/src/giphy/components/search.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import ListGiphy from './list-giphy';
+const GphApiClient = require('giphy-js-sdk-core');
+const client = GphApiClient('STKCOqnN3DKDQJRPbv5il9egmGwZqRSn');
+
+// gifs
+export default function Search(props){
+  let textInput = React.createRef();
+
+  function handleSearch(e){
+    e.preventDefault();
+    const valueSearch = textInput.current.value;
+
+    client.search('gifs', {"q": valueSearch.toString()})
+    .then((response) => {
+      response.data.map((urlGiphy) => {
+        // return(
+        //   <ListGiphy 
+        //     urlGiphy={urlGiphy.images.downsized.gif_url}
+        //   />
+        // )
+        console.log(urlGiphy.images.downsized.gif_url);
+      })
+    })
+    .catch((err) => {
+
+    })
+    console.log(valueSearch);
+  }
+
+  return(
+    <form onSubmit={handleSearch}>
+      <input 
+        className="input-search"
+        type="text" 
+        placeholder="Search Giphy"
+        ref={textInput}
+        />
+    </form>
+  )
+}
diff --git a/src/giphy/container/container-list-giphy.js b/src/giphy/container/container-list-giphy.js
@@ -0,0 +1,77 @@
+import  React,{ Component } from 'react';
+import axios from 'axios';
+import ListGiphy from '../components/list-giphy';
+import Search from '../components/search';
+// import ContainerModal from '../../modal/container/container-modal';
+import Modal from '../../modal/component/modal';
+
+const listGiphy = [];
+export default class ContainerListGiphy extends Component{
+  state = {
+    dataGiphy:{},
+    modalVisible:false,
+    isFavorite:false,
+    colorHeart:'gray'
+  }
+  handleCloseModal = ()=>{
+    this.setState({
+      modalVisible:false
+    })
+  }
+  handleOpenModal = () =>{
+    this.setState({
+      modalVisible:true
+    })
+  }
+  favorites = () =>{
+    this.setState({
+      isFavorite:!this.state.isFavorite,
+      colorHeart:this.state.isFavorite ? 'red' : 'gray'
+    })
+  }
+  componentDidMount(){
+    // donde q=ryan+gosling parametro que va a buscar y limt = cantidad a mostrar
+    const url = 'http://api.giphy.com/v1/gifs/trending?&api_key=STKCOqnN3DKDQJRPbv5il9egmGwZqRSn&limit=25';
+    axios.get(url)
+    .then((resultsGiphy) => {
+      this.setState({
+        dataGiphy:resultsGiphy
+      })
+    })
+  }
+
+  render(){
+    return(
+      <section className="list-giphy container">
+        <Search/>
+          {
+            listGiphy.map((giphy,index) => {
+              return(
+                <ListGiphy 
+                  key={index}
+                  urlGiphy={giphy.images.downsized.url}
+                  description={giphy.title}
+                  handleOpenModal={this.handleOpenModal}
+                />
+              )
+            })
+          }
+          {
+            this.state.modalVisible && 
+            <Modal 
+              favorites={this.favorites}
+              handleCloseModal={this.handleCloseModal}
+              colorHeart={this.state.colorHeart}
+              listGiphy={listGiphy}
+            />
+          }
+      </section>      
+    )
+  }
+  componentWillUpdate(nextProps, nextState){
+    nextState.dataGiphy.data.data.forEach((giphys,index) => {
+      listGiphy.push(giphys);
+    })
+  }
+};
+
diff --git a/src/icons/components/heart.js b/src/icons/components/heart.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Heart(props){
+	return(
+      <svg style={{fill:`${props.colorHeart}`}} className="heart-svg" onClick={props.favorites}>
+        <path d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543  c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503  c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"></path>
+      </svg>
+  )
+} 
diff --git a/src/img/0757.png b/src/img/0757.png
diff --git a/src/img/search.gif b/src/img/search.gif
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/modal/component/modal.css b/src/modal/component/modal.css
@@ -0,0 +1,38 @@
+.modal {
+  max-width: 768px;
+  width: 100%;
+  margin: 0 auto;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 100px;
+  background:  white;
+  padding: 20px;
+  border-radius: 20px;
+  box-shadow: 0 0 10px rgba(0,0,0,.4);
+}
+
+.modal-close {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  right: 21px;
+  top: 3px;
+  border-radius: 50%;
+  border: none;
+  background: #171c30;
+  color: white;
+  cursor: pointer;
+}
+
+.modal-close:after {
+  content: "X";
+  font-weight: bold;
+  font-size: 20px;
+}
+.heart-svg{
+  fill:#777171;
+  width: 55px;
+  height: 55px;
+  cursor: pointer;
+}
diff --git a/src/modal/component/modal.js b/src/modal/component/modal.js
@@ -0,0 +1,35 @@
+import React from 'react';
+// import ListGiphy from '../../giphy/components/list-giphy';
+import Heart from '../../icons/components/heart';
+
+
+import './modal.css';
+
+export default function Modal(props){
+  console.log(props.listGiphy,'data del modal');
+  return(
+    <div className="modal">
+      {/* {props.listGiphy.map((image,index) =>{
+        return(
+          <div>
+            {console.log(image.images.downsized.url)}
+          </div>
+        )
+      })} */}
+      {/* <img  /> */}
+      <button className="modal-close" onClick={props.handleCloseModal}></button>
+
+      <section>
+        <p>
+          Marca este Giphy como tu favorito
+        </p>
+        <div>
+          <Heart 
+            favorites={props.favorites}
+            colorHeart={props.colorHeart}
+          />
+        </div>
+      </section>
+    </div>
+  )
+}