Merge pull request #11 from Bardolog1/features/api-request

Se crea hook useDateFormatted y
Bardolog1 · Aug 7, 2023 · 3c844ba · 3c844ba
2 parents c08f00c + 94e829a
commit 3c844ba
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 72 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -22,7 +22,6 @@ const AppCont = styled.div`
 
 const App = () => {
 
-
   // apiKey incluida desde un fichero externo de variables de entorno indexado en el .gitignore
   const apiKey = process.env.REACT_APP_API_KEY;
   const [lati, setLati] = useState('4.6097');
@@ -34,7 +33,6 @@ const App = () => {
   const { data: dailyData} = useFetch(dailyUrl);
 
   const [isSearchOpen, setIsSearchOpen] = useState(false);
-
   const [isCelsius, setIsCelsius] = useState(true);
 
   const [searchCity, setSearchCity] = useState('bogota');
@@ -44,13 +42,13 @@ const App = () => {
   const cityApi = weatherData?.name || "Ciudad desconocida";
   const country = weatherData?.sys?.country || "Desconocido";
   const wind = (weatherData?.wind?.speed * 3.6).toFixed(1) || 0;
-  const humidity = (weatherData?.main?.humidity).toFixed(0) || 0;
-  const pressure = (weatherData?.main?.pressure).toFixed(0) || 0;
-  const visibility = (weatherData?.visibility/1000).toFixed(0) || 0;
+  const humidity = (weatherData?.main?.humidity)?.toFixed(0) || 0;
+  const pressure = (weatherData?.main?.pressure)?.toFixed(0) || 0;
+  const visibility = (weatherData?.visibility/1000)?.toFixed(0) || 0;
   const degreeWind = weatherData?.wind?.deg || 0;
-
   const daysWeather = dailyData?.list || [];
 
+
   useEffect(() => {
     setLati(searchCity.coord?.lat || '4.6097');
     setLongi(searchCity.coord?.lon || '-74.0817');
@@ -75,9 +73,6 @@ const App = () => {
     setLongi(geo.coords.longitude);
   }
 
-
-
-
   return (
     <AppCont>
        <LeftViewer 
@@ -101,8 +96,6 @@ const App = () => {
         pressure={pressure}
         visibility={visibility}
         degreeWind={degreeWind}
-
-
       />
     </AppCont>
 

diff --git a/src/components/DayWeatherCard.jsx b/src/components/DayWeatherCard.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import  {useImgSelector} from '../hooks/useImgSelector';
+import { useDateFormatted } from '../hooks/useDateFormatted';
 
 
 const Container = styled.div`
@@ -74,7 +75,7 @@ const Degree = styled.span`
     &.min{
         color: #E7E7EB;
     }
-
+    
     &.max{
         color: #A09FB1;
     }
@@ -83,25 +84,15 @@ 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 getDate = ()=>{
-    const day = data[0]?.dt_txt.split(' ')[0].split('-')[2]?.split('')[0] === '0'? data[0]?.dt_txt.split(' ')[0].split('-')[2].split('')[1] : data[0]?.dt_txt.split(' ')[0].split('-')[2];
-    const month = data[0]?.dt_txt.split(' ')[0].split('-')[1];
-    const days = [null, 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-    const months = [null, 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct','Nov', 'Dec'];
-    const today = new Date().getDay();
-    const cardDay = (today + Number(order))>7? (today + Number(order)) - 7 : (today + Number(order));
-    return order === '1' ? 'Tomorrow' : days[cardDay] + ', ' + day + ' ' + months[Number(month)];
-  }
+    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);
 
     return (
     <Container className={'_'+order}>
-        <TitleDay>{getDate()}</TitleDay>
+        <TitleDay>{date}</TitleDay>
         <DayImageContainer>
             <DayImage src={image} alt={description}/>
         </DayImageContainer>

diff --git a/src/components/LeftViewer.jsx b/src/components/LeftViewer.jsx
@@ -1,12 +1,8 @@
-
-//LeftViwer.jsx
 import React from 'react'
 import styled from 'styled-components';
 import LocationSearchView from './LocationSearchView';
 import  {useImgSelector} from '../hooks/useImgSelector';
-
-
-
+import { useDateFormatted } from '../hooks/useDateFormatted';
 
 
 const Container = styled.div`
@@ -73,7 +69,6 @@ const ButtonPlaces = styled.button`
     }
 `;
 
-
 const BtnText = styled.span`
   color: #e7e7eb;
   font-family: 'Raleway', sans-serif;
@@ -83,7 +78,6 @@ const BtnText = styled.span`
   
 `;
 
-
 const ButtonSearch = styled.div`
   width: 2.2rem;
   height: 2.2rem;
@@ -113,8 +107,6 @@ const ButtonSearch = styled.div`
 
 `;
 
-
-
 const WeatherImg = styled.img`
   width: 40%;
 `;
@@ -186,8 +178,6 @@ const WeatherDate = styled.span`
   height: 6vh;
 `;
 
-
-
 const WeatherLocation = styled.span`
   color: #88869D;
   font-family: Raleway;
@@ -216,10 +206,29 @@ const LocationIcon = styled.span`
 
 
 
-const LeftViewer =({ isSearchOpen, toggleSearchView, temp, descri, city, country, units, handleCityChange, handleGeoLocation}) => {
+const LeftViewer =({ 
+  isSearchOpen, 
+  toggleSearchView, 
+  temp, 
+  descri, 
+  city, 
+  country, 
+  units, 
+  handleCityChange, 
+  handleGeoLocation
+}) => {
 
 
   const [image] = useImgSelector(descri);
+  const date = useDateFormatted();
+
+  const temAdjust = () => {
+    if(units){
+      return (temp-273.15).toFixed(0);
+    }else{
+      return ((temp-273.15)*9/5+32).toFixed(0);
+    }
+  }
 
   const getGeoLocation = () => {
     if(!navigator.geolocation){
@@ -229,14 +238,11 @@ const LeftViewer =({ isSearchOpen, toggleSearchView, temp, descri, city, country
         handleGeoLocation(position);
       });
     }
-
   }
 
   return (
     <Container>
-
       <CloudsContainer/>
-
       <ButtomsContainer>
         <ButtonPlaces onClick={toggleSearchView}>
           <BtnText >
@@ -249,31 +255,26 @@ const LeftViewer =({ isSearchOpen, toggleSearchView, temp, descri, city, country
           </ButtonSearchIcon>        
         </ButtonSearch>
       </ButtomsContainer>
-
       <WeatherImgContainer>
         <WeatherImg src={image}/>
       </WeatherImgContainer>
-
       <WeatherContainerInfo>
-
         <WeatherText>
           <WeatherDeg>
-            {units?(temp-273.15).toFixed(0):((temp-273.15)*9/5+32).toFixed(0)}
+            {temAdjust()}
           </WeatherDeg>
           <WeatherDegType>
             {units?'°C':'°F'}
           </WeatherDegType>
         </WeatherText>
-
         <WeatherInfo>
           <WeatherInfoText>
           {descri}
           </WeatherInfoText>
         </WeatherInfo>
-
         <WeatherExtendInfo>
           <WeatherDate>
-            Today    •    Fri, 5 Jun
+            Today    •    {date}
           </WeatherDate>
           <WeatherLocation>
             <LocationIcon className="material-icons">
@@ -282,7 +283,6 @@ const LeftViewer =({ isSearchOpen, toggleSearchView, temp, descri, city, country
             {city},{' '+country} 
           </WeatherLocation>
       </WeatherExtendInfo>
-
       </WeatherContainerInfo>
       {isSearchOpen 
         && 

diff --git a/src/components/LocationSearchView.jsx b/src/components/LocationSearchView.jsx
@@ -242,20 +242,21 @@ const ListItem = styled.li`
 
 const CitiesGetter = (search, data) => {
 
-    if(!search.isEmpty){
-  const dataFormated = data?.map((city) => {
-    let cityFormated = city.name.toLowerCase();
-    cityFormated = cityFormated.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
-    return { ...city, name: cityFormated };
-  });
-
-  return dataFormated.filter((city) =>
-    city.name.includes(search.toLowerCase())
-  );
-}else{
+  if (!search.isEmpty) {
+    const dataFormatted = data?.map((city) => {
+      let cityFormatted = city.name.toLowerCase();
+      cityFormatted = cityFormatted.replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, "");
+      return { ...city, name: cityFormatted };
+    });
+
+    return dataFormatted.filter((city) =>
+      city.name.includes(search.toLowerCase())
+    );
+  } else {
     return [];
-}
-};
+  }
+
+  };
 
 
 

diff --git a/src/components/RightViewer.jsx b/src/components/RightViewer.jsx
@@ -293,7 +293,7 @@ const RightViewer = ({
         </CurrentHighlightsContainer>
         <FooterContainer>
             <FooterText>created by 
-                <UserLink href=""
+                <UserLink href="https://github.com/Bardolog1"
                     target="_blank"
                     rel="noopener noreferrer"
                 >Libardo Lozano</UserLink>