Skip to content

Commit 5971f5b

Browse files
iamsainikhiliamsainikhil
authored
update weather icons and update weather container UI with dynamic weather
Merge pull request #5 from iamsainikhil/weather-background
2 parents ed7bcda + b3d4fa5 commit 5971f5b

File tree

7 files changed

+241
-281
lines changed

7 files changed

+241
-281
lines changed

‎src/components/weather/DayComponent.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, {useContext} from 'react'
22
import {WeatherUnitContext} from '../../context/WeatherUnitContext'
3-
import {ThemeContext} from '../../context/ThemeContext'
43
import {fToC} from '../../utils/TemperatureConvert'
54
import getWeatherIcon from '../../utils/WeatherIcon'
65
import FormatTime from './../../utils/FormatTime'
@@ -10,7 +9,6 @@ import WeatherIconComponent from './WeatherIconComponent'
109
const DayComponent = props => {
1110
const {day, index, selectedIndex} = props
1211
const {weatherUnit} = useContext(WeatherUnitContext)
13-
const {theme, colorTheme} = useContext(ThemeContext)
1412

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

2927
return (
3028
<div
31-
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 ${
32-
index === selectedIndex ? `bg-${colorTheme} text-${theme}` : ''
29+
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 ${
30+
index === selectedIndex ? `bg-light text-black` : ''
3331
} transition-all duration-1000 ease-in-out`}
3432
onClick={selectedDay}>
3533
<div className='flex flex-row flex-no-wrap sm:flex-col sm:flex-wrap justify-around items-center px-2'>

‎src/components/weather/InfoComponent.js‎

Lines changed: 22 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, {useState, useEffect, useContext, useRef, Fragment} from 'react'
22
import {AddressContext} from '../../context/AddressContext'
3-
import {ThemeContext} from '../../context/ThemeContext'
4-
import {imageExist, getImageDetails} from '../../utils/ImageDetails'
53
import {isUndefined, isEmpty} from 'lodash-es'
64
import moment from 'moment-timezone'
75
import {PropTypes} from 'prop-types'
@@ -13,26 +11,6 @@ const InfoComponent = ({address, latlong, urbanArea, weatherCurrent}) => {
1311
const [date, setDate] = useState('')
1412
const [time, setTime] = useState('')
1513

16-
const {colorTheme} = useContext(ThemeContext)
17-
18-
// get image details
19-
const {image, photographer, site, source} = getImageDetails(urbanArea)
20-
21-
const imageOverlay = {
22-
background: 'rgba(0,0,0,0.7)',
23-
borderTopLeftRadius: '1rem',
24-
borderTopRightRadius: '1rem'
25-
}
26-
27-
// track image source click event to GA
28-
const emitImageSourceGA = () => {
29-
Event({
30-
category: 'City Image',
31-
action: 'Click on Image Source',
32-
label: 'Image source'
33-
})
34-
}
35-
3614
/**
3715
* track select favorite click event to GA
3816
* @param {String} type (add or remove)
@@ -134,82 +112,31 @@ const InfoComponent = ({address, latlong, urbanArea, weatherCurrent}) => {
134112
}, [weatherCurrent])
135113

136114
return (
137-
<div className='relative'>
138-
<div>
139-
{imageExist(urbanArea) ? (
140-
<Fragment>
141-
<img
142-
src={image.mobile}
143-
alt='city'
144-
className='block sm:hidden h-40 w-full object-cover object-center rounded-t-2xl'
145-
/>
146-
<img
147-
src={image.web}
148-
alt='city'
149-
className='hidden sm:block sm:h-32 md:h-24 xl:h-32 w-full object-cover object-center rounded-t-2xl'
150-
/>
151-
</Fragment>
152-
) : null}
153-
</div>
154-
<div
155-
className={`${
156-
imageExist(urbanArea)
157-
? 'absolute top-0 left-0 right-0 bottom-0 text-light'
158-
: `text-${colorTheme}`
159-
}`}
160-
style={imageExist(urbanArea) ? imageOverlay : null}>
161-
<div className='flex justify-between items-start'>
162-
<div className='pt-4 px-4'>
163-
<p
164-
className={`font-bold ${
165-
imageExist(urbanArea) ? 'sm:text-2xl' : ''
166-
}`}>
167-
{address.cityName}
168-
</p>
169-
<div
170-
className={`sm:flex-col md:flex md:flex-row ${
171-
imageExist(urbanArea) ? 'font-medium' : 'font-light'
172-
}`}>
173-
{!isEmpty(date) && !isEmpty(time) ? (
174-
<Fragment>
175-
<p>
176-
{date}
177-
<span className='invisible md:visible'>&nbsp;|&nbsp;</span>
178-
</p>
179-
<p>{time}</p>
180-
</Fragment>
181-
) : null}
182-
</div>
183-
</div>
184-
<div
185-
className='mt-6 mr-4 cursor-pointer text-xl'
186-
title={
187-
isBookmarked()
188-
? 'Remove this city from favorites'
189-
: 'Favorite this city'
190-
}
191-
onClick={favoritesHandler}>
192-
{isBookmarked() ? <FaHeart /> : <FaRegHeart />}
193-
</div>
194-
</div>
195-
<div className='hidden md:block text-right bottom-0 right-0 xl:mt-8 px-2'>
196-
{photographer && site ? (
197-
<p className='font-light' style={{fontSize: '0.5rem'}}>
198-
Photo by&nbsp;
199-
<span className='font-medium'>{photographer}</span>
200-
&nbsp;on&nbsp;
201-
<a
202-
className='link z-0 font-medium hover:no-underline hover:font-medium hover:text-light'
203-
href={source}
204-
target='_blank'
205-
rel='noreferrer noopener'
206-
onClick={emitImageSourceGA}>
207-
{site}
208-
</a>
209-
</p>
115+
<div className='flex justify-between items-start'>
116+
<div className='pt-4 px-4'>
117+
<p className='font-bold'>{address.cityName}</p>
118+
<div className='sm:flex-col md:flex md:flex-row font-light'>
119+
{!isEmpty(date) && !isEmpty(time) ? (
120+
<Fragment>
121+
<p>
122+
{date}
123+
<span className='invisible md:visible'>&nbsp;|&nbsp;</span>
124+
</p>
125+
<p>{time}</p>
126+
</Fragment>
210127
) : null}
211128
</div>
212129
</div>
130+
<div
131+
className='mt-6 mr-4 cursor-pointer text-xl'
132+
title={
133+
isBookmarked()
134+
? 'Remove this city from favorites'
135+
: 'Favorite this city'
136+
}
137+
onClick={favoritesHandler}>
138+
{isBookmarked() ? <FaHeart /> : <FaRegHeart />}
139+
</div>
213140
</div>
214141
)
215142
}

‎src/components/weather/InfoDetailComponent.js‎

Lines changed: 80 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {PropTypes} from 'prop-types'
88
import {Event} from '../../utils/ReactAnalytics'
99
import {FiPercent} from 'react-icons/fi'
1010
import WeatherIconComponent from './WeatherIconComponent'
11-
import getWeatherBackground from './../../utils/WeatherBackground'
1211

1312
const InfoDetailComponent = ({weatherCurrent}) => {
1413
const {weatherUnit, updateWeatherUnit} = useContext(WeatherUnitContext)
@@ -39,132 +38,95 @@ const InfoDetailComponent = ({weatherCurrent}) => {
3938
: `${mToK(weatherCurrent.windSpeed)} kmph`
4039
}
4140

42-
const WET_TYPES = ['rain', 'snow', 'sleet', 'hail']
43-
44-
// return rain or snow svg image for the above wet types
45-
const weatherSVG = () => {
46-
if (weatherCurrent.icon === 'snow') {
47-
return 'snow'
48-
}
49-
return 'rain'
50-
}
51-
5241
return (
5342
<Fragment>
54-
<div className='relative'>
55-
<img
56-
src={`./weather-backgrounds/${getWeatherBackground(
57-
weatherCurrent
58-
)}.jpg`}
59-
alt='clear day'
60-
className='w-full h-64 sm:h-48 object-cover object-center'
61-
/>
62-
{/* show rain or snow svg only when weather icon exist in WET_TYPES*/}
63-
<div>
64-
{WET_TYPES.includes(weatherCurrent.icon) && (
65-
<img
66-
src={`./weather-backgrounds/${weatherSVG()}.svg`}
67-
alt='clear day'
68-
className='w-full h-64 sm:h-48 object-cover object-center absolute top-0 right-0 bottom-0 left-0'
69-
/>
70-
)}
71-
</div>
72-
<div
73-
className='absolute top-0 bottom-0 left-0 right-0 my-auto mx-auto text-light'
74-
style={{background: 'rgba(0,0,0,0.2)'}}>
75-
<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'>
76-
<div className='flex-col sm:w-full lg:w-1/2'>
77-
<div className='flex flex-row justify-between sm:justify-start'>
78-
<div className='flex flex-col justify-center items-center'>
79-
<div>
80-
{getWeatherIcon(weatherCurrent).startsWith('wi') ? (
81-
<p
82-
className='text-6xl sm:mx-2 mt-2'
83-
title={weatherCurrent.summary}>
84-
{
85-
<WeatherIconComponent
86-
type={getWeatherIcon(weatherCurrent)}
87-
/>
88-
}
89-
</p>
90-
) : (
91-
<img
92-
src={`./weather/${getWeatherIcon(weatherCurrent)}.svg`}
93-
alt='icon'
94-
title={weatherCurrent.summary}
95-
className='-mt-2 -ml-4 sm:mx-0 w-32 h-32 object-contain'
96-
/>
97-
)}
98-
</div>
99-
<p className='hidden sm:flex font-medium -mt-2 capitalize'>
100-
{weatherCurrent.summary}
101-
</p>
102-
</div>
103-
<div className='flex justify-start items-center sm:-mt-3 sm:ml-3'>
104-
<div>
105-
<span className='text-6xl font-bold'>
106-
{computedTempValue('temperature')}
107-
</span>
108-
</div>
109-
<div className='-mt-8 mx-2 text-sm'>
110-
<sup>o</sup>
111-
<span
112-
className={`cursor-pointer ${
113-
weatherUnit === 'F'
114-
? 'font-bold underline'
115-
: 'font-light'
116-
}`}
117-
onClick={() => unitClick('F')}>
118-
F
119-
</span>
120-
<span className='mx-1'>|</span>
121-
<sup>o</sup>
122-
<span
123-
className={`cursor-pointer ${
124-
weatherUnit === 'C'
125-
? 'font-bold underline'
126-
: 'font-light'
127-
}`}
128-
onClick={() => unitClick('C')}>
129-
C
130-
</span>
131-
</div>
132-
</div>
133-
</div>
134-
</div>
135-
{/* weather info */}
136-
<div className='flex flex-col justify-center items-center sm:mt-6 sm:w-full lg:w-1/2'>
137-
<p className='sm:hidden font-medium capitalize text-2xl -mt-2 mb-2'>
138-
{weatherCurrent.summary}
139-
</p>
140-
<div className='text-sm sm:text-lg ml-8'>
141-
<div className='flex flex-row sm:my-2'>
142-
<p className='font-light'>Humidity:</p>&nbsp;
143-
<p className='mx-1'>{Math.round(weatherCurrent.humidity)}</p>
144-
<p className='text-sm mt-1'>
145-
<FiPercent />
146-
</p>
147-
</div>
148-
<div className='flex items-center sm:my-2'>
149-
<p>
150-
<span className='font-light'>Wind:</span>&nbsp;
151-
{computedSpeedValue()}{' '}
152-
</p>
153-
<p className='text-3xl'>
43+
<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'>
44+
<div className='flex-col sm:w-full lg:w-1/2'>
45+
<div className='flex flex-row justify-between sm:justify-start'>
46+
<div className='flex flex-col justify-center items-center'>
47+
<div>
48+
{getWeatherIcon(weatherCurrent).startsWith('wi') ? (
49+
<p
50+
className='text-6xl sm:mx-2 mt-2'
51+
title={weatherCurrent.summary}>
15452
{
15553
<WeatherIconComponent
156-
type={getWindDirection(weatherCurrent.windBearing)}
54+
type={getWeatherIcon(weatherCurrent)}
15755
/>
15856
}
15957
</p>
160-
</div>
161-
<p>
162-
<span className='font-light sm:my-2'>Feels like:</span>&nbsp;
163-
{computedTempValue('apparentTemperature')}
164-
<sup>o</sup>
165-
</p>
58+
) : (
59+
<img
60+
src={`./weather/${getWeatherIcon(weatherCurrent)}.svg`}
61+
alt='icon'
62+
title={weatherCurrent.summary}
63+
className='-mt-2 -ml-4 sm:mx-0 w-32 h-32 object-contain'
64+
/>
65+
)}
16666
</div>
67+
<p className='hidden sm:flex font-medium -mt-2 ml-3 capitalize'>
68+
{weatherCurrent.summary}
69+
</p>
70+
</div>
71+
<div className='flex justify-start items-center sm:-mt-3 sm:ml-3'>
72+
<div>
73+
<span className='text-6xl font-bold'>
74+
{computedTempValue('temperature')}
75+
</span>
76+
</div>
77+
<div className='-mt-8 mx-2 text-sm'>
78+
<sup>o</sup>
79+
<span
80+
className={`cursor-pointer ${
81+
weatherUnit === 'F' ? 'font-bold underline' : 'font-light'
82+
}`}
83+
onClick={() => unitClick('F')}>
84+
F
85+
</span>
86+
<span className='mx-1'>|</span>
87+
<sup>o</sup>
88+
<span
89+
className={`cursor-pointer ${
90+
weatherUnit === 'C' ? 'font-bold underline' : 'font-light'
91+
}`}
92+
onClick={() => unitClick('C')}>
93+
C
94+
</span>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
{/* weather info */}
100+
<div className='flex flex-col justify-center items-center sm:mt-6 sm:w-full lg:w-1/2'>
101+
<p className='sm:hidden font-medium capitalize text-2xl -mt-2 mb-2'>
102+
{weatherCurrent.summary}
103+
</p>
104+
<div className='text-sm sm:text-lg ml-8'>
105+
<div className='flex flex-row sm:my-2'>
106+
<p className='font-light'>Humidity:</p>&nbsp;
107+
<p className='mx-1'>{Math.round(weatherCurrent.humidity)}</p>
108+
<p className='text-sm mt-1'>
109+
<FiPercent />
110+
</p>
111+
</div>
112+
<div className='flex items-center sm:my-2'>
113+
<p>
114+
<span className='font-light'>Wind:</span>&nbsp;
115+
{computedSpeedValue()}{' '}
116+
</p>
117+
<p className='text-3xl'>
118+
{
119+
<WeatherIconComponent
120+
type={getWindDirection(weatherCurrent.windBearing)}
121+
/>
122+
}
123+
</p>
167124
</div>
125+
<p>
126+
<span className='font-light sm:my-2'>Feels like:</span>&nbsp;
127+
{computedTempValue('apparentTemperature')}
128+
<sup>o</sup>
129+
</p>
168130
</div>
169131
</div>
170132
</div>

0 commit comments

Comments
 (0)