Fetching and mapping data from weather API

Author: zntb

src/App.js

@@ -1,16 +1,44 @@
+import { useState } from 'react';
+
 import './App.css';
 import CurrentWeather from './components/current-weather/CurrentWeather';
 import Search from './components/search/Search';
+import { WEATHER_API_URL, WEATHER_API_KEY } from './api';
 
 function App() {
+  const [currentWeather, setCurrrentWeather] = useState(null);
+  const [forecast, setForecast] = useState(null);
+
   const handleOnSearchChange = (searchData) => {
-    console.log(searchData);
+    const [lat, lon] = searchData.value.split(' ');
+
+    const currentWeatherFetch = fetch(
+      `${WEATHER_API_URL}/weather?lat=${lat}&lon=${lon}&appid=${WEATHER_API_KEY}&units=metric`
+    );
+    const forecastFetch = fetch(
+      `${WEATHER_API_URL}/forecast?lat=${lat}&lon=${lon}&appid=${WEATHER_API_KEY}&units=metric`
+    );
+
+    Promise.all([currentWeatherFetch, forecastFetch])
+      .then(async (response) => {
+        const weatherResponse = await response[0].json();
+        const forecastResponse = await response[1].json();
+
+        setCurrrentWeather({ city: searchData.label, ...weatherResponse });
+        setForecast({ city: searchData.label, ...forecastResponse });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
   };
 
+  console.log(currentWeather);
+  console.log(forecast);
+
   return (
     <div className="container">
       <Search onSearchChange={handleOnSearchChange} />
-      <CurrentWeather />
+      {currentWeather && <CurrentWeather data={currentWeather} />}
     </div>
   );
 }

src/api.js

@@ -9,3 +9,6 @@ export const geoApiOptions = {
 };
 
 export const GEO_API_URL = 'https://wft-geo-db.p.rapidapi.com/v1/geo';
+
+export const WEATHER_API_URL = 'https://api.openweathermap.org/data/2.5';
+export const WEATHER_API_KEY = process.env.REACT_APP_WEATHER_KEY;

src/components/current-weather/CurrentWeather.js

@@ -1,36 +1,42 @@
 import './current-weather.css';
 
-const CurrentWeather = () => {
+const CurrentWeather = ({ data }) => {
   return (
     <div className="weather">
       <div className="top">
         <div>
-          <p className="city">CITY</p>
-          <p className="weather-description">DESCRIPTION</p>
+          <p className="city">{data.city}</p>
+          <p className="weather-description">{data.weather[0].description}</p>
         </div>
-        <img className="weather-icon" src="icons/01d.png" alt="weather" />
+        <img
+          className="weather-icon"
+          src={`icons/${data.weather[0].icon}.png`}
+          alt="weather"
+        />
       </div>
       <div className="bottom">
-        <p className="temperature">18°C</p>
+        <p className="temperature">{Math.round(data.main.temp)}°C</p>
         <div className="details">
           <div className="parameter-row">
             <span className="parameter-label">Details:</span>
           </div>
           <div className="parameter-row">
             <span className="parameter-label">Feels like</span>
-            <span className="parameter-value">22°C</span>
+            <span className="parameter-value">
+              {Math.round(data.main.temp)}°C
+            </span>
           </div>
           <div className="parameter-row">
             <span className="parameter-label">Wind</span>
-            <span className="parameter-value">2 m/s</span>
+            <span className="parameter-value">{data.wind.speed} m/s</span>
           </div>
           <div className="parameter-row">
             <span className="parameter-label">Humidity</span>
-            <span className="parameter-value">15%</span>
+            <span className="parameter-value">{data.main.humidity}%</span>
           </div>
           <div className="parameter-row">
             <span className="parameter-label">Pressure</span>
-            <span className="parameter-value">15 hPa</span>
+            <span className="parameter-value">{data.main.pressure} hPa</span>
           </div>
         </div>
       </div>

src/components/current-weather/current-weather.css

@@ -60,6 +60,7 @@
 }
 
 .parameter-value {
+  margin-right: 5px;
   text-align: right;
   font-weight: 600;
   font-size: 12px;