Merge pull request #22 from Bardolog1/main

Update develop branch
Bardolog1 · Aug 11, 2023 · 9064bd2 · 9064bd2
2 parents d173ef8 + e7b3945
commit 9064bd2
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 62 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,28 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <style>
-      @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-      </style> 
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet">
-
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="Weather App Challenger"/>
+    <style> @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');</style> 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
     <link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
     <title>Weather App Challenger</title>
   </head>
+
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-
   </body>
+
 </html>
diff --git 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
@@ -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
@@ -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 (
-    <Container className={'_'+order}>
-        <TitleDay>{date}</TitleDay>
-        <DayImageContainer>
-            <DayImage src={image} alt={description}/>
-        </DayImageContainer>
-        <DegreeContainer>
-            <Degree className="min">{min}{isCelsius?'°C':'°F'}</Degree>
-            <Degree className="max">{max}{isCelsius?'°C':'°F'}</Degree>
-        </DegreeContainer>
-    </Container>
+        <Container className={'_'+order}>
+            <TitleDay>{date?date:"Some Day"}</TitleDay>
+            <DayImageContainer>
+                <DayImage src={image} alt={description}/>
+            </DayImageContainer>
+            <DegreeContainer>
+                <Degree className="min">{min}{isCelsius?'°C':'°F'}</Degree>
+                <Degree className="max">{max}{isCelsius?'°C':'°F'}</Degree>
+            </DegreeContainer>
+        </Container>
   )
 }
 

diff --git a/src/components/LeftViewer.jsx b/src/components/LeftViewer.jsx
@@ -256,7 +256,7 @@ const LeftViewer =({
         </ButtonPlaces>
         <ButtonSearch onClick={(e)=> {
           e.preventDefault();
-          getGeoLocation()
+          getGeoLocation();
           }}>
           <ButtonSearchIcon className="material-icons">
             gps_fixed
@@ -282,7 +282,7 @@ const LeftViewer =({
         </WeatherInfo>
         <WeatherExtendInfo>
           <WeatherDate>
-            Today    •    {date}
+            Today     •     {date}
           </WeatherDate>
           <WeatherLocation>
             <LocationIcon className="material-icons">

diff --git a/src/components/LocationSearchView.jsx b/src/components/LocationSearchView.jsx
@@ -319,11 +319,10 @@ const LocationSearchView = ({ isOpen, toggleSearchView,  cityWeather, handleCity
               results.map((city) => (
                 <ListItem 
                   key={city.id}
-                  onClick={() => {
+                  onClick={(e) => {
+                    e.preventDefault();
                     handleCityChange(city);
-
                   }
-
                 }
                 >
                   {city.name}

diff --git 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 = ({
             <DailyWeatherCardsContainer>
                 <DayWeatherCard 
                     order='1' 
-                    data={dispatcherData(daylyData,1)}
+                    data={dispatcherData(daylyData?daylyData:null,1)}
                     isCelsius={isCelsius}
                 ></DayWeatherCard>
                 <DayWeatherCard 
                     order='2' 
                     isCelsius={isCelsius}
-                    data={dispatcherData(daylyData,2)}
+                    data={dispatcherData(daylyData?daylyData:null,2)}
                 >
                 </DayWeatherCard>
                 <DayWeatherCard 
                     order='3'
                     isCelsius={isCelsius}
-                    data={dispatcherData(daylyData,3)}
+                    data={dispatcherData(daylyData?daylyData:null,3)}
                 >
                 </DayWeatherCard>
                 <DayWeatherCard 
                     order='4'
                     isCelsius={isCelsius}
-                    data={dispatcherData(daylyData,4)}
+                    data={dispatcherData(daylyData?daylyData:null,4)}
                 >
                 </DayWeatherCard>
                 <DayWeatherCard 
                     order='5'
                     isCelsius={isCelsius}
-                    data={dispatcherData(daylyData,5)}
+                    data={dispatcherData(daylyData?daylyData:null,5)}
                 >
                 </DayWeatherCard>
             </DailyWeatherCardsContainer>

diff --git 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
@@ -133,5 +133,5 @@ export function useImgSelector(description) {
     setImg(selectedImg);
   }, [description]);
 
-  return [ img ];
+  return  [img] ;
 }