{"version":3,"sources":["components/Header.jsx","components/Error.jsx","components/Formulario.jsx","components/Clima.jsx","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.13253056.chunk.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Header = ({titulo}) => {\n  return ( \n    <nav>\n      <div className=\"nav-wrapper light-blue darken-2\">\n        <a href=\"#!\" className=\"brand-logo\">{titulo}</a>\n      </div>\n    </nav>\n  );\n}\n\nHeader.propTypes = {\n  titulo: PropTypes.string.isRequired\n}\n \nexport default Header;","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Error = ({mensaje}) => {\n  return ( \n    <p className=\"red darken4 error\">{mensaje}</p>\n   );\n}\n\n\nError.propTypes = {\n  mensaje: PropTypes.string.isRequired\n}\n \nexport default Error;","import React, {useState} from 'react';\nimport Error from './Error';\nimport PropTypes from 'prop-types'\n\nconst Formulario = ({busqueda, guardarBusqueda, guardarConsultar}) => {\n\n  // state de error\n  const [error, guardarError] = useState(false);\n\n  //Extraer datos\n  const { ciudad, pais } = busqueda;\n\n  // Funcion que coloca los elementos en el state\n  const handleChange = e => {\n    //Actualizar el state\n    guardarBusqueda({\n      ...busqueda,\n      [e.target.name]: e.target.value\n    });\n  }\n\n  //Enviar el form\n  const handleSubmit = e =>{\n    e.preventDefault();\n    //Validar\n    if(ciudad.trim() === '' || pais.trim() === ''){\n      guardarError(true);\n      return;\n    }\n\n    //Pasarlo al componente\n\n    guardarError(false);\n\n    guardarConsultar(true);\n  }\n\n  return ( \n    <form onSubmit={handleSubmit}>\n      {error ? <Error mensaje=\"Ambos campos son obligatorios\"/> : null}\n      <div className=\"input-field col s12\">\n        <input type=\"text\" name=\"ciudad\" id=\"ciudad\" value={ciudad} onChange={handleChange}/>\n        <label htmlFor=\"ciudad\">Ciudad:</label>\n      </div>\n      <div className=\"input-field col s12\">\n        <select name=\"pais\" id=\"pais\" value={pais} onChange={handleChange}>\n          <option value=\"\">-- Seleccione un país --</option>\n          <option value=\"US\">Estados Unidos</option>\n          <option value=\"MX\">México</option>\n          <option value=\"AR\">Argentina</option>\n          <option value=\"CO\">Colombia</option>\n          <option value=\"CR\">Costa Rica</option>\n          <option value=\"ES\">España</option>\n          <option value=\"PE\">Perú</option>\n        </select>\n        <label htmlFor=\"pais\">País:</label>\n      </div>\n      <div className=\"input-field col s12\">\n        <input type=\"submit\" value=\"Buscar\" className=\"waves-effect waves-light btn-large btn-block yellow accent-4\"/>\n      </div>\n    </form>  \n  );\n}\n\nFormulario.propTypes = {\n  busqueda: PropTypes.object.isRequired,\n  guardarBusqueda: PropTypes.func.isRequired,\n  guardarConsultar: PropTypes.func.isRequired\n}\n \nexport default Formulario;\n","import React from 'react';\nimport PropTypes from 'prop-types'\n\nconst Clima = ({resultado}) => {\n\n  // extraer valores\n  const {name, main} = resultado;\n\n  if(!name) return null;\n\n  // convertir grados kelvin a centigrados\n  const kelvin = 273.15;\n\n\n  return ( \n    <div className=\"card-panel white col s12\">\n      <div className=\"black-text\">\n        <h2>El clima de {name} es:</h2>        \n        <p className=\"temperatura\">\n          { parseFloat (main.temp - kelvin, 10).toFixed(2) } <span> &#x2103; </span>\n        </p>\n        <p>Temperatura máxima:\n          { parseFloat (main.temp_max - kelvin, 10).toFixed(2) } <span> &#x2103; </span>\n        </p>\n        <p>Temperatura mínima:\n          { parseFloat (main.temp_min - kelvin, 10).toFixed(2) } <span> &#x2103; </span> \n        </p>\n      </div>\n    </div>\n   );\n}\n\nClima.propTypes = {\n  resultado: PropTypes.object.isRequired\n}\n \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  const [consultar, guardarConsultar] = useState(false);\n  const [resultado, guardarResultado] = useState({});\n  const [error, guardarError] = useState(false);\n\n  const {ciudad, pais} = busqueda;\n\n  useEffect(() => {\n    const consultarAPI = async () => {\n\n      if (consultar) {\n        const appID = '8b9acd325a9e8468e6a5b1d6e7be5a7b';\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 errrores en la consulta\n        if(resultado.cod === '404'){\n          guardarError(true);\n        } else{\n          guardarError(false);\n        }\n      }\n    }\n    consultarAPI();\n    // eslint-disable-next-line\n  }, [consultar])\n  \n  let componente;\n  if(error){\n    componente = <Error mensaje=\"No hay resultados\"/>\n  } else {\n    componente = <Clima resultado={resultado}/>\n  }\n\n  return (\n    <Fragment>\n      <Header titulo='Clima React App'/>\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            </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":""}