{"version":3,"sources":["components/Header.js","hooks/useSelect.js","components/Formulario.js","components/Noticia.js","components/ListadoDeNoticias.js","App.js","reportWebVitals.js","index.js","components/Formulario.module.css"],"names":["Header","titulo","className","href","useSelect","stateInicial","opciones","useState","state","actualizarState","value","onChange","e","target","map","opcion","label","Formulario","guardarCategoria","categoria","SelectNoticias","styles","buscador","onSubmit","preventDefault","heading","type","btn_block","Noticia","noticia","image","url","title","description","source","imagen","src","alt","name","rel","ListadoDeNoticias","noticias","App","guardarNoticias","useEffect","a","url2","fetch","respuesta","json","console","log","articles","consultarAPI","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById","module","exports"],"mappings":"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","file":"static/js/main.84352b0b.chunk.js","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst Header = ({titulo}) => {\r\n    return ( \r\n        <nav className=\"nav-wrapper light-blue darken-3\">\r\n            <a href=\"#!\" className=\"brand-logo center\">{titulo}</a>\r\n        </nav>\r\n     );\r\n}\r\n\r\nHeader.propTypes = {\r\n    titulo:PropTypes.string.isRequired\r\n}\r\n \r\nexport default Header;","import React, { useState } from 'react';\r\n\r\nconst useSelect = (stateInicial, opciones) => {\r\n\r\n    //State del custom hook\r\n    const [ state, actualizarState ] = useState(stateInicial);    \r\n    \r\n    const SelectNoticias = ()=>(\r\n        <select \r\n            className=\"browser-default\"\r\n            value={state}\r\n            onChange= {e => actualizarState(e.target.value)}\r\n        >\r\n            {opciones.map(opcion =>(\r\n                <option key={opcion.value} value={opcion.value}>{opcion.label}</option>\r\n            ))}\r\n        </select>\r\n    );\r\n\r\n    return [ state, SelectNoticias ];\r\n}\r\n \r\nexport default useSelect;","import React from 'react';\r\nimport styles from './Formulario.module.css';\r\nimport useSelect from '../hooks/useSelect';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst Formulario = ({guardarCategoria}) => {\r\n\r\n    const OPCIONES = [\r\n        {value:'breaking-news', label:'General'},\r\n        {value:'world', label:'Internacionales'},\r\n        {value:'nation', label:'Nacionales'},\r\n        {value:'business', label:'Negocios'},\r\n        {value:'technology', label:'Teconología'},\r\n        {value:'entertainment', label:'Entretenimiento'},\r\n        {value:'sports', label:'Deportes'},\r\n        {value:'science', label:'Ciencia'},\r\n        {value:'health', label:'Salud'},\r\n    ]\r\n\r\n    //utilizar custom hook\r\n    const [ categoria, SelectNoticias ] = useSelect('breaking-news', OPCIONES);\r\n\r\n    //submit al form, pasar categoria a app.js\r\n    const buscarNoticias = e =>{\r\n        e.preventDefault();\r\n\r\n        guardarCategoria(categoria);\r\n    }\r\n\r\n    return ( \r\n        <div className={`${styles.buscador} row`}>\r\n            <div className=\"col s12 m8 offset-m2\">\r\n                <form\r\n                    onSubmit={buscarNoticias}\r\n                >\r\n                    <h2 className={styles.heading}>Encuentra Noticias por Categoría</h2>\r\n\r\n                    <SelectNoticias />\r\n\r\n                    <div className=\"input-field col s12\">\r\n                        <input\r\n                            type=\"submit\"\r\n                            className={`${styles.btn_block} btn-large amber darken-2`}\r\n                            value=\"buscar\"\r\n                        />\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </div>\r\n     );\r\n}\r\n \r\nFormulario.propTypes = {\r\n    guardarCategoria:PropTypes.func.isRequired\r\n}\r\nexport default Formulario;\r\n\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst Noticia = ({noticia}) => {\r\n\r\n    const { image, url, title, description, source} = noticia;\r\n\r\n    const imagen = (image) ? \r\n                <div className=\"card-image\">\r\n                    <img src={image} alt={title}/>\r\n                    <span className=\"card-title\">{source.name}</span>\r\n                </div> : null; \r\n    return ( \r\n        <div className=\"col s12 m6 l4\">\r\n            <div className=\"card\">\r\n                \r\n                {imagen}\r\n                <div className=\"card-content\">\r\n                    <h5>{title}</h5>\r\n                    <p>{description}</p>\r\n                </div>\r\n                <div className=\"card-action\">\r\n                    <a\r\n                        href={url}\r\n                        target=\"_blank\"\r\n                        rel=\"noopener noreferrer\"\r\n                        className=\"waves-effect waves-light btn\"\r\n                        >Ver Noticia Completa</a>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n     );\r\n}\r\n \r\nNoticia.propTypes = {\r\n    noticia:PropTypes.object.isRequired\r\n}\r\nexport default Noticia;","import React from 'react';\r\nimport Noticia from './Noticia';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst ListadoDeNoticias = ({noticias}) => {\r\n    return ( \r\n        <div className=\"row\">\r\n        {noticias.map(noticia=>(\r\n            <Noticia\r\n            key={noticia.url}\r\n            noticia={noticia}\r\n            />\r\n        ))}\r\n        </div>\r\n     );\r\n}\r\n \r\nListadoDeNoticias.propTypes = {\r\n    noticias:PropTypes.array.isRequired\r\n}\r\nexport default ListadoDeNoticias;","import React, { Fragment, useState, useEffect } from 'react';\nimport Header from './components/Header';\nimport Formulario from './components/Formulario';\nimport ListadoDeNoticias from './components/ListadoDeNoticias';\n\n\nfunction App() {\n\n  //definir la categoria y noticias\n  const [ categoria, guardarCategoria ] = useState('');\n  const [ noticias, guardarNoticias ] = useState([]);\n\n  useEffect(() => {\n\n    const consultarAPI = async ()=>{\n      const url2 = `https://gnews.io/api/v4/top-headlines?topic=${categoria}&country=us&token=97d5527c6dc10d7194e0202c2b071f83`;\n        // const url = `https://newsapi.org/v2/top-headlines?country=ar&category=${categoria}&apiKey=84729dc602544e0295d7ce0696789f32`;\n\n        const respuesta = await fetch(url2)\n        const noticias = await respuesta.json();\n        console.log(noticias)\n        guardarNoticias(noticias.articles);\n\n    }\n    consultarAPI();\n  }, [categoria])\n\n  return (\n    <Fragment>\n        <Header \n            titulo = 'Buscador de Noticias'\n        />\n\n        <div className=\"container white\">\n          <Formulario\n              guardarCategoria = {guardarCategoria}\n          />\n          <ListadoDeNoticias\n          noticias = {noticias}\n          />\n        </div>\n    </Fragment>\n  );\n}\n\nexport default App;\n\n\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"heading\":\"Formulario_heading__3r2Jt\",\"buscador\":\"Formulario_buscador__3cW0-\",\"btn_block\":\"Formulario_btn_block__15GIm\"};"],"sourceRoot":""}