|
| 1 | +import React, { useState, useEffect } from 'react'; |
| 2 | +import Formulario from './components/Formulario'; |
| 3 | +import ListadoImagenes from './components/ListadoImagenes'; |
| 4 | + |
| 5 | +function App() { |
| 6 | + |
| 7 | + const [busqueda, setBusqueda] = useState(''); |
| 8 | + const [imagenes, setImagenes] = useState([]); |
| 9 | + const [pagina, setPaginaActual] = useState(1); |
| 10 | + const [total, setTotalPaginas] = useState(1); |
| 11 | + |
| 12 | + useEffect(() => { |
| 13 | + const consultarAPI = async () => { |
| 14 | + if (busqueda === '') return; |
| 15 | + |
| 16 | + const imagenesPorPagina = 30; |
| 17 | + const key = '21150289-80cda27b61a6d8e249741ebb0'; |
| 18 | + const url = `https://pixabay.com/api/?key=${key}&q=${busqueda} |
| 19 | + &per_page=${imagenesPorPagina}&page=${pagina}`; |
| 20 | + const respuesta = await fetch(url); |
| 21 | + const resultado = await respuesta.json(); |
| 22 | + setImagenes(resultado.hits); |
| 23 | + |
| 24 | + // CALCULAR EL TOTAL DE PAGINAS |
| 25 | + const calcularTotalPaginas = Math.ceil(resultado.totalHits / imagenesPorPagina); |
| 26 | + setTotalPaginas(calcularTotalPaginas); |
| 27 | + |
| 28 | + // MOVER PANTALLA HACIA ARRIBA |
| 29 | + const jumbotron = document.querySelector('.jumbotron'); |
| 30 | + jumbotron.scrollIntoView({ behavior: 'smooth' }); |
| 31 | + } |
| 32 | + consultarAPI(); |
| 33 | + }, [busqueda, pagina]); |
| 34 | + |
| 35 | + // DEFINIR LA PAGINA ANTERIOR |
| 36 | + const paginaAnterior = () => { |
| 37 | + const nuevaPaginaActual = pagina - 1; |
| 38 | + if (nuevaPaginaActual === 0) return; |
| 39 | + setPaginaActual(nuevaPaginaActual); |
| 40 | + } |
| 41 | + |
| 42 | + // DEFINIR LA PAGINA SIGUIENTE |
| 43 | + const paginaSiguiente = () => { |
| 44 | + const nuevaPaginaActual = pagina + 1; |
| 45 | + if (nuevaPaginaActual > total) return; |
| 46 | + setPaginaActual(nuevaPaginaActual); |
| 47 | + } |
| 48 | + |
| 49 | + return ( |
| 50 | + <div className="container"> |
| 51 | + <div className="jumbotron"> |
| 52 | + <p className="lead text-center">Buscador de Imágenes</p> |
| 53 | + <Formulario setBusqueda={setBusqueda} /> |
| 54 | + </div> |
| 55 | + <div className="row justify-content-center"> |
| 56 | + <ListadoImagenes imagenes={imagenes} /> |
| 57 | + |
| 58 | + {/* SI ES LA PAGINA 1 */} |
| 59 | + {(pagina === 1) ? null : ( |
| 60 | + <button |
| 61 | + type="button" |
| 62 | + className="bbtn btn-info mr-1" |
| 63 | + onClick={paginaAnterior} |
| 64 | + > « Anterior</button> |
| 65 | + )} |
| 66 | + |
| 67 | + {/* SI ES LA ULTIMA PAGINA */} |
| 68 | + {(pagina === total) ? null : ( |
| 69 | + <button |
| 70 | + type="button" |
| 71 | + className="bbtn btn-info" |
| 72 | + onClick={paginaSiguiente} |
| 73 | + >Siguiente »</button> |
| 74 | + )} |
| 75 | + |
| 76 | + </div> |
| 77 | + </div> |
| 78 | + ); |
| 79 | +} |
| 80 | + |
| 81 | +export default App; |
0 commit comments