{"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","buscar","setBuscar","setConsultar","handleChange","e","target","name","value","useState","error","setError","ciudad","pais","onSubmit","preventDefault","trim","type","id","onChange","htmlFor","Clima","resultado","main","kelvin","parseFloat","temp","toFixed","temp_max","temp_min","App","componente","consultar","setResultado","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.0a753dbb.chunk.js","sourcesContent":["import React from 'react';\nimport ProPTypes from 'prop-types';\n\nconst Header = ({titulo}) => {\n    return (\n        \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}\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 darken-4 error\">{mensaje}</p>\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 = ({buscar, setBuscar, setConsultar}) => {\n\n    const handleChange = e => {\n        setBuscar({\n            ...buscar,\n            [e.target.name] : e.target.value\n        });\n    }\n    const [error, setError] = useState(false);  \n\n    const handleSubmit = e => {\n        e.preventDefault();\n\n        if(ciudad.trim() === '' || pais.trim() === '') return setError(true);\n\n        setError(false);\n\n        setConsultar(true);\n    }\n\n\n    \n    const {ciudad, pais} = buscar;\n    return ( \n        <form\n            onSubmit={handleSubmit}\n        >\n            {error ? <Error mensaje=\"Ambos campos son obligatorios\"/> : null}\n            <div className=\"input-field col s12\">\n                <input\n                    type=\"text\"\n                    name=\"ciudad\"\n                    id=\"ciudad\"\n                    value={ciudad}\n                    onChange={handleChange}\n                />\n                <label htmlFor=\"ciudad\">Ciudad: </label>\n            </div>\n            <div className=\"input-field col s12\">\n                <select\n                    name=\"pais\"\n                    id=\"pais\"\n                    value={pais}\n                    onChange={handleChange}\n                >\n                    <option value=\"\">-- Seleccione un país</option>\n                    <option value=\"US\">Estados Unidos</option>\n                    <option value=\"NI\">Nicaragua</option>\n                    <option value=\"MX\">México</option>\n                    <option value=\"AR\">Argentina</option>\n                    <option value=\"CO\">Colombia</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                <button\n                    type=\"submit\"\n                    className=\"waves-effect waves-light btn-large btn-block yellow accent-4 col s12\"\n                >Buscar Clima</button>\n            </div>\n        </form>\n     );\n}\n\nFormulario.propTypes = {\n    buscar: ProPTypes.object.isRequired,\n    setBuscar: ProPTypes.func.isRequired,\n    setConsultar: ProPTypes.func.isRequired\n}\n \nexport default Formulario;","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Clima = ({resultado}) => {\n\n    const {name, main} = resultado;\n    if(!name) return null;\n\n    // Convertir a °C\n    const kelvin = 273.15;\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  const [buscar, setBuscar] = useState({\n    ciudad: '',\n    pais: ''\n  });\n\n  const [consultar, setConsultar] = useState(false);\n  const [resultado, setResultado] = useState({});\n  const [error, setError] = useState(false);\n\n  const {ciudad, pais} = buscar;\n\n    useEffect(() => {\n\n      const consultarAPI = async () => {\n\n        if(consultar) {\n          const appId = '68591edc392e98b9a00534e5de14de5c';\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          setResultado(resultado);\n\n          setConsultar(false);\n\n          // Revisa si hay error de consulta\n\n          if(resultado.cod === \"404\") {\n            setError(true);\n          } else {\n            setError(false);\n          }\n        }\n\n      } \n        consultarAPI();\n\n        // Esto para error de dependencias solo si es necesario\n      // eslint-disable-next-line\n    }, [consultar])\n\n    // Carga condicional de componentes\n    let componente;\n    if(error) {\n      componente = <Error mensaje=\"No hay resultados\" />\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                  buscar={buscar}\n                  setBuscar={setBuscar}\n                  setConsultar={setConsultar}\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":""}