Implemented aside section to hold the information received from the a…

…pi call

package.json

@@ -11,10 +11,12 @@
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
     "axios": "^0.21.1",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-loader-spinner": "^4.0.0",
+    "react-moment": "^1.1.1",
     "react-redux": "^7.2.4",
     "react-scripts": "4.0.3",
     "redux": "^4.1.0",

src/components/layouts/Aside.tsx

@@ -1,13 +1,18 @@
+import { Fragment } from "react";
+import Moment from "react-moment";
 import cloudBackground from "../../assets/Cloud-background.png";
 import { MdMyLocation, MdLocationOn } from "react-icons/md";
-import showerIcon from "../../assets/Shower.png";
+import { useTypedSelector } from "../hooks/useTypedSelector";
+import showWeatherImage from "./../showWeatherImage";
 
 interface Props {
   setOpenSearch: (openSearch: boolean) => void;
   openSearch: boolean;
 }
 
 const AsideContent: React.FC<Props> = ({ openSearch, setOpenSearch }) => {
+  const { weatherData } = useTypedSelector((state) => state.weather);
+
   return (
     <div className="aside__content">
       <img
@@ -23,24 +28,39 @@ const AsideContent: React.FC<Props> = ({ openSearch, setOpenSearch }) => {
           <MdMyLocation size={25} />
         </div>
       </div>
+
       <div className="aside__weather">
-        <img
-          src={showerIcon}
-          alt="Weather Icon"
-          className="aside__weather__icon"
-        />
-        <div className="aside__weather__description">
-          <h1 className="aside__weather__degree">
-            15<sup>o</sup>
-            <span>C</span>
-          </h1>
-          <h3 className="aside__weather__state">Shower</h3>
-          <p className="aside__weather__date">Today - Fri Jun 5</p>
-          <div className="aside__weather__location">
-            <MdLocationOn size={15} />
-            <p>Helsinki</p>
-          </div>
-        </div>
+        {weatherData && (
+          <Fragment>
+            <img
+              src={showWeatherImage(
+                weatherData.consolidated_weather[0].weather_state_abbr
+              )}
+              alt="Weather Icon"
+              className="aside__weather__icon"
+            />
+            <div className="aside__weather__description">
+              <h1 className="aside__weather__degree">
+                {Math.ceil(weatherData.consolidated_weather[0].the_temp)}
+                <sup>o</sup>
+                <span>C</span>
+              </h1>
+              <h3 className="aside__weather__state">
+                {weatherData.consolidated_weather[0].weather_state_name}
+              </h3>
+              <p className="aside__weather__date">
+                Today -{" "}
+                <Moment format="ddd, D MMM">
+                  {weatherData.consolidated_weather[0].applicable_date}
+                </Moment>
+              </p>
+              <div className="aside__weather__location">
+                <MdLocationOn size={15} />
+                <p>{weatherData.title}</p>
+              </div>
+            </div>
+          </Fragment>
+        )}
       </div>
     </div>
   );

src/components/showWeatherImage.ts

@@ -0,0 +1,39 @@
+import clear from "../assets/Clear.png";
+import hail from "../assets/Hail.png";
+import heavyCloud from "../assets/HeavyCloud.png";
+import lightCloud from "../assets/LightCloud.png";
+import heavyRain from "../assets/HeavyRain.png";
+import lightRain from "../assets/LightRain.png";
+import shower from "../assets/Shower.png";
+import sleet from "../assets/Sleet.png";
+import snow from "../assets/Snow.png";
+import thunderstorm from "../assets/Thunderstorm.png";
+
+const showWeatherImage = (image: string) => {
+  switch (image) {
+    case "sn":
+      return snow;
+    case "sl":
+      return sleet;
+    case "h":
+      return hail;
+    case "t":
+      return thunderstorm;
+    case "hr":
+      return heavyRain;
+    case "lr":
+      return lightRain;
+    case "s":
+      return shower;
+    case "hc":
+      return heavyCloud;
+    case "lc":
+      return lightCloud;
+    case "c":
+      return clear;
+    default:
+      return clear;
+  }
+};
+
+export default showWeatherImage;