{"version":3,"sources":["Components/Header.jsx","Components/Error.jsx","Components/Formulario.jsx","Components/Clima.jsx","App.js","serviceWorker.js","index.js"],"names":["Header","titulo","className","href","Error","mensaje","Formulario","guardarBusqueda","busqueda","guardarConsultar","useState","error","guardarError","ciudad","pais","handleChange","e","target","name","value","onSubmit","preventDefault","trim","autoSave","type","id","onChange","htmlFor","Clima","resultado","main","parseFloat","temp","toFixed","temp_max","temp_min","App","Componente","consultar","guardarResultado","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.5e8ceb08.chunk.js","sourcesContent":["import React , {Fragment} from 'react';\r\n\r\nconst Header = ({titulo}) => {\r\n    return ( \r\n\r\n        <Fragment>\r\n         \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        </Fragment>\r\n     );\r\n}\r\n \r\nexport default Header;","import React from 'react';\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\nexport default Error;","import React , {useState} from 'react'\r\nimport Error from '../Components/Error'\r\n\r\nconst Formulario = ({guardarBusqueda, busqueda, guardarConsultar}) => {\r\n\r\n\r\n    const [error , guardarError] = useState(false);\r\n    // extar pais y ciudad\r\n\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 le de submit al form \r\n\r\n     const handleSubmit = e =>{\r\n         e.preventDefault();\r\n\r\n         // validar \r\n\r\n         if(ciudad.trim()=== '' || pais.trim() === ''){\r\n             guardarError(true);\r\n             return;\r\n         }\r\n\r\n         guardarError(false);\r\n         guardarConsultar(true);\r\n\r\n         // \r\n     }\r\n    return ( \r\n            <form \r\n                onSubmit={handleSubmit}\r\n            >\r\n              {error  ? <Error \r\n                mensaje =\"ambos campos deben estar llenos\"/> : null} \r\n               \r\n                <div className=\"input-field col s12\" autoSave=\"off\" >\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 name=\"pais\"\r\n                    id=\"pais\"\r\n                    value={pais}   \r\n                    onChange={handleChange}   \r\n                    \r\n                    >\r\n\r\n                        <option value=\"\">---Seleccione un pais---</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\">Pais: </label>\r\n                </div>\r\n\r\n                <div className=\"input-field col s12\">\r\n                        <input 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\nexport default Formulario;","import React from 'react';\r\n\r\nconst Clima = ({resultado}) => {\r\n    //estraer los valores\r\n\r\n    const {name, main}= resultado;\r\n    if(!name)return null;\r\n    \r\n    //restar grados kelvin\r\n\r\n    const kelvin = 273.15;\r\n\r\n    return ( \r\n            \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\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\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{ciudad, pais} = busqueda;\n    const [error , guardarError] = useState(false);\n    \n    useEffect(() => {\n       \n      const consultarApi = async () => {\n\n        if(consultar){\n          const appId='b4e9144d798b47ebf4cec4296eca679a';\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          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\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                </div>\n                <div className=\"col m6 s12\">\n                  {Componente}\n                </div>\n           \n              </div>\n              \n          </div>\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';\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);\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"],"sourceRoot":""}