From 758ae54b41306fc3a92e66ad06ba5710b55bc049 Mon Sep 17 00:00:00 2001
From: elminhoemmanuel <amodue15@gmail.com>
Date: Wed, 20 Oct 2021 05:10:09 -0700
Subject: [PATCH] finished working on all user stories

---
 components/LeftView.js             | 78 +++++++++++++++++++++++++-----
 components/PrimaryBtn.js           |  2 +-
 components/RightView.js            | 78 +++++++++++++++++++-----------
 components/SideBar.js              | 43 ++++++++++++----
 components/SmallWeatherCard.js     | 59 ++++++++++++++++++++--
 package-lock.json                  | 55 +++++++++++++++++++++
 package.json                       |  2 +
 pages/index.js                     | 63 ++++++++++++++++++------
 redux/actions/fetch.js             | 24 +++++++++
 redux/actions/search.js            | 47 ++++++++++++++++++
 redux/actions/types.js             | 23 ++++++++-
 redux/reducers/CombinedReducers.js |  4 +-
 redux/reducers/fetch.js            | 60 +++++++++++++++++++++++
 redux/reducers/search.js           | 48 ++++++++++++++++--
 styles/globals.scss                | 39 ++++++++-------
 15 files changed, 532 insertions(+), 93 deletions(-)
 create mode 100644 redux/actions/fetch.js
 create mode 100644 redux/reducers/fetch.js

diff --git a/components/LeftView.js b/components/LeftView.js
index b69f443..c75ecfa 100644
--- a/components/LeftView.js
+++ b/components/LeftView.js
@@ -1,13 +1,58 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import PrimaryBtn from './PrimaryBtn'
 import { IoMdLocate } from "react-icons/io"
+import { MdLocationPin } from "react-icons/md"
 import RoundBtn from './RoundBtn'
 import { useDispatch, useSelector } from 'react-redux'
 import { TOGGLE_SEARCH } from "../redux/actions/types"
+import moment from "moment"
 
 const LeftView = () => {
 
     const dispatch = useDispatch()
+    const { details, error, loading, unit } = useSelector((state) => state.fetch);
+    const weathers = details.consolidated_weather
+    const celToFah = celsius => celsius * 9 / 5 + 32;
+    const getCorrectImg = (symbol) => {
+        switch (symbol) {
+            case "s":
+                return "/images/Shower.png"
+
+            case "c":
+                return "/images/Clear.png"
+
+            case "lc":
+                return "/images/LightCloud.png"
+
+            case "hc":
+                return "/images/HeavyCloud.png"
+
+            case "lr":
+                return "/images/LightRain.png"
+
+            case "hr":
+                return "/images/HeavyRain.png"
+
+            case "t":
+                return "/images/Thunderstorm.png"
+
+            case "h":
+                return "/images/Hail.png"
+
+            case "sl":
+                return "/images/Sleet.png"
+
+            case "sn":
+                return "/images/Snow.png"
+
+            default:
+                break;
+        }
+    }
+
+    // useEffect(() => {
+    //     setWeathers(details.consolidated_weather);
+    // }, [weathers])
 
     return (
         <div className="w-full h-full pt-6 pb-8 px-6 weatherbox relative">
@@ -18,8 +63,8 @@ const LeftView = () => {
             <div className="flex items-center justify-between mb-4">
                 <PrimaryBtn
                     btnText="Search for places"
-                    addStyle="bg-bgbtn text-maytext hover:bg-gray-600"
-                    clicked={() => { dispatch({type:TOGGLE_SEARCH}) }}
+                    addStyle="block bg-bgbtn text-maytext hover:bg-gray-600 px-4 py-2"
+                    clicked={() => { dispatch({ type: TOGGLE_SEARCH }) }}
                 />
 
                 <RoundBtn
@@ -31,20 +76,31 @@ const LeftView = () => {
 
             <div className="flex items-center justify-center flex-col ">
                 <div className="py-10">
-                    <img className="block h-38 w-38" src="/images/Shower.png" alt="main weather image" />
+                    <img className="block h-38 w-38" src={getCorrectImg(weathers[0].weather_state_abbr)} alt="main weather image" />
                 </div>
 
-                <h1 className="pb-6">
-                    <span className="font-bold text-6xl text-maytext">15</span>
-                    <span className="text-3xl text-maytext">°C</span>
-                </h1>
+                {
+                    unit === "cel" &&
+                    <h1 className="pb-6">
+                        <span className="font-bold text-6xl text-maytext">{Math.round(weathers[0].the_temp)}</span>
+                        <span className="text-3xl text-maytext">°C</span>
+                    </h1>
+                }
+
+                {
+                    unit === "fah" &&
+                    <h1 className="pb-6">
+                        <span className="font-bold text-6xl text-maytext">{Math.round(celToFah(weathers[0].the_temp))}</span>
+                        <span className="text-3xl text-maytext">°F</span>
+                    </h1>
+                }
 
                 <h1 className="pb-6">
-                    <span className="font-bold text-2xl text-textleft">Shower</span>
+                    <span className="font-bold text-2xl text-textleft">{weathers[0].weather_state_name}</span>
                 </h1>
 
-                <p className="text-textleft text-sm pb-4">Today - Fri, 5 Jun</p>
-                <p className="text-textleft text-sm">Helsinki</p>
+                <p className="text-textleft text-sm pb-4">Today - {moment(weathers[0].applicable_date).format("ddd, D MMM")}</p>
+                <div className="text-textleft text-sm flex items-center"><MdLocationPin className="inline h-5 w-5 mr-1" /> <p className="pt-1">{details.title}</p></div>
 
             </div>
         </div>
diff --git a/components/PrimaryBtn.js b/components/PrimaryBtn.js
index 2481004..473168c 100644
--- a/components/PrimaryBtn.js
+++ b/components/PrimaryBtn.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const PrimaryBtn = ({ btnText , clicked, addStyle}) => {
     return (
-        <button onClick={clicked} className={`focus:outline-none text-sm block shadow p-2 ${addStyle}`}>
+        <button onClick={clicked} className={`focus:outline-none text-sm shadow ${addStyle}`}>
             {btnText}
         </button>
     )
diff --git a/components/RightView.js b/components/RightView.js
index 4d62120..dd9167c 100644
--- a/components/RightView.js
+++ b/components/RightView.js
@@ -1,33 +1,55 @@
-import React from 'react'
+import React, { useEffect } from "react"
 import RoundBtn from './RoundBtn'
-import { fivedays } from './Data'
 import SmallWeatherCard from './SmallWeatherCard'
 import ProgressBar from './ProgressBar'
 import { BsFillPlayFill } from "react-icons/bs"
 import Link from "next/link"
-import NextNprogress from 'nextjs-progressbar';
+import { useDispatch, useSelector } from 'react-redux'
+import { SET_UNIT } from "../redux/actions/types"
+
 
 const RightView = () => {
+
+    const dispatch = useDispatch()
+    const { details, unit } = useSelector((state) => state.fetch);
+    const weathers = details.consolidated_weather
+
     return (
         <div className="px-6 md:px-12 lg:px-24 pt-6 pb-8 text-maytext">
             <div className="flex justify-end items-center mb-6">
-                <RoundBtn
-                    btnText={<span className="h-5 w-5">°C</span>}
-                    addStyle="h-10 w-10 mr-2 text-black hover:text-white bg-gray-300 hover:bg-gray-600"
-                    clicked={() => { }}
-                />
-
-                <RoundBtn
-                    btnText={<span className="h-5 w-5">°F</span>}
-                    addStyle="h-10 w-10 bg-bgbtn hover:bg-gray-600 text-maytext"
-                    clicked={() => { }}
-                />
+                {
+                    unit === "cel" ?
+                        <RoundBtn
+                            btnText={<span className="h-5 w-5">°C</span>}
+                            addStyle="mr-2 h-10 w-10 bg-gray-400 hover:bg-gray-400 hover:text-white text-white"
+                            clicked={() => { dispatch({ type: SET_UNIT, payload: "cel" }) }}
+                        /> :
+                        <RoundBtn
+                            btnText={<span className="h-5 w-5">°C</span>}
+                            addStyle="mr-2 h-10 w-10 bg-gray-600 hover:bg-gray-400 hover:text-white text-maytext"
+                            clicked={() => { dispatch({ type: SET_UNIT, payload: "cel" }) }}
+                        />
+                }
+
+                {
+                    unit === "fah" ?
+                        <RoundBtn
+                            btnText={<span className="h-5 w-5">°F</span>}
+                            addStyle="h-10 w-10 bg-gray-400 hover:bg-gray-400 hover:text-white text-white"
+                            clicked={() => { dispatch({ type: SET_UNIT, payload: "fah" }) }}
+                        /> :
+                        <RoundBtn
+                            btnText={<span className="h-5 w-5">°F</span>}
+                            addStyle="h-10 w-10 bg-gray-600 hover:bg-gray-400 hover:text-white text-maytext"
+                            clicked={() => { dispatch({ type: SET_UNIT, payload: "fah" }) }}
+                        />
+                }
             </div>
 
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-10">
                 {
-                    fivedays.map(item => (
-                        <SmallWeatherCard item={item} key={item.id} />
+                    weathers.filter((item, i) => i > 0).map((item, j) => (
+                        <SmallWeatherCard item={item} key={item.id} count={j + 1} />
                     ))
                 }
             </div>
@@ -42,8 +64,8 @@ const RightView = () => {
                         <p className="text-sm">Wind status</p>
 
                         <h1 className="py-5">
-                            <span className="font-bold text-4xl text-maytext">7</span>
-                            <span className="text-2xl text-maytext">mph</span>
+                            <span className="font-bold text-4xl text-maytext">{Math.round(weathers[0].wind_speed)}</span>
+                            <span className="text-2xl text-maytext"> mph</span>
                         </h1>
 
                         <div className="flex items-center">
@@ -52,7 +74,7 @@ const RightView = () => {
                                 addStyle="mr-2 pointer:events-none h-7 w-7 bg-bgbtn hover:bg-gray-600 text-maytext"
                                 clicked={() => { }}
                             />
-                            <p className="text-xs">WSW</p>
+                            <p className="text-xs">{weathers[0].wind_direction_compass}</p>
                         </div>
                     </div>
 
@@ -61,8 +83,8 @@ const RightView = () => {
                         <p className="text-sm">Humidity</p>
 
                         <h1 className="py-5">
-                            <span className="font-bold text-4xl text-maytext">84</span>
-                            <span className="text-2xl text-maytext">%</span>
+                            <span className="font-bold text-4xl text-maytext">{weathers[0].humidity}</span>
+                            <span className="text-2xl text-maytext"> %</span>
                         </h1>
 
                         <div className="">
@@ -71,8 +93,8 @@ const RightView = () => {
                                 <span className="absolute top-0 left-1/2 text-xs">50</span>
                                 <span className="absolute top-0 right-0 text-xs">100</span>
                             </div>
-                            <ProgressBar bgcolor="#FFEC65" completed={84} />
-                            
+                            <ProgressBar bgcolor="#FFEC65" completed={weathers[0].humidity} />
+
                             <div className="relative w-full p-2">
                                 <span className="absolute top-0 right-0 text-xs">%</span>
                             </div>
@@ -84,8 +106,8 @@ const RightView = () => {
                         <p className="text-sm">Visibility</p>
 
                         <h1 className="py-5">
-                            <span className="font-bold text-4xl text-maytext">6,4</span>
-                            <span className="text-2xl text-maytext">miles</span>
+                            <span className="font-bold text-4xl text-maytext">{Math.round(weathers[0].visibility)}</span>
+                            <span className="text-2xl text-maytext"> miles</span>
                         </h1>
                     </div>
 
@@ -94,13 +116,13 @@ const RightView = () => {
                         <p className="text-sm">Air Pressure</p>
 
                         <h1 className="py-5">
-                            <span className="font-bold text-4xl text-maytext">998</span>
-                            <span className="text-2xl text-maytext">mb</span>
+                            <span className="font-bold text-4xl text-maytext">{Math.round(weathers[0].visibility)}</span>
+                            <span className="text-2xl text-maytext"> mb</span>
                         </h1>
                     </div>
                 </div>
 
-                <p className="text-sm text-center">Coded by <Link href="https://github.com/elminhoemmanuel"><a className="font-bold">elminhoemmanuel</a></Link></p>
+                <p className="text-sm text-center">Coded by <Link href="https://github.com/elminhoemmanuel"><a target="_blank" className="font-bold">elminhoemmanuel</a></Link></p>
             </div>
 
         </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index 8b70036..36ccdc0 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -1,19 +1,31 @@
-import React, {useState} from 'react'
+import React, { useState, useEffect} from 'react'
 import RoundBtn from './RoundBtn'
 import { AiOutlineClose, AiOutlineSearch, AiOutlineRight } from "react-icons/ai"
 import { useDispatch, useSelector } from 'react-redux'
-import { TOGGLE_SEARCH } from "../redux/actions/types"
+import { TOGGLE_SEARCH, RESET_ERROR_SEARCH, RESET_NOT_FOUND } from "../redux/actions/types"
+import { search } from "../redux/actions/search"
 import PrimaryBtn from './PrimaryBtn'
 
 const SideBar = () => {
 
+    const [searchValue, setSearchValue] = useState("")
     const dispatch = useDispatch()
+    const { loadingSearch, errorSearch, notFound } = useSelector((state) => state.search);
     const [showIcon, setShowIcon] = useState({
         first:false,
         second:false,
         third:false,
     })
 
+    const handleSearch = (fieldValue) => {
+        dispatch(search(fieldValue));
+    }
+
+    useEffect(() => {
+        dispatch({type:RESET_ERROR_SEARCH});
+        dispatch({type:RESET_NOT_FOUND});
+    }, [])
+
     return (
         <div className="slide-in-left fixed top-0 left-0 z-40 bg-bggray pt-6 pb-8 px-6 h-screen 
         w-screen md:w-72 lg:w-80 text-maytext">
@@ -25,9 +37,11 @@ const SideBar = () => {
                 />
             </div>
 
-            <div className="grid grid-cols-6 gap-2 mb-10">
+            <div className="grid grid-cols-6 gap-2 mb-1">
                 <div className="relative col-span-4">
                     <input
+                        value={searchValue}
+                        onChange={(e) =>{setSearchValue(e.target.value)}}
                         type="text"
                         placeholder="search location"
                         className="w-full pl-8 py-2 pr-2 bg-transparent text-inputtext placeholder-inputtext border border-gray-500 focus:outline-none text-sm"
@@ -37,15 +51,24 @@ const SideBar = () => {
 
                 <div className="col-span-2">
                     <PrimaryBtn
-                        btnText="Search"
-                        addStyle="w-full bg-btnblue text-white border border-btnblue hover:border-blue-800 hover:bg-blue-800"
-                        clicked={() => {  }}
+                        btnText={ 
+                            loadingSearch ? 
+                            <div className="spinner-white"></div> 
+                            : 
+                            "Search"
+                        }
+                        addStyle="p-2 flex items-center justify-center w-full bg-btnblue text-white border border-btnblue hover:border-blue-800 hover:bg-blue-800"
+                        clicked={() => { handleSearch(searchValue) }}
                     />
                 </div>
             </div>
+            { errorSearch !=="" && <p className="mb-10 text-red-500 text-xs">Something went wrong, try again</p>}
+            { notFound && <p className="mb-10 text-red-500 text-xs">No data found for that location</p>}
+
 
             <div>
-                <button onMouseOver={() =>{setShowIcon({ ...showIcon, first:!showIcon.first })}} 
+                <button onClick={()=>{dispatch(search("london"));}}
+                onMouseOver={() =>{setShowIcon({ ...showIcon, first:!showIcon.first })}} 
                 onMouseOut={() =>{setShowIcon({ ...showIcon, first:!showIcon.first })}}
                 className="focus:outline-none text-sm bg-transparent p-3 flex mb-4
                  items-center justify-between w-full text-maytext border border-transparent
@@ -54,7 +77,8 @@ const SideBar = () => {
                     { showIcon.first && <AiOutlineRight className="h-4 w-4" />}
                 </button>
 
-                <button onMouseOver={() =>{setShowIcon({ ...showIcon, second:!showIcon.second })}} 
+                <button onClick={()=>{dispatch(search("barcelona"));}}
+                onMouseOver={() =>{setShowIcon({ ...showIcon, second:!showIcon.second })}} 
                 onMouseOut={() =>{setShowIcon({ ...showIcon, second:!showIcon.second })}}
                 className="focus:outline-none text-sm bg-transparent p-3 flex mb-4
                  items-center justify-between w-full text-maytext border border-transparent
@@ -63,7 +87,8 @@ const SideBar = () => {
                     { showIcon.second && <AiOutlineRight className="h-4 w-4" />}
                 </button>
 
-                <button onMouseOver={() =>{setShowIcon({ ...showIcon, third:!showIcon.third })}} 
+                <button onClick={()=>{dispatch(search("long beach"));}}
+                onMouseOver={() =>{setShowIcon({ ...showIcon, third:!showIcon.third })}} 
                 onMouseOut={() =>{setShowIcon({ ...showIcon, third:!showIcon.third })}}
                 className="focus:outline-none text-sm bg-transparent p-3 flex mb-4
                  items-center justify-between w-full text-maytext border border-transparent
diff --git a/components/SmallWeatherCard.js b/components/SmallWeatherCard.js
index 84f9ccb..448b56d 100644
--- a/components/SmallWeatherCard.js
+++ b/components/SmallWeatherCard.js
@@ -1,17 +1,66 @@
 import React from 'react'
+import moment from "moment"
+import { useDispatch, useSelector } from 'react-redux'
+
+const SmallWeatherCard = ({ item, count }) => {
+
+    const { unit } = useSelector((state) => state.fetch);
+    const celToFah = celsius => celsius * 9/5 + 32;
+    const getCorrectImg = (symbol) => {
+        switch (symbol) {
+            case "s":
+                return "/images/Shower.png"
+
+            case "c":
+                return "/images/Clear.png"
+
+            case "lc":
+                return "/images/LightCloud.png"
+
+            case "hc":
+                return "/images/HeavyCloud.png"
+
+            case "lr":
+                return "/images/LightRain.png"
+
+            case "hr":
+                return "/images/HeavyRain.png"
+
+            case "t":
+                return "/images/Thunderstorm.png"
+
+            case "h":
+                return "/images/Hail.png"
+
+            case "sl":
+                return "/images/Sleet.png"
+
+            case "sn":
+                return "/images/Snow.png"
+
+            default:
+                break;
+        }
+    }
 
-const SmallWeatherCard = ({ item }) => {
     return (
         <div className="shadow-md bg-bggray text-maytext h-42 p-5 flex items-center justify-center flex-col">
-            <p className="text-sm">{item.day}</p>
+            { count === 1 ? <p className="text-sm">Tommorrow</p> : 
+                <p className="text-sm">
+                    {moment(item.applicable_date).format("ddd, D MMM")}
+                </p>
+            }
 
             <div className="py-6 flex items-center justify-center">
-                <div><img className="h-12 w-12" src={item.pic} alt="weather image" /></div>
+                <div><img className="h-12 w-12" src={getCorrectImg(item.weather_state_abbr)} alt="weather image" /></div>
             </div>
 
             <div className="flex items-center justify-between">
-                <p className="text-sm">{item.max}°C&nbsp;&nbsp;&nbsp;&nbsp;</p>
-                <p className="text-sm">&nbsp;&nbsp;&nbsp;&nbsp;{item.min}°C</p>
+                { unit === "cel" && <p className="text-sm">{Math.round(item.max_temp)}°C&nbsp;&nbsp;&nbsp;&nbsp;</p> }
+                { unit === "fah" && <p className="text-sm">{Math.round(celToFah(item.max_temp))}°F&nbsp;&nbsp;&nbsp;&nbsp;</p> }
+
+                { unit === "cel" && <p className="text-sm">&nbsp;&nbsp;&nbsp;&nbsp;{Math.round(item.min_temp)}°C</p>}
+                { unit === "fah" && <p className="text-sm">&nbsp;&nbsp;&nbsp;&nbsp;{Math.round(celToFah(item.min_temp))}°F</p>}
             </div>
 
         </div>
diff --git a/package-lock.json b/package-lock.json
index f9b341b..83e4639 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "apexcharts": "^3.29.0",
+        "axios": "^0.23.0",
         "babel-plugin-import": "^1.13.3",
+        "moment": "^2.29.1",
         "next": "11.1.2",
         "next-redux-wrapper": "^7.0.5",
         "nextjs-progressbar": "^0.0.11",
@@ -1941,6 +1943,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.23.0.tgz",
+      "integrity": "sha512-NmvAE4i0YAv5cKq8zlDoPd1VLKAqX5oLuZKs8xkJa4qi6RGn0uhCYFjWtHHC9EM/MwOwYWOs53W+V0aqEXq1sg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -3862,6 +3872,25 @@
       "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
+      "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreach": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@@ -5473,6 +5502,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -11095,6 +11132,14 @@
       "integrity": "sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.23.0.tgz",
+      "integrity": "sha512-NmvAE4i0YAv5cKq8zlDoPd1VLKAqX5oLuZKs8xkJa4qi6RGn0uhCYFjWtHHC9EM/MwOwYWOs53W+V0aqEXq1sg==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -12639,6 +12684,11 @@
       "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
       "dev": true
     },
+    "follow-redirects": {
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
+      "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g=="
+    },
     "foreach": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@@ -13872,6 +13922,11 @@
       "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
       "dev": true
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
diff --git a/package.json b/package.json
index 68602fd..6942e77 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "apexcharts": "^3.29.0",
+    "axios": "^0.23.0",
     "babel-plugin-import": "^1.13.3",
+    "moment": "^2.29.1",
     "next": "11.1.2",
     "next-redux-wrapper": "^7.0.5",
     "nextjs-progressbar": "^0.0.11",
diff --git a/pages/index.js b/pages/index.js
index 935c6b6..3ae964b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,21 +1,25 @@
-import React , {useEffect} from "react"
+import React, { useEffect } from "react"
 import Head from 'next/head'
 import Image from 'next/image'
 import LeftView from '../components/LeftView'
 import RightView from '../components/RightView'
 import SideBar from '../components/SideBar'
 import { useDispatch, useSelector } from 'react-redux'
-import { SET_SEARCH } from '../redux/actions/types'
+import { SET_SEARCH, RESET_DETAILS, SET_UNIT } from '../redux/actions/types'
+import { fetchDefault } from '../redux/actions/fetch'
 
 
 export default function Home() {
 
   const { showSearch } = useSelector(state => state.search)
+  const { details, error, loading } = useSelector((state) => state.fetch);
   const dispatch = useDispatch()
-  console.log(showSearch);
 
   useEffect(() => {
+    dispatch({ type: RESET_DETAILS })
     dispatch({ type: SET_SEARCH })
+    dispatch({ type: SET_UNIT, payload:"cel" })
+    dispatch(fetchDefault());
   }, [])
 
   return (
@@ -26,22 +30,53 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <div className="relative ml-0 md:ml-72 lg:ml-80">
+      <div className={error === "" ? "relative ml-0 md:ml-72 lg:ml-80" : "ml-0 relative"}>
 
-        {/* left slider search box */}
-        { showSearch && <SideBar />}
+        {/* For when data is fetched successfully */}
+        <div>
+          {
+            loading ?
+              <div className='fixed top-0 left-0 w-screen h-screen flex items-center justify-center'>
+                <div className='spinner-page'></div>
+              </div> :
 
-        {/* left bar on homepgae */}
-        <div className="relative md:fixed top-0 left-0 md:w-72 lg:w-80 h-auto md:h-screen bg-bggray z-10">
-          <LeftView />
-        </div>
+              <div>
+                {
+                  error === "" ?
+
+                    <div>
+                        {/* left slider search box */}
+                        {showSearch && <SideBar />}
+
+                        {/* left bar on homepgae */}
+                        <div className="relative md:fixed top-0 left-0 md:w-72 lg:w-80 h-auto md:h-screen bg-bggray z-10">
+                          <LeftView />
+                        </div>
+
+                        {/* right main homepage section */}
+                        <div className="">
+                          <RightView />
+                        </div>
+                    </div> :
 
-        {/* right main homepage section */}
-        <div className="">
-          <RightView />
+                    <div className="flex items-center justify-center py-24">
+                      <p className="text-maytext">{error}</p>
+                    </div>
+                }
+              </div>
+          }
         </div>
+
+        {/* for when there is an error and data is not fetched */}
+        {/* <div className="flex items-center justify-center py-24">
+          {
+            error !== '' && <p className="text-maytext"></p>
+          }
+        </div> */}
+
+
       </div>
-      
+
     </div>
   )
 }
diff --git a/redux/actions/fetch.js b/redux/actions/fetch.js
new file mode 100644
index 0000000..4dd3b63
--- /dev/null
+++ b/redux/actions/fetch.js
@@ -0,0 +1,24 @@
+import { 
+    START_FETCH, STOP_FETCH, RESET_ERROR, THROW_ERROR, SET_DEFAULT
+ } from "../actions/types"
+ import axios from "axios"
+
+// action to fetch data on page load
+export const fetchDefault = () => (dispatch) => {
+    dispatch({ type: RESET_ERROR })
+    dispatch({ type: START_FETCH })
+
+    axios.get('https://www.metaweather.com/api/location/1528488/')
+        .then((response) => {
+            console.log(response.data);
+            dispatch({ type: SET_DEFAULT, payload:response.data })
+            dispatch({ type: STOP_FETCH })
+        }, (error) => {
+            console.log(error);
+            // console.log(" ended fetch")
+            dispatch({ type: THROW_ERROR })
+            dispatch({ type: STOP_FETCH })
+        });
+
+}
+
diff --git a/redux/actions/search.js b/redux/actions/search.js
index e69de29..3d6e6c5 100644
--- a/redux/actions/search.js
+++ b/redux/actions/search.js
@@ -0,0 +1,47 @@
+import {
+     SET_DEFAULT,TOGGLE_SEARCH,
+    START_SEARCH, STOP_SEARCH, RESET_ERROR_SEARCH, THROW_ERROR_SEARCH, NOT_FOUND, RESET_NOT_FOUND
+} from "../actions/types"
+import axios from "axios"
+
+
+// action to search for weather data
+export const search = (value) => (dispatch) => {
+    dispatch({ type: RESET_ERROR_SEARCH })
+    dispatch({ type: RESET_NOT_FOUND })
+    dispatch({ type: START_SEARCH })
+
+    axios.get(`https://www.metaweather.com/api/location/search/?query=${value}`)
+        .then((response) => {
+            console.log(response.data);
+
+            if(response.data[0] === undefined){
+
+                dispatch({ type: NOT_FOUND });
+                dispatch({ type: STOP_SEARCH })
+
+            } else{
+
+                axios.get(`https://www.metaweather.com/api/location/${response.data[0].woeid}/`)
+                .then((response) => {
+                    console.log(response.data);
+                    dispatch({ type: SET_DEFAULT, payload: response.data })
+                    dispatch({ type: STOP_SEARCH })
+                    dispatch({ type: TOGGLE_SEARCH })
+                }, (error) => {
+                    console.log(error);
+                    // console.log(" ended fetch")
+                    dispatch({ type: THROW_ERROR_SEARCH })
+                    dispatch({ type: STOP_SEARCH })
+                });
+
+            }
+            
+        }, (error) => {
+            console.log(error);
+            // console.log(" ended fetch")
+            dispatch({ type: THROW_ERROR_SEARCH })
+            dispatch({ type: STOP_SEARCH })
+        });
+
+}
\ No newline at end of file
diff --git a/redux/actions/types.js b/redux/actions/types.js
index 2ef3163..6c10c9d 100644
--- a/redux/actions/types.js
+++ b/redux/actions/types.js
@@ -1,3 +1,22 @@
-// testing
+// search types
 export const TOGGLE_SEARCH = "TOGGLE_SEARCH"
-export const SET_SEARCH = "SET_SEARCH"
\ No newline at end of file
+export const SET_SEARCH = "SET_SEARCH"
+
+//fetch data on page load
+export const START_FETCH = "START_FETCH"
+export const STOP_FETCH = "STOP_FETCH"
+export const THROW_ERROR = "THROW_ERROR"
+export const RESET_ERROR = "RESET_ERROR"
+export const RESET_DETAILS = "RESET_DETAILS"
+export const SET_DEFAULT = "SET_DEFAULT"
+
+// type to convert between units
+export const SET_UNIT = "SET_UNIT"
+
+//search
+export const START_SEARCH = "START_SEARCH"
+export const STOP_SEARCH = "STOP_SEARCH"
+export const THROW_ERROR_SEARCH = "THROW_ERROR_SEARCH"
+export const RESET_ERROR_SEARCH = "RESET_ERROR_SEARCH"
+export const NOT_FOUND = "NOT_FOUND"
+export const RESET_NOT_FOUND = "RESET_NOT_FOUND"
\ No newline at end of file
diff --git a/redux/reducers/CombinedReducers.js b/redux/reducers/CombinedReducers.js
index 2109c97..97c82cd 100644
--- a/redux/reducers/CombinedReducers.js
+++ b/redux/reducers/CombinedReducers.js
@@ -2,18 +2,20 @@ import { combineReducers } from 'redux'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 import { searchReducer } from './search'
+import { fetchReducer } from './fetch'
 
 
 const persistConfig = {
   key: 'root',
   storage,
   whitelist: [
-    'search',
+    'search','fetch'
   ],
 }
 
 const rootReducer = combineReducers({
   search: searchReducer,
+  fetch: fetchReducer,
   
 })
 
diff --git a/redux/reducers/fetch.js b/redux/reducers/fetch.js
new file mode 100644
index 0000000..65bcbc9
--- /dev/null
+++ b/redux/reducers/fetch.js
@@ -0,0 +1,60 @@
+import { 
+    START_FETCH, STOP_FETCH, RESET_ERROR, THROW_ERROR, SET_DEFAULT, RESET_DETAILS,
+    SET_UNIT
+ } from "../actions/types"
+
+const initState = {
+    loading:true,
+    error:"",
+    details:{},
+    unit:"cel"
+}
+
+export const fetchReducer = (state=initState,action) => {
+    switch (action.type) {
+        case START_FETCH:
+            return {
+                ...state,
+                loading: true
+            }
+        
+        case STOP_FETCH:
+            return {
+                ...state,
+                loading: false
+            }
+        
+        case THROW_ERROR:
+            return {
+                ...state,
+                error: "Something went wrong, refresh page to try again"
+            }
+        
+        case RESET_ERROR:
+            return {
+                ...state,
+                error: ""
+            }
+        
+        case RESET_DETAILS:
+            return {
+                ...state,
+                details: {}
+            }
+        
+        case SET_DEFAULT:
+            return {
+                ...state,
+                details: action.payload
+            }
+        
+        case SET_UNIT:
+            return {
+                ...state,
+                unit: action.payload
+            }
+        
+        default:
+            return state
+    }
+}
\ No newline at end of file
diff --git a/redux/reducers/search.js b/redux/reducers/search.js
index 37bf9d5..c44c902 100644
--- a/redux/reducers/search.js
+++ b/redux/reducers/search.js
@@ -1,23 +1,61 @@
-import { TOGGLE_SEARCH, SET_SEARCH } from "../actions/types"
+import { TOGGLE_SEARCH, SET_SEARCH,
+    START_SEARCH, STOP_SEARCH, RESET_ERROR_SEARCH, THROW_ERROR_SEARCH, NOT_FOUND, RESET_NOT_FOUND
+} from "../actions/types"
 
 const initState = {
-    showSearch: false
+    showSearch: false,
+    loadingSearch: false,
+    errorSearch: "",
+    notFound:false
 }
 
-export const searchReducer = (state=initState,action) => {
+export const searchReducer = (state = initState, action) => {
     switch (action.type) {
         case TOGGLE_SEARCH:
             return {
                 ...state,
                 showSearch: !state.showSearch
             }
-        
+
         case SET_SEARCH:
             return {
                 ...state,
                 showSearch: false
             }
-        
+
+        case START_SEARCH:
+            return {
+                ...state,
+                loadingSearch: true
+            }
+
+        case STOP_SEARCH:
+            return {
+                ...state,
+                loadingSearch: false
+            }
+
+        case THROW_ERROR_SEARCH:
+            return {
+                ...state,
+                errorSearch: "Something went wrong, refresh page to try again"
+            }
+
+        case RESET_ERROR_SEARCH:
+            return {
+                ...state,
+                errorSearch: ""
+            }
+        case NOT_FOUND:
+            return {
+                ...state,
+                notFound: true
+            }
+        case RESET_NOT_FOUND:
+            return {
+                ...state,
+                notFound: false
+            }
         default:
             return state
     }
diff --git a/styles/globals.scss b/styles/globals.scss
index c90d8ea..14de2d7 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -26,23 +26,6 @@ body {
     z-index: -10;
 }
 
-// Styles for progress bar
-  .progress-bar {
-      position: relative;
-      height: 8px;
-      width: 200px;
-      border-radius: 50px;
-      border: 1px solid #333;
-      background-color: white !important;
-  }
-  
-  .filler {
-      background: #FFEC65;
-      height: 100%;
-      border-radius: inherit;
-      transition: width .2s ease-in;
-  }
-
   // styles for animation of SideBar
   .slide-in-left {
     -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
@@ -79,6 +62,28 @@ body {
     top:25%;
     left:3%;
   }
+
+//css for spinner
+.spinner-page {
+  width:30px;
+  height:30px;
+  border-radius:50%;
+  background:conic-gradient(#0000 10%,#FFEC65);
+  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
+  animation: s3 1s infinite linear;
+}
+@keyframes s3 {to{transform: rotate(1turn)}}
+
+//css for spinner
+.spinner-white {
+  width:20px;
+  height:20px;
+  border-radius:50%;
+  background:conic-gradient(#0000 10%,#FFFFFF);
+  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
+  animation: s3 1s infinite linear;
+}
+@keyframes s3 {to{transform: rotate(1turn)}}
   
 
 @media screen and (max-width: 767px){