Connect weather APIs to user info

@@ -49,6 +49,8 @@ function App() {
         </button>
       </div>
 
+      <hr></hr>
+
       {!weather ? (
         ""
       ) : (
@@ -59,13 +61,13 @@ function App() {
           </h2>
           <h3>* {weather.description} *</h3>
           <p>
-            Temperature : {weather.temp.realCelcius} ℃ / feels like{" "}
+            🌡 : {weather.temp.realCelcius} ℃ / feels like{" "}
             {weather.temp.feelCelcius} C
           </p>
-          <p>Wind : {weather.types.wind} m/s</p>
-          <p>Cloud : {weather.types.clouds} %</p>
-          <p>{weather.rain ? "rain : Yes" : "rain : No"}</p>
-          <p>{weather.snow ? "snow : Yes" : "snow : No"}</p>
+          <p>🌬 : {weather.types.wind} m/s</p>
+          <p>☁️ : {weather.types.clouds} %</p>
+          <p>{weather.rain ? "☔️ : Yes" : "☔️ : No"}</p>
+          <p>{weather.snow ? "❄️ : Yes" : "❄️ : No"}</p>
         </div>
       )}
 
@@ -99,7 +101,7 @@ function App() {
       ) : (
         <div>
           <h2>
-            {air.meta.country} {air.meta.state ? air.meta.state : ""}
+            {air.meta.state ? air.meta.state : ""} {air.meta.country}
           </h2>
           <p>CO : {air.airData.co} μg/m3</p>
           <p>NH3 : {air.airData.nh3} μg/m3</p>

@@ -5,7 +5,10 @@ const getWeather = async (user) => {
     return;
   }
   try {
-    const response = await axios.post("http://localhost:8080/api/weather");
+    const userToken = JSON.parse(sessionStorage.getItem("user-token"));
+    const response = await axios.post("http://localhost:8080/api/weather", {
+      token: userToken.token,
+    });
     const data = response.data;
     const formattedData = {
       meta: {
@@ -40,8 +43,10 @@ const getForecaset = async (user) => {
     return;
   }
   try {
+    const userToken = JSON.parse(sessionStorage.getItem("user-token"));
     const response = await axios.post(
-      "http://localhost:8080/api/weather/forecast"
+      "http://localhost:8080/api/weather/forecast",
+      { token: userToken.token }
     );
     const data = response.data;
 
@@ -85,8 +90,10 @@ const getAirPollution = async (user) => {
     return;
   }
   try {
+    const userToken = JSON.parse(sessionStorage.getItem("user-token"));
     const response = await axios.post(
-      "http://localhost:8080/api/weather/airpollution"
+      "http://localhost:8080/api/weather/airpollution",
+      { token: userToken.token }
     );
     const dataObject = response.data;
     const airData = dataObject.airPollutionData.list[0].components;

 * {
   margin: 0;
   padding: 0;
+  background-color: #FFDEAD;
 }
 
 .container {
@@ -46,3 +47,8 @@
     font-size: 0.7rem;
   }
 }
+
+hr {
+  margin-top: 0.5rem;
+  margin-bottom: 0.3rem;
+}

 const bcrypt = require("bcryptjs");
+const jwt = require("jsonwebtoken");
 const axios = require("axios").default;
 const User = require("../models/userModel");
 // handles "exception" inside of async express routes
@@ -8,10 +9,16 @@ const asyncHandler = require("express-async-handler");
 // @route Get /api/weather
 // @access Public
 const getWeather = asyncHandler(async (req, res) => {
-  const countryCode = "US";
-  const city = "los angeles";
-  const limit = 5;
+  const token = req.body.token;
+  const decoded = jwt.decode(token, { complete: true });
+  const user = await User.findById(decoded.payload.id)
+    .select("-password")
+    .select("-email");
+
+  const countryCode = user.country;
+  const city = user.city;
 
+  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}`
@@ -40,10 +47,16 @@ const getWeather = asyncHandler(async (req, res) => {
 // @route GET /api/weather/forecast
 // @access Public
 const getForecast = asyncHandler(async (req, res) => {
-  const countryCode = "KR";
-  const city = "seoul";
-  const limit = 5;
+  const token = req.body.token;
+  const decoded = jwt.decode(token, { complete: true });
+  const user = await User.findById(decoded.payload.id)
+    .select("-password")
+    .select("-email");
+
+  const countryCode = user.country;
+  const city = user.city;
 
+  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}`
@@ -72,10 +85,16 @@ const getForecast = asyncHandler(async (req, res) => {
 // @route GET /api/weather/airpollution
 // @access Public
 const getAirPollution = asyncHandler(async (req, res) => {
-  const countryCode = "US";
-  const city = "san francisco";
-  const limit = 5;
+  const token = req.body.token;
+  const decoded = jwt.decode(token, { complete: true });
+  const user = await User.findById(decoded.payload.id)
+    .select("-password")
+    .select("-email");
 
+  const countryCode = user.country;
+  const city = user.city;
+
+  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}`