Add weather-forecast, airPollution API

@@ -16,6 +16,7 @@ function App() {
     setWeather(null);
     setForecast(null);
     setAir(null);
+    // TODO: settimeout for data fetch from openweather api?
     if (e.target.id === "weather") {
       const weatherData = await weatherService.getWeather(token);
       setWeather(weatherData);
@@ -35,8 +36,8 @@ function App() {
   return (
     <div>
       <Topbar />
-      <h1>Weather Page (home)</h1>
       <div className="weather-buttons">
+        <b>Types : </b>
         <button id="weather" onClick={(e) => handleData(e)}>
           Weather
         </button>
@@ -53,11 +54,12 @@ function App() {
       ) : (
         <div>
           <h2>
-            {weather.meta.city} ({weather.meta.country}) - {weather.description}
+            {weather.meta.city} ({weather.meta.country}){" "}
+            <small>UTC {weather.meta.timezone}</small>
           </h2>
-          <small>Time Zone : UTC {weather.meta.timezone}</small>
+          <h3>* {weather.description} *</h3>
           <p>
-            Temperature : {weather.temp.realCelcius} C / feels like{" "}
+            Temperature : {weather.temp.realCelcius} ℃ / feels like{" "}
             {weather.temp.feelCelcius} C
           </p>
           <p>Wind : {weather.types.wind} m/s</p>
@@ -67,6 +69,51 @@ function App() {
         </div>
       )}
 
+      {!forecast ? (
+        ""
+      ) : (
+        <div>
+          <h2>
+            {forecast.meta.city} ({forecast.meta.country}){" "}
+            <small>UTC {forecast.meta.timezone}</small>
+          </h2>
+
+          {forecast.forecast.map((item, index) => (
+            <div key={index} className="forecastItemBox">
+              <h3>
+                {item.description} <small>{item.dateTime}</small>
+              </h3>
+              <p>
+                Temperature : {item.temp.realCelcius} ℃ / feels like{" "}
+                {item.temp.feelCelcius} ℃
+              </p>
+              <p>Wind : {item.types.wind} m/s</p>
+              <p>Cloud : {item.types.clouds} %</p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!air ? (
+        ""
+      ) : (
+        <div>
+          <h2>
+            {air.meta.country} {air.meta.state ? air.meta.state : ""}
+          </h2>
+          <p>CO : {air.airData.co} μg/m3</p>
+          <p>NH3 : {air.airData.nh3} μg/m3</p>
+          <p>NO : {air.airData.no} μg/m3</p>
+          <p>NO2 : {air.airData.no2} μg/m3</p>
+          <p>O3 : {air.airData.o3} μg/m3</p>
+          <p>SO2 : {air.airData.so2} μg/m3</p>
+          <p>
+            {"pm2.5"} : {air.airData.pm2_5} μg/m3
+          </p>
+          <p>pm10 : {air.airData.pm10} μg/m3</p>
+        </div>
+      )}
+
       <Bottombar />
     </div>
   );

@@ -35,12 +35,83 @@ const getWeather = async (user) => {
   }
 };
 
-const getForecaset = async () => {
-  return;
+const getForecaset = async (user) => {
+  if (!user) {
+    return;
+  }
+  try {
+    const response = await axios.post(
+      "http://localhost:8080/api/weather/forecast"
+    );
+    const data = response.data;
+
+    const forecast = [];
+    for (let i = 0; i < data.list.length; i++) {
+      const singleData = {};
+      let singleItem = data.list[i];
+      singleData["dateTime"] = singleItem.dt_txt;
+      singleData["description"] = singleItem.weather[0].description;
+      singleData["temp"] = {
+        realCelcius: (singleItem.main.temp - 273.15).toFixed(2),
+        feelCelcius: (singleItem.main.feels_like - 273.15).toFixed(2),
+        realFer: ((singleItem.main.temp - 273.15) * 9) / 5 + 32,
+        feelFer: ((singleItem.main.feels_like - 273.15) * 9) / 5 + 32,
+      };
+      singleData["types"] = {
+        wind: singleItem.wind.speed,
+        clouds: singleItem.clouds.all,
+      };
+      forecast.push(singleData);
+    }
+
+    const formattedData = {
+      meta: {
+        country: data.city.country,
+        city: data.city.name,
+        timezone: data.city.timezone / 60 / 60,
+        sunrise: data.city.sunrise,
+        sunset: data.city.sunset,
+      },
+      forecast,
+    };
+    return formattedData;
+  } catch (err) {
+    console.log(err);
+  }
 };
 
-const getAirPollution = async () => {
-  return;
+const getAirPollution = async (user) => {
+  if (!user) {
+    return;
+  }
+  try {
+    const response = await axios.post(
+      "http://localhost:8080/api/weather/airpollution"
+    );
+    const dataObject = response.data;
+    const airData = dataObject.airPollutionData.list[0].components;
+
+    const formattedData = {
+      meta: {
+        country: dataObject.country,
+        state: dataObject.state ? dataObject.state : null,
+        coordinates: dataObject.airPollutionData.coord,
+      },
+      airData: {
+        co: airData.co,
+        nh3: airData.nh3,
+        no: airData.no,
+        no2: airData.no2,
+        o3: airData.o3,
+        pm2_5: airData.pm2_5,
+        pm10: airData.pm10,
+        so2: airData.so2,
+      },
+    };
+    return formattedData;
+  } catch (err) {
+    console.log(err);
+  }
 };
 
 const weatherService = {

@@ -32,3 +32,17 @@
     margin-right: 0.2rem;
   }
 }
+
+.forecastItemBox {
+  margin-bottom: 0.3rem;
+  padding: 0.1rem;
+  border: 2px gray solid;
+  border-radius: 4px;
+
+  p {
+    font-size: 0.9rem;
+  }
+  small {
+    font-size: 0.7rem;
+  }
+}

@@ -9,45 +9,99 @@ const asyncHandler = require("express-async-handler");
 // @access Public
 const getWeather = asyncHandler(async (req, res) => {
   const countryCode = "US";
-  const cityName = "los angeles";
+  const city = "los angeles";
   const limit = 5;
 
-  const metaGeoData = await axios.get(
-    `http://api.openweathermap.org/geo/1.0/direct?q=${cityName},${countryCode}&limit=${limit}&appid=${process.env.OPENWEATHER_API_KEY}`
-  );
-  const data = metaGeoData.data[0];
-  const geoData = {
-    lat: data.lat,
-    lon: data.lon,
-    country: data.country,
-    state: data.state,
-  };
-
-  const metaData = await axios.get(
-    `https://api.openweathermap.org/data/2.5/weather?lat=${geoData.lat}&lon=${geoData.lon}&appid=${process.env.OPENWEATHER_API_KEY}`
-  );
-  const weatherData = metaData.data;
-
-  res.json(weatherData);
+  try {
+    const metaGeoData = await axios.get(
+      `http://api.openweathermap.org/geo/1.0/direct?q=${city},${countryCode}&limit=${limit}&appid=${process.env.OPENWEATHER_API_KEY}`
+    );
+    const data = metaGeoData.data[0];
+    const geoData = {
+      lat: data.lat,
+      lon: data.lon,
+      country: data.country,
+      state: data.state,
+    };
+
+    const metaData = await axios.get(
+      `https://api.openweathermap.org/data/2.5/weather?lat=${geoData.lat}&lon=${geoData.lon}&appid=${process.env.OPENWEATHER_API_KEY}`
+    );
+    const weatherData = metaData.data;
+
+    res.json(weatherData);
+  } catch (err) {
+    res.status(400);
+    throw new Error("openweathermap API error");
+  }
 });
 
 // @desc Get weather forecast (3-hour Forecast 5 days)
 // @route GET /api/weather/forecast
 // @access Public
 const getForecast = asyncHandler(async (req, res) => {
-  const lat = 35;
-  const lon = 139;
-  const data = await axios.get(
-    `https://pro.openweathermap.org/data/2.5/forecast/hourly?lat=${lat}&lon=${lon}&appid=${process.env.OPENWEATHER_API_KEY2}`
-  );
-  console.log(data);
+  const countryCode = "KR";
+  const city = "seoul";
+  const limit = 5;
+
+  try {
+    const metaGeoData = await axios.get(
+      `http://api.openweathermap.org/geo/1.0/direct?q=${city},${countryCode}&limit=${limit}&appid=${process.env.OPENWEATHER_API_KEY}`
+    );
+    const data = metaGeoData.data[0];
+    const geoData = {
+      lat: data.lat,
+      lon: data.lon,
+      country: data.country,
+      state: data.state,
+    };
+
+    const metaData = await axios.get(
+      `http://api.openweathermap.org/data/2.5/forecast?lat=${geoData.lat}&lon=${geoData.lon}&appid=${process.env.OPENWEATHER_API_KEY}`
+    );
+    const forecastData = metaData.data;
+
+    res.json(forecastData);
+  } catch (err) {
+    res.status(400);
+    throw new Error("openweathermap API error");
+  }
 });
 
 // @desc Get air pollution (Air Pollution API)
 // @route GET /api/weather/airpollution
 // @access Public
 const getAirPollution = asyncHandler(async (req, res) => {
-  res.json({});
+  const countryCode = "US";
+  const city = "san francisco";
+  const limit = 5;
+
+  try {
+    const metaGeoData = await axios.get(
+      `http://api.openweathermap.org/geo/1.0/direct?q=${city},${countryCode}&limit=${limit}&appid=${process.env.OPENWEATHER_API_KEY}`
+    );
+    const data = metaGeoData.data[0];
+    const geoData = {
+      lat: data.lat,
+      lon: data.lon,
+      country: data.country,
+      state: data.state,
+    };
+
+    const metaData = await axios.get(
+      `http://api.openweathermap.org/data/2.5/air_pollution?lat=${geoData.lat}&lon=${geoData.lon}&appid=${process.env.OPENWEATHER_API_KEY}`
+    );
+    const airPollutionData = metaData.data;
+
+    res.json({
+      country: geoData.country,
+      state: geoData.state,
+      airPollutionData,
+    });
+  } catch (err) {
+    res.status(400);
+    throw new Error("openweathermap API error");
+  }
 });
 
 module.exports = {

@@ -8,7 +8,7 @@ const {
 
 // "/api/weather/"
 router.post("/", getWeather);
-router.get("/forecast", getForecast);
-router.get("/airpollution", getAirPollution);
+router.post("/forecast", getForecast);
+router.post("/airpollution", getAirPollution);
 
 module.exports = router;