{"version":3,"sources":["components/Header.js","components/Error.js","components/Formulario.js","components/Clima.js","App.js","reportWebVitals.js","index.js"],"names":["Header","titulo","className","href","Error","mensaje","Formulario","busqueda","guardarBusqueda","guardarConsultar","useState","error","guardarError","ciudad","pais","handleChange","e","target","name","value","onSubmit","preventDefault","trim","type","id","onChange","htmlFor","Clima","resultado","main","kelvin","parseFloat","temp","toFixed","temp_max","temp_min","App","componente","consultar","guardarResultado","useEffect","a","url","fetch","respuesta","json","cod","consultarAPI","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.e7ee985e.chunk.js","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\n\r\nconst Header = ({titulo}) => {\r\n    return ( \r\n        <nav>\r\n            <div className=\"nav-wrapper light-blue darken-2\">\r\n                <a href=\"#!\" className= \"brand-logo\">{titulo}</a>\r\n            </div>\r\n        </nav>\r\n     );\r\n}\r\n\r\nHeader.propTypes = {\r\n    titulo: PropTypes.string.isRequired\r\n}\r\nexport default Header;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst Error = ({mensaje}) => {\r\n    return ( \r\n        <p className=\"red darken-4 error\">{mensaje}</p>\r\n     );\r\n}\r\n\r\nError.propTypes = {\r\n    mensaje: PropTypes.string.isRequired\r\n} \r\nexport default Error;","import React, { useState } from 'react';\r\nimport Error from './Error'\r\nimport PropTypes from 'prop-types';\r\n\r\nconst Formulario = ({busqueda, guardarBusqueda, guardarConsultar}) => {    \r\n\r\n    const [ error, guardarError ] = useState(false);\r\n\r\n    //extraer ciudad y pais\r\n    const { ciudad, pais } = busqueda;\r\n\r\n    //Funcion que coloca los elementos en el state\r\n    const handleChange = e =>{\r\n        //actualizar el state\r\n        guardarBusqueda({\r\n            ...busqueda,\r\n            [e.target.name]:e.target.value\r\n        });\r\n    }\r\n\r\n    //cuando el usuario presiona guardar\r\n    const handleSubmit = e =>{\r\n        e.preventDefault()\r\n\r\n        //Validar\r\n        if(ciudad.trim() ===''|| pais.trim() ===''){\r\n            guardarError(true); \r\n            return;\r\n        }\r\n        guardarError(false);\r\n        \r\n        guardarConsultar(true);\r\n    }\r\n\r\n    return (\r\n        <form onSubmit={handleSubmit}> \r\n            { error ? <Error mensaje=\"Ambos campos son obligatorios\"/> : null}\r\n            <div className=\"input-field col s12\">\r\n                <input\r\n                    type=\"text\"\r\n                    name=\"ciudad\"\r\n                    id=\"ciudad\"\r\n                    value={ciudad}\r\n                    onChange={handleChange}\r\n                />\r\n                <label htmlFor=\"ciudad\">Ciudad: </label>                \r\n            </div>\r\n            <div className=\"input-field col s12\">\r\n                <select\r\n                    name=\"pais\"\r\n                    id=\"pais\"\r\n                    value={pais}\r\n                    onChange={handleChange}\r\n                >\r\n                    <option value=\"\">--Seleccione un país--</option>\r\n                    <option value=\"US\">Estados Unidos</option>\r\n                    <option value=\"MX\">México</option>\r\n                    <option value=\"AR\">Argentina</option>\r\n                    <option value=\"CO\">Colombia</option>\r\n                    <option value=\"CR\">Costa Rica</option>\r\n                    <option value=\"ES\">España</option>\r\n                    <option value=\"PE\">Perú</option>\r\n                </select>\r\n                <label htmlFor=\"pais\">País: </label>\r\n            </div>\r\n            <div className=\"input-field col s12\">\r\n                <input\r\n                    type=\"submit\"\r\n                    value=\"Buscar Clima\"\r\n                    className=\"waves-effect waves-light btn-large btn-block yellow accent-4\"/>\r\n            </div>\r\n        </form>\r\n     );\r\n}\r\n\r\nFormulario.propTypes = {\r\n    busqueda: PropTypes.object.isRequired,\r\n    guardarBusqueda: PropTypes.func.isRequired,\r\n    guardarConsultar: PropTypes.func.isRequired\r\n    \r\n}\r\nexport default Formulario;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst Clima = ({resultado}) => {\r\n\r\n    const { name, main } = resultado;\r\n\r\n    const kelvin =273.15;\r\n\r\n    if(!name) return null;\r\n    return ( \r\n        <div className=\"card-panel white col s12\">\r\n            <div className=\"black-text\">\r\n                <h2>El clima de {name} es:</h2>\r\n                <p className=\"temperatura\">\r\n                    {parseFloat(main.temp - kelvin,10).toFixed(2)} <span>&#x2103;</span>\r\n                </p>\r\n                <p>Temperatura máxima: \r\n                    {parseFloat(main.temp_max - kelvin,10).toFixed(2)} <span>&#x2103;</span>\r\n                </p>\r\n                <p>Temperatura mínima:\r\n                    {parseFloat(main.temp_min - kelvin,10).toFixed(2)} <span>&#x2103;</span>\r\n                </p>\r\n            </div>\r\n        </div>\r\n    \r\n     );\r\n}\r\n \r\nClima.propTypes = {\r\n    resultado: PropTypes.object.isRequired\r\n}\r\nexport default Clima;","import React, { Fragment, useState, useEffect } from 'react';\nimport Header from './components/Header';\nimport Formulario from './components/Formulario';\nimport Clima from './components/Clima';\nimport Error from './components/Error';\n\nfunction App() {\n\n  //State del Formulario\n  const [ busqueda, guardarBusqueda ] = useState({\n    ciudad:'',\n    pais:''        \n})\n\n  const [ consultar, guardarConsultar ] = useState(false);\n  const [ resultado, guardarResultado ] = useState({});\n  const [ error, guardarError ] = useState(false);\n\nconst {ciudad, pais} = busqueda;\n\nuseEffect(() => {\n\n  const consultarAPI = async ()=>{\n  \n    if(consultar){\n      const appID = 'ad67aaf1d91ed9416c0a6c868418269a';\n      const url = `https://api.openweathermap.org/data/2.5/weather?q=${ciudad},${pais}&appid=${appID}`;\n\n      const respuesta = await fetch(url);\n      const resultado = await respuesta.json();\n\n    guardarResultado(resultado);\n    guardarConsultar(false);\n\n    //Detectar si hubo resultados correctos en la consulta\n    if(resultado.cod === \"404\"){\n      guardarError(true)\n    }else{\n      guardarError(false)\n    }\n    }\n\n  }\n  consultarAPI();\n\n  //eslint-disable-next-line  \n  }, [consultar])\n\n  let componente;\n  if(error){\n    componente = <Error mensaje= \"No hay resultado\"/>\n  }else{\n    componente = <Clima\n    resultado = {resultado}\n/>\n  }\n\n  return (\n    <Fragment>\n        <Header\n          titulo = 'Clima React App'\n        />\n\n        <div className=\"contenedor-form\">\n          <div className=\"container\">\n            <div className=\"row\">\n                <div className=\"col m6 s12\">\n                  <Formulario\n                      busqueda= {busqueda}\n                      guardarBusqueda= {guardarBusqueda}\n                      guardarConsultar= {guardarConsultar}\n                  />\n                </div>\n                <div className=\"col m6 s12\">\n                  {componente}\n                </div>\n            </div>\n          </div>\n        </div>\n    </Fragment>\n  );\n}\n\nexport default App;\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 './index.css';\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"],"sourceRoot":""}