Skip to content

Commit

Permalink
finished working on all user stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@elminhoemmanuel
elminhoemmanuel committed Oct 20, 2021
1 parent e2541a3 commit 758ae54
Show file tree
Hide file tree
Showing 15 changed files with 532 additions and 93 deletions.
78 changes: 67 additions & 11 deletions components/LeftView.js
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/PrimaryBtn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
78 changes: 50 additions & 28 deletions components/RightView.js
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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">
Expand All @@ -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>

Expand All @@ -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="">
Expand All @@ -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>
Expand All @@ -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>

Expand All @@ -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>
Expand Down
43 changes: 34 additions & 9 deletions components/SideBar.js
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
Loading

0 comments on commit 758ae54

Please sign in to comment.