Skip to content

Commit

Permalink
update weather icons and update weather container UI with dynamic wea…
Browse files Browse the repository at this point in the history 
…ther

Merge pull request #5 from iamsainikhil/weather-background
  • Loading branch information
@iamsainikhil
iamsainikhil authored Mar 12, 2020
2 parents ed7bcda + b3d4fa5 commit 5971f5b
Show file tree
Hide file tree
Showing 7 changed files with 241 additions and 281 deletions.
6 changes: 2 additions & 4 deletions src/components/weather/DayComponent.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, {useContext} from 'react'
import {WeatherUnitContext} from '../../context/WeatherUnitContext'
import {ThemeContext} from '../../context/ThemeContext'
import {fToC} from '../../utils/TemperatureConvert'
import getWeatherIcon from '../../utils/WeatherIcon'
import FormatTime from './../../utils/FormatTime'
Expand All @@ -10,7 +9,6 @@ import WeatherIconComponent from './WeatherIconComponent'
const DayComponent = props => {
const {day, index, selectedIndex} = props
const {weatherUnit} = useContext(WeatherUnitContext)
const {theme, colorTheme} = useContext(ThemeContext)

/**
* type can be 'High' or 'Low'
Expand All @@ -28,8 +26,8 @@ const DayComponent = props => {

return (
<div
className={`sm:border-t sm:border-r sm:border-b-0 sm:border-l-0 sm:border-${colorTheme} sm:hover:bg-${colorTheme} sm:hover:text-${theme} items-center text-center sm:flex-1 sm:py-1 sm:pb-3 cursor-pointer ${
index === selectedIndex ? `bg-${colorTheme} text-${theme}` : ''
className={`sm:border-t sm:border-r sm:border-b-0 sm:border-l-0 sm:border-light sm:hover:bg-light sm:hover:text-black items-center text-center sm:flex-1 sm:py-1 sm:pb-3 cursor-pointer ${
index === selectedIndex ? `bg-light text-black` : ''
} transition-all duration-1000 ease-in-out`}
onClick={selectedDay}>
<div className='flex flex-row flex-no-wrap sm:flex-col sm:flex-wrap justify-around items-center px-2'>
Expand Down
117 changes: 22 additions & 95 deletions src/components/weather/InfoComponent.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React, {useState, useEffect, useContext, useRef, Fragment} from 'react'
import {AddressContext} from '../../context/AddressContext'
import {ThemeContext} from '../../context/ThemeContext'
import {imageExist, getImageDetails} from '../../utils/ImageDetails'
import {isUndefined, isEmpty} from 'lodash-es'
import moment from 'moment-timezone'
import {PropTypes} from 'prop-types'
Expand All @@ -13,26 +11,6 @@ const InfoComponent = ({address, latlong, urbanArea, weatherCurrent}) => {
const [date, setDate] = useState('')
const [time, setTime] = useState('')

const {colorTheme} = useContext(ThemeContext)

// get image details
const {image, photographer, site, source} = getImageDetails(urbanArea)

const imageOverlay = {
background: 'rgba(0,0,0,0.7)',
borderTopLeftRadius: '1rem',
borderTopRightRadius: '1rem'
}

// track image source click event to GA
const emitImageSourceGA = () => {
Event({
category: 'City Image',
action: 'Click on Image Source',
label: 'Image source'
})
}

/**
* track select favorite click event to GA
* @param {String} type (add or remove)
Expand Down Expand Up @@ -134,82 +112,31 @@ const InfoComponent = ({address, latlong, urbanArea, weatherCurrent}) => {
}, [weatherCurrent])

return (
<div className='relative'>
<div>
{imageExist(urbanArea) ? (
<Fragment>
<img
src={image.mobile}
alt='city'
className='block sm:hidden h-40 w-full object-cover object-center rounded-t-2xl'
/>
<img
src={image.web}
alt='city'
className='hidden sm:block sm:h-32 md:h-24 xl:h-32 w-full object-cover object-center rounded-t-2xl'
/>
</Fragment>
) : null}
</div>
<div
className={`${
imageExist(urbanArea)
? 'absolute top-0 left-0 right-0 bottom-0 text-light'
: `text-${colorTheme}`
}`}
style={imageExist(urbanArea) ? imageOverlay : null}>
<div className='flex justify-between items-start'>
<div className='pt-4 px-4'>
<p
className={`font-bold ${
imageExist(urbanArea) ? 'sm:text-2xl' : ''
}`}>
{address.cityName}
</p>
<div
className={`sm:flex-col md:flex md:flex-row ${
imageExist(urbanArea) ? 'font-medium' : 'font-light'
}`}>
{!isEmpty(date) && !isEmpty(time) ? (
<Fragment>
<p>
{date}
<span className='invisible md:visible'>&nbsp;|&nbsp;</span>
</p>
<p>{time}</p>
</Fragment>
) : null}
</div>
</div>
<div
className='mt-6 mr-4 cursor-pointer text-xl'
title={
isBookmarked()
? 'Remove this city from favorites'
: 'Favorite this city'
}
onClick={favoritesHandler}>
{isBookmarked() ? <FaHeart /> : <FaRegHeart />}
</div>
</div>
<div className='hidden md:block text-right bottom-0 right-0 xl:mt-8 px-2'>
{photographer && site ? (
<p className='font-light' style={{fontSize: '0.5rem'}}>
Photo by&nbsp;
<span className='font-medium'>{photographer}</span>
&nbsp;on&nbsp;
<a
className='link z-0 font-medium hover:no-underline hover:font-medium hover:text-light'
href={source}
target='_blank'
rel='noreferrer noopener'
onClick={emitImageSourceGA}>
{site}
</a>
</p>
<div className='flex justify-between items-start'>
<div className='pt-4 px-4'>
<p className='font-bold'>{address.cityName}</p>
<div className='sm:flex-col md:flex md:flex-row font-light'>
{!isEmpty(date) && !isEmpty(time) ? (
<Fragment>
<p>
{date}
<span className='invisible md:visible'>&nbsp;|&nbsp;</span>
</p>
<p>{time}</p>
</Fragment>
) : null}
</div>
</div>
<div
className='mt-6 mr-4 cursor-pointer text-xl'
title={
isBookmarked()
? 'Remove this city from favorites'
: 'Favorite this city'
}
onClick={favoritesHandler}>
{isBookmarked() ? <FaHeart /> : <FaRegHeart />}
</div>
</div>
)
}
Expand Down
198 changes: 80 additions & 118 deletions src/components/weather/InfoDetailComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {PropTypes} from 'prop-types'
import {Event} from '../../utils/ReactAnalytics'
import {FiPercent} from 'react-icons/fi'
import WeatherIconComponent from './WeatherIconComponent'
import getWeatherBackground from './../../utils/WeatherBackground'

const InfoDetailComponent = ({weatherCurrent}) => {
const {weatherUnit, updateWeatherUnit} = useContext(WeatherUnitContext)
Expand Down Expand Up @@ -39,132 +38,95 @@ const InfoDetailComponent = ({weatherCurrent}) => {
: `${mToK(weatherCurrent.windSpeed)} kmph`
}

const WET_TYPES = ['rain', 'snow', 'sleet', 'hail']

// return rain or snow svg image for the above wet types
const weatherSVG = () => {
if (weatherCurrent.icon === 'snow') {
return 'snow'
}
return 'rain'
}

return (
<Fragment>
<div className='relative'>
<img
src={`./weather-backgrounds/${getWeatherBackground(
weatherCurrent
)}.jpg`}
alt='clear day'
className='w-full h-64 sm:h-48 object-cover object-center'
/>
{/* show rain or snow svg only when weather icon exist in WET_TYPES*/}
<div>
{WET_TYPES.includes(weatherCurrent.icon) && (
<img
src={`./weather-backgrounds/${weatherSVG()}.svg`}
alt='clear day'
className='w-full h-64 sm:h-48 object-cover object-center absolute top-0 right-0 bottom-0 left-0'
/>
)}
</div>
<div
className='absolute top-0 bottom-0 left-0 right-0 my-auto mx-auto text-light'
style={{background: 'rgba(0,0,0,0.2)'}}>
<div className='sm:flex-col md:flex md:flex-row justify-between my-2 px-6 sm:mt-5 sm:mb-5 sm:px-4'>
<div className='flex-col sm:w-full lg:w-1/2'>
<div className='flex flex-row justify-between sm:justify-start'>
<div className='flex flex-col justify-center items-center'>
<div>
{getWeatherIcon(weatherCurrent).startsWith('wi') ? (
<p
className='text-6xl sm:mx-2 mt-2'
title={weatherCurrent.summary}>
{
<WeatherIconComponent
type={getWeatherIcon(weatherCurrent)}
/>
}
</p>
) : (
<img
src={`./weather/${getWeatherIcon(weatherCurrent)}.svg`}
alt='icon'
title={weatherCurrent.summary}
className='-mt-2 -ml-4 sm:mx-0 w-32 h-32 object-contain'
/>
)}
</div>
<p className='hidden sm:flex font-medium -mt-2 capitalize'>
{weatherCurrent.summary}
</p>
</div>
<div className='flex justify-start items-center sm:-mt-3 sm:ml-3'>
<div>
<span className='text-6xl font-bold'>
{computedTempValue('temperature')}
</span>
</div>
<div className='-mt-8 mx-2 text-sm'>
<sup>o</sup>
<span
className={`cursor-pointer ${
weatherUnit === 'F'
? 'font-bold underline'
: 'font-light'
}`}
onClick={() => unitClick('F')}>
F
</span>
<span className='mx-1'>|</span>
<sup>o</sup>
<span
className={`cursor-pointer ${
weatherUnit === 'C'
? 'font-bold underline'
: 'font-light'
}`}
onClick={() => unitClick('C')}>
C
</span>
</div>
</div>
</div>
</div>
{/* weather info */}
<div className='flex flex-col justify-center items-center sm:mt-6 sm:w-full lg:w-1/2'>
<p className='sm:hidden font-medium capitalize text-2xl -mt-2 mb-2'>
{weatherCurrent.summary}
</p>
<div className='text-sm sm:text-lg ml-8'>
<div className='flex flex-row sm:my-2'>
<p className='font-light'>Humidity:</p>&nbsp;
<p className='mx-1'>{Math.round(weatherCurrent.humidity)}</p>
<p className='text-sm mt-1'>
<FiPercent />
</p>
</div>
<div className='flex items-center sm:my-2'>
<p>
<span className='font-light'>Wind:</span>&nbsp;
{computedSpeedValue()}{' '}
</p>
<p className='text-3xl'>
<div className='sm:flex-col md:flex md:flex-row justify-between my-2 px-6 sm:mt-5 sm:mb-5 sm:px-4'>
<div className='flex-col sm:w-full lg:w-1/2'>
<div className='flex flex-row justify-between sm:justify-start'>
<div className='flex flex-col justify-center items-center'>
<div>
{getWeatherIcon(weatherCurrent).startsWith('wi') ? (
<p
className='text-6xl sm:mx-2 mt-2'
title={weatherCurrent.summary}>
{
<WeatherIconComponent
type={getWindDirection(weatherCurrent.windBearing)}
type={getWeatherIcon(weatherCurrent)}
/>
}
</p>
</div>
<p>
<span className='font-light sm:my-2'>Feels like:</span>&nbsp;
{computedTempValue('apparentTemperature')}
<sup>o</sup>
</p>
) : (
<img
src={`./weather/${getWeatherIcon(weatherCurrent)}.svg`}
alt='icon'
title={weatherCurrent.summary}
className='-mt-2 -ml-4 sm:mx-0 w-32 h-32 object-contain'
/>
)}
</div>
<p className='hidden sm:flex font-medium -mt-2 ml-3 capitalize'>
{weatherCurrent.summary}
</p>
</div>
<div className='flex justify-start items-center sm:-mt-3 sm:ml-3'>
<div>
<span className='text-6xl font-bold'>
{computedTempValue('temperature')}
</span>
</div>
<div className='-mt-8 mx-2 text-sm'>
<sup>o</sup>
<span
className={`cursor-pointer ${
weatherUnit === 'F' ? 'font-bold underline' : 'font-light'
}`}
onClick={() => unitClick('F')}>
F
</span>
<span className='mx-1'>|</span>
<sup>o</sup>
<span
className={`cursor-pointer ${
weatherUnit === 'C' ? 'font-bold underline' : 'font-light'
}`}
onClick={() => unitClick('C')}>
C
</span>
</div>
</div>
</div>
</div>
{/* weather info */}
<div className='flex flex-col justify-center items-center sm:mt-6 sm:w-full lg:w-1/2'>
<p className='sm:hidden font-medium capitalize text-2xl -mt-2 mb-2'>
{weatherCurrent.summary}
</p>
<div className='text-sm sm:text-lg ml-8'>
<div className='flex flex-row sm:my-2'>
<p className='font-light'>Humidity:</p>&nbsp;
<p className='mx-1'>{Math.round(weatherCurrent.humidity)}</p>
<p className='text-sm mt-1'>
<FiPercent />
</p>
</div>
<div className='flex items-center sm:my-2'>
<p>
<span className='font-light'>Wind:</span>&nbsp;
{computedSpeedValue()}{' '}
</p>
<p className='text-3xl'>
{
<WeatherIconComponent
type={getWindDirection(weatherCurrent.windBearing)}
/>
}
</p>
</div>
<p>
<span className='font-light sm:my-2'>Feels like:</span>&nbsp;
{computedTempValue('apparentTemperature')}
<sup>o</sup>
</p>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 5971f5b

Please sign in to comment.