{"version":3,"sources":["components/Header.js","hooks/useSelect.js","components/Formulario.js","components/Noticia.js","components/ListadoNoticias.js","App.js","serviceWorker.js","index.js","components/Formulario.module.css"],"names":["Header","titulo","className","href","useSelect","stateInicial","opciones","useState","state","actualizarState","value","onChange","e","target","map","opcion","key","label","Formulario","guardarCategoria","categoria","SelectNoticias","styles","buscador","onSubmit","preventDefault","heading","type","btn_block","Noticia","noticia","urlToImage","url","title","description","source","imagen","src","alt","name","rel","ListadoNoticias","noticias","App","guardarNoticias","useEffect","a","fetch","repuesta","json","articles","consultarApi","Boolean","window","location","hostname","match","ReactDOM","render","StrictMode","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister","catch","error","console","message","module","exports"],"mappings":"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","file":"static/js/main.6502aafa.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 hooks\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 PropTypes from 'prop-types';\r\nimport useSelect from '../hooks/useSelect';\r\n\r\n\r\nconst Formulario = ({guardarCategoria}) => {\r\n\r\n    const OPCIONES = [\r\n        {value: 'general' , label: 'General'},\r\n        {value: 'business' , label: 'Negocios'},\r\n        {value: 'entertainment' , label: 'Entretenimiento'},\r\n        {value: 'health' , label: 'Salud'},\r\n        {value: 'science' , label: 'Ciencia'},\r\n        {value: 'sports' , label: 'Deportes'},\r\n        {value: 'technology' , label: 'Tecnologia'},\r\n        \r\n    ]\r\n\r\n\r\n\r\n    //utilizar custom hooks\r\n    const [categoria, SelectNoticias] = useSelect('general', 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\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 categoria</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                        />\r\n\r\n                    </div>\r\n                </form>\r\n            </div>\r\n\r\n        </div>\r\n     );\r\n}\r\n\r\nFormulario.propTypes = {\r\n    guardarCategoria: PropTypes.func.isRequired\r\n}\r\n \r\nexport default Formulario;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\n\r\nconst Noticia = ({noticia}) => {\r\n    //Extraer os datos\r\n    const{urlToImage, url, title, description, source} = noticia\r\n\r\n    const imagen = (urlToImage) ?\r\n\r\n    <div className=\"card-image\">\r\n    <img src={urlToImage} alt={title}/>\r\n    <span className=\"card-title\">{source.name}</span>\r\n    </div>\r\n\r\n\r\n    : null;\r\n\r\n    return ( \r\n        <div className=\"col s12 m6 l4\">\r\n            <div className=\"card\">\r\n                {imagen}\r\n                \r\n\r\n                <div className=\"card-content\">\r\n                    <h3>{title}</h3>\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                    \r\n                    >Ver noticia completa</a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n     );\r\n}\r\n\r\nNoticia.propTypes = {\r\n    noticia: PropTypes.object.isRequired\r\n}\r\n \r\nexport default Noticia;","import React from 'react';\r\nimport Noticia from './Noticia';\r\nimport PropTypes from 'prop-types';\r\n\r\n\r\nconst ListadoNoticias = ({noticias}) => {\r\n    return ( \r\n        <div className=\"row\">\r\n            \r\n            {noticias.map(noticia => (\r\n                <Noticia\r\n                    key={noticia.url}\r\n                    noticia={noticia}\r\n                />\r\n            ))}\r\n\r\n        </div>\r\n     );\r\n}\r\n\r\n\r\nListadoNoticias.propTypes = {\r\n    noticias: PropTypes.array.isRequired\r\n}\r\n \r\nexport default ListadoNoticias;","import React, {Fragment, useState, useEffect} from 'react';\nimport Header from './components/Header';\nimport Formulario from './components/Formulario';\nimport ListadoNoticias from './components/ListadoNoticias';\n\n\nfunction App() {\n  //Definir la categoria y noticias\n  const [categoria, guardarCategoria] = useState('');\n  const [noticias, guardarNoticias] = useState([]);\n\n  useEffect(() => {\n    const consultarApi = async() => {\n        const url = `http://newsapi.org/v2/top-headlines?country=ar&category=${categoria}&apiKey=f589c5ef17684b3286340ffa45975d18`;\n\n        const repuesta = await fetch (url);\n        const noticias = await repuesta.json();\n\n        guardarNoticias(noticias.articles);\n\n\n\n    }\n    consultarApi();\n  }, [categoria]);\n\n\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\n        <ListadoNoticias\n            noticias={noticias}\n        />\n\n      </div>\n    </Fragment>\n  );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' },\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"heading\":\"Formulario_heading__2IKes\",\"buscador\":\"Formulario_buscador__1wma6\",\"btn_block\":\"Formulario_btn_block__ASC3O\"};"],"sourceRoot":""}