{"version":3,"sources":["components/Header.js","components/Error.js","components/Formulario.js","components/Clima.js","App.js","serviceWorker.js","index.js"],"names":["Header","titulo","className","href","Error","mensaje","Formulario","busqueda","guardarBusqueda","guardarConsultar","useState","error","guardarError","ciudad","pais","handleChange","event","target","name","value","onSubmit","e","preventDefault","trim","type","id","onChange","htmlFor","Clima","resultado","main","weather","description","parseFloat","temp","toFixed","temp_max","temp_min","App","componente","consultar","guardarResultado","errorAPI","guardarErrorAPI","useEffect","a","url","fetch","respuesta","json","cod","consultarAPI","Boolean","window","location","hostname","match","ReactDOM","render","StrictMode","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister","catch","console","message"],"mappings":"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","file":"static/js/main.1d1a83fb.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>\r\n            <div className=\"naw-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\n \r\nexport default Header;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst Error = ({mensaje}) => {\r\nreturn (  <p className=\"red darken-4 error\">{mensaje}</p> );\r\n}\r\n \r\nError.propTypes= {\r\n    mensaje: PropTypes.string.isRequired\r\n}\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    //state del formulario\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    //Función que coloca los elementos en el state\r\n    const handleChange= event=>{\r\n        //Actualizar el state\r\n        guardarBusqueda({\r\n            ...busqueda,\r\n            [event.target.name]:event.target.value\r\n        })\r\n    }\r\n\r\n    // Cuando el usuario da submit al formulario\r\n    const handleSubmmit = 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\r\n        guardarError(false);\r\n\r\n        //Cuando se valida que no hay error y todo esta listo\r\n        guardarConsultar(true);\r\n\r\n    }\r\n\r\n    return (\r\n        <form\r\n            onSubmit={handleSubmmit}\r\n        >\r\n            {error ? <Error mensaje=\"Ambos campos son requeridos\"/> : 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=\"\">--Seleciona 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\r\n            <div className=\"input-field col s12\">\r\n                <button\r\n                    type=\"submit\"\r\n                    value=\"Buscar Clima\"\r\n                    className=\"waves-effect waves-light btn-large btn-block yellow accent-4 col s12\"\r\n                >\r\n                    Buscar\r\n                </button>\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 //Extraer los valores\r\n    const {name,main,weather}=resultado;\r\n\r\n    \r\n    if(!name || !weather ) return null;\r\n\r\n    const {description}=weather[0];\r\n    //Grados kelvin\r\n    const kelvin = 273.15;\r\n\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 Minima: \r\n                    {parseFloat(main.temp_min - kelvin,10).toFixed(2)} <span> &#x2103;</span>\r\n                </p>\r\n                <p>Descripción:\r\n                    {description}\r\n                </p>\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n \r\nClima.propTypes={\r\n    resultado: PropTypes.object.isRequired\r\n}\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 principal\n  const [busqueda, guardarBusqueda]=useState({\n    ciudad:'',\n    pais:''\n  });\n  const {ciudad,pais} = busqueda;\n\n  const [consultar, guardarConsultar] = useState(false);\n  const [resultado, guardarResultado] = useState({});\n  const [errorAPI, guardarErrorAPI] = useState(false);\n\n  //Aqui recibe la variable true que fue asignada en guardarConsultar\n  //Cambia de false a true, por lo cual ya realiza la consulta\n  useEffect(() => {\n    \n    const consultarAPI =  async()=>{\n      if(consultar){\n        const appId = '292c0411d7eb1d3e34fa7bddd5e9c115';\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        guardarResultado(resultado);\n        //Una vez echa la consulta se pone a false guardarConsultar para que se borre la consulta actual\n        //Y haga una nueva busquedad si se desea\n        guardarConsultar(false);\n\n        //Detecta se hubo resultados correctos en la respuesta de la API\n        if(resultado.cod === \"404\"){\n          guardarErrorAPI(true);\n        }else{\n          guardarErrorAPI(false);\n        }\n      }\n    }\n    consultarAPI();\n     // eslint-disable-next-line\n  }, [consultar]);\n\n  //Se realiza carga condicional de componentes\n  let componente;\n\n  if(errorAPI){\n    componente=<Error \n                mensaje=\"No hay resultado\"\n                />\n  }else{\n    componente =  <Clima\n                  resultado={resultado}\n                  />\n  }\n\n  return (\n    <Fragment>\n      <Header\n        titulo='Clima React App'\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","// 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';\nimport './index.css';\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);\nserviceWorker.unregister();\n"],"sourceRoot":""}