diff --git a/public/index.html b/public/index.html index 9229920..2946bf4 100644 --- a/public/index.html +++ b/public/index.html @@ -2,28 +2,19 @@ - - - - - - + + + - Weather App Challenger +
- + diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..0452f8c 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -2,21 +2,7 @@ "short_name": "React App", "name": "Create React App Sample", "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } + ], "start_url": ".", "display": "standalone", diff --git a/src/App.jsx b/src/App.jsx index b7f1919..55ed168 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -27,7 +27,7 @@ const App = () => { const [lati, setLati] = useState('4.6097'); const [longi, setLongi] = useState('-74.0817'); const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${lati}&lon=${longi}&appid=${apiKey}`; - const dailyUrl = `http://api.openweathermap.org/data/2.5/forecast?lat=${lati}&lon=${longi}&appid=${apiKey}`; + const dailyUrl = `https://api.openweathermap.org/data/2.5/forecast?lat=${lati}&lon=${longi}&appid=${apiKey}`; const { data: weatherData } = useFetch(weatherUrl); const { data: dailyData} = useFetch(dailyUrl); diff --git a/src/components/DayWeatherCard.jsx b/src/components/DayWeatherCard.jsx index 1742815..2e08a33 100644 --- a/src/components/DayWeatherCard.jsx +++ b/src/components/DayWeatherCard.jsx @@ -84,23 +84,23 @@ const Degree = styled.span` const DayWeatherCard = ({order, isCelsius, data}) => { - const description = data[0]?.weather[0].description; - const [image] = useImgSelector(description); - const min = isCelsius? (data[0]?.main.temp_min - 273.15).toFixed(0) : ((data[0].main.temp_min - 273.15) * 9/5 + 32).toFixed(0); - const max = isCelsius? (data[data.length- 1]?.main.temp_max - 273.15).toFixed(0) : ((data[data.length- 1].main.temp_max - 273.15) * 9/5 + 32).toFixed(0); - const date = useDateFormatted(data, order); + const description = data[0]? data[0].weather[0].description : "No hay datos"; + const [image] = useImgSelector(description?.toLowerCase()); + const min = data[0]? isCelsius ? (data[0]?.main.temp_min - 273.15)?.toFixed(0) : ((data[0].main.temp_min - 273.15) * 9/5 + 32)?.toFixed(0) : "00"; + const max = data[0]? isCelsius ? (data[data.length- 1]?.main.temp_max - 273.15)?.toFixed(0) : ((data[data.length- 1].main.temp_max - 273.15) * 9/5 + 32)?.toFixed(0) : "00"; + const date = useDateFormatted(data[0]? data:null, order); return ( - - {date} - - - - - {min}{isCelsius?'°C':'°F'} - {max}{isCelsius?'°C':'°F'} - - + + {date?date:"Some Day"} + + + + + {min}{isCelsius?'°C':'°F'} + {max}{isCelsius?'°C':'°F'} + + ) } diff --git a/src/components/LeftViewer.jsx b/src/components/LeftViewer.jsx index 8248442..7836948 100644 --- a/src/components/LeftViewer.jsx +++ b/src/components/LeftViewer.jsx @@ -256,7 +256,7 @@ const LeftViewer =({ { e.preventDefault(); - getGeoLocation() + getGeoLocation(); }}> gps_fixed @@ -282,7 +282,7 @@ const LeftViewer =({ - Today • {date} + Today • {date} diff --git a/src/components/LocationSearchView.jsx b/src/components/LocationSearchView.jsx index 55819b6..874f631 100644 --- a/src/components/LocationSearchView.jsx +++ b/src/components/LocationSearchView.jsx @@ -319,11 +319,10 @@ const LocationSearchView = ({ isOpen, toggleSearchView, cityWeather, handleCity results.map((city) => ( { + onClick={(e) => { + e.preventDefault(); handleCityChange(city); - } - } > {city.name} diff --git a/src/components/RightViewer.jsx b/src/components/RightViewer.jsx index 88cb2e3..7d2c5ba 100644 --- a/src/components/RightViewer.jsx +++ b/src/components/RightViewer.jsx @@ -194,15 +194,15 @@ const RightViewer = ({ const dispatcherData = (data, card)=>{ switch (card) { case 1: - return data.filter((item) => isSomeDay(item.dt_txt,1)); + return data?.filter((item) => isSomeDay(item.dt_txt,1)); case 2: - return data.filter((item) => isSomeDay(item.dt_txt,2)); + return data?.filter((item) => isSomeDay(item.dt_txt,2)); case 3: - return data.filter((item) => isSomeDay(item.dt_txt,3)); + return data?.filter((item) => isSomeDay(item.dt_txt,3)); case 4: - return data.filter((item) => isSomeDay(item.dt_txt,4)); + return data?.filter((item) => isSomeDay(item.dt_txt,4)); case 5: - return data.filter((item) => isSomeDay(item.dt_txt,5)); + return data?.filter((item) => isSomeDay(item.dt_txt,5)); default: return null; } @@ -239,31 +239,31 @@ const RightViewer = ({ diff --git a/src/hooks/useDateFormatted.js b/src/hooks/useDateFormatted.js index 850febd..0240e7e 100644 --- a/src/hooks/useDateFormatted.js +++ b/src/hooks/useDateFormatted.js @@ -18,7 +18,9 @@ export function useDateFormatted(data, order) { data !== null && data !== undefined && order !== null && - order !== undefined + order !== undefined && + data[0] !== null && + data[0] !== undefined ) { const day = data[0]?.dt_txt.split(' ')[0].split('-')[2]?.split('')[0] === '0'? diff --git a/src/hooks/useImgSelector.js b/src/hooks/useImgSelector.js index f13040d..bc35fb5 100644 --- a/src/hooks/useImgSelector.js +++ b/src/hooks/useImgSelector.js @@ -133,5 +133,5 @@ export function useImgSelector(description) { setImg(selectedImg); }, [description]); - return [ img ]; + return [img] ; } \ No newline at end of file