mirror of https://github.com/mue/mue.git
refactor(weather): widget and its related components
This commit is contained in:
parent
4f0a8207b1
commit
2f9acde332
|
@ -1,4 +1,4 @@
|
||||||
import { memo } from 'react';
|
import { memo, useMemo } from 'react';
|
||||||
|
|
||||||
import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
|
import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
|
||||||
import { MdDisabledVisible } from 'react-icons/md';
|
import { MdDisabledVisible } from 'react-icons/md';
|
||||||
|
@ -8,16 +8,18 @@ import WindDirectionIcon from './WindDirectionIcon';
|
||||||
|
|
||||||
import Tooltip from 'components/helpers/tooltip/Tooltip';
|
import Tooltip from 'components/helpers/tooltip/Tooltip';
|
||||||
|
|
||||||
function Expanded({ state, weatherType, variables }) {
|
function Expanded({ state: { weather, icon }, weatherType, variables }) {
|
||||||
/**
|
/**
|
||||||
* If the localStorage item is true and the weatherType is greater than or equal to 3, or if the
|
* If the localStorage item is true and the weatherType is greater than or equal to 3, or if the
|
||||||
* weatherType is equal to 3, then return true.
|
* weatherType is equal to 3, then return true.
|
||||||
* @param {string} setting - The localStorage item to check.
|
* @param {string} setting - The localStorage item to check.
|
||||||
* @returns a boolean value.
|
* @returns a boolean value.
|
||||||
*/
|
*/
|
||||||
const enabled = (setting) => {
|
const enabled = useMemo(() => {
|
||||||
return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
|
return (setting) => {
|
||||||
};
|
return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
|
||||||
|
};
|
||||||
|
}, [weatherType]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="expanded-info">
|
<div className="expanded-info">
|
||||||
|
@ -35,7 +37,7 @@ function Expanded({ state, weatherType, variables }) {
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<WiCloud className="weatherIcon" />
|
<WiCloud className="weatherIcon" />
|
||||||
{state.weather.cloudiness}%
|
{weather.cloudiness}%
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
|
@ -48,11 +50,11 @@ function Expanded({ state, weatherType, variables }) {
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<WiWindy className="weatherIcon" />
|
<WiWindy className="weatherIcon" />
|
||||||
{state.weather.wind_speed}
|
{weather.wind_speed}
|
||||||
<span className="minmax">m/s</span>{' '}
|
<span className="minmax">m/s</span>{' '}
|
||||||
{enabled('windDirection') && (
|
{enabled('windDirection') && (
|
||||||
<div style={{ fontSize: '25px', display: 'grid' }}>
|
<div style={{ fontSize: '25px', display: 'grid' }}>
|
||||||
<WindDirectionIcon className="weatherIcon" degrees={state.weather.wind_degrees} />
|
<WindDirectionIcon className="weatherIcon" degrees={weather.wind_degrees} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
|
@ -67,7 +69,7 @@ function Expanded({ state, weatherType, variables }) {
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<WiBarometer className="weatherIcon" />
|
<WiBarometer className="weatherIcon" />
|
||||||
{state.weather.pressure}
|
{weather.pressure}
|
||||||
<span className="minmax">hPa</span>
|
<span className="minmax">hPa</span>
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
@ -80,8 +82,8 @@ function Expanded({ state, weatherType, variables }) {
|
||||||
placement="left"
|
placement="left"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<WeatherIcon className="weatherIcon" name={state.icon} />
|
<WeatherIcon className="weatherIcon" name={icon} />
|
||||||
{state.weather.description}
|
{weather.description}
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
|
@ -95,7 +97,7 @@ function Expanded({ state, weatherType, variables }) {
|
||||||
<span>
|
<span>
|
||||||
<MdDisabledVisible className="materialWeatherIcon" />
|
<MdDisabledVisible className="materialWeatherIcon" />
|
||||||
{variables.getMessage('widgets.weather.meters', {
|
{variables.getMessage('widgets.weather.meters', {
|
||||||
amount: state.weather.visibility,
|
amount: weather.visibility,
|
||||||
})}
|
})}
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
@ -107,7 +109,7 @@ function Expanded({ state, weatherType, variables }) {
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<WiHumidity className="materialWeatherIcon" />
|
<WiHumidity className="materialWeatherIcon" />
|
||||||
{state.weather.humidity}
|
{weather.humidity}
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -8,6 +8,15 @@ import EventBus from 'modules/helpers/eventbus';
|
||||||
|
|
||||||
import './weather.scss';
|
import './weather.scss';
|
||||||
|
|
||||||
|
const convertTemperature = (temp, format) => {
|
||||||
|
if (format === 'celsius') {
|
||||||
|
return Math.round(temp - 273.15);
|
||||||
|
} else if (format === 'fahrenheit') {
|
||||||
|
return Math.round((temp - 273.15) * 1.8 + 32);
|
||||||
|
}
|
||||||
|
return Math.round(temp);
|
||||||
|
};
|
||||||
|
|
||||||
export default class Weather extends PureComponent {
|
export default class Weather extends PureComponent {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
@ -18,65 +27,62 @@ export default class Weather extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
async getWeather() {
|
async getWeather() {
|
||||||
const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
|
|
||||||
document.querySelector('.weather').style.fontSize = zoomWeather;
|
|
||||||
|
|
||||||
if (this.state.done === true) {
|
if (this.state.done === true) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = await (
|
const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
|
||||||
await fetch(
|
document.querySelector('.weather').style.fontSize = zoomWeather;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
variables.constants.API_URL +
|
variables.constants.API_URL +
|
||||||
`/weather?city=${this.state.location}&language=${variables.languagecode}`,
|
`/weather?city=${this.state.location}&language=${variables.languagecode}`,
|
||||||
)
|
);
|
||||||
).json();
|
|
||||||
|
|
||||||
if (data.status === 404) {
|
if (!response.ok) {
|
||||||
return this.setState({
|
throw new Error('Network response was not ok');
|
||||||
location: variables.getMessage('widgets.weather.not_found'),
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.status === 404) {
|
||||||
|
return this.setState({
|
||||||
|
location: variables.getMessage('widgets.weather.not_found'),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const { temp, temp_min, temp_max, feels_like } = data.main;
|
||||||
|
const tempFormat = localStorage.getItem('tempformat');
|
||||||
|
|
||||||
|
const tempSymbols = {
|
||||||
|
celsius: '°C',
|
||||||
|
kelvin: 'K',
|
||||||
|
fahrenheit: '°F',
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
icon: data.weather[0].icon,
|
||||||
|
temp_text: tempSymbols[tempFormat] || 'K',
|
||||||
|
weather: {
|
||||||
|
temp: convertTemperature(temp, tempFormat),
|
||||||
|
description: data.weather[0].description,
|
||||||
|
temp_min: convertTemperature(temp_min, tempFormat),
|
||||||
|
temp_max: convertTemperature(temp_max, tempFormat),
|
||||||
|
feels_like: convertTemperature(feels_like, tempFormat),
|
||||||
|
humidity: data.main.humidity,
|
||||||
|
wind_speed: data.wind.speed,
|
||||||
|
wind_degrees: data.wind.deg,
|
||||||
|
cloudiness: data.clouds.all,
|
||||||
|
visibility: data.visibility,
|
||||||
|
pressure: data.main.pressure,
|
||||||
|
},
|
||||||
|
done: true,
|
||||||
});
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fetch Error: ', error);
|
||||||
}
|
}
|
||||||
|
|
||||||
let temp = data.main.temp;
|
|
||||||
let temp_min = data.main.temp_min;
|
|
||||||
let temp_max = data.main.temp_max;
|
|
||||||
let feels_like = data.main.feels_like;
|
|
||||||
let temp_text = 'K';
|
|
||||||
|
|
||||||
if (localStorage.getItem('tempformat') === 'celsius') {
|
|
||||||
temp -= 273.15;
|
|
||||||
temp_min -= 273.15;
|
|
||||||
temp_max -= 273.15;
|
|
||||||
feels_like -= 273.15;
|
|
||||||
temp_text = '°C';
|
|
||||||
} else {
|
|
||||||
temp = (temp - 273.15) * 1.8 + 32;
|
|
||||||
temp_min = (temp_min - 273.15) * 1.8 + 32;
|
|
||||||
temp_max = (temp_max - 273.15) * 1.8 + 32;
|
|
||||||
feels_like = (feels_like - 273.15) * 1.8 + 32;
|
|
||||||
temp_text = '°F';
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
icon: data.weather[0].icon,
|
|
||||||
temp_text,
|
|
||||||
weather: {
|
|
||||||
temp: Math.round(temp),
|
|
||||||
description: data.weather[0].description,
|
|
||||||
temp_min: Math.round(temp_min),
|
|
||||||
temp_max: Math.round(temp_max),
|
|
||||||
feels_like: Math.round(feels_like),
|
|
||||||
humidity: data.main.humidity,
|
|
||||||
wind_speed: data.wind.speed,
|
|
||||||
wind_degrees: data.wind.deg,
|
|
||||||
cloudiness: data.clouds.all,
|
|
||||||
visibility: data.visibility,
|
|
||||||
pressure: data.main.pressure,
|
|
||||||
},
|
|
||||||
done: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelector('.top-weather svg').style.fontSize = zoomWeather;
|
document.querySelector('.top-weather svg').style.fontSize = zoomWeather;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -115,13 +121,13 @@ export default class Weather extends PureComponent {
|
||||||
{weatherType >= 1 && (
|
{weatherType >= 1 && (
|
||||||
<div>
|
<div>
|
||||||
<WeatherIcon name={this.state.icon} />
|
<WeatherIcon name={this.state.icon} />
|
||||||
<span>{this.state.weather.temp + this.state.temp_text}</span>
|
<span>{`${this.state.weather.temp}${this.state.temp_text}`}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{weatherType >= 2 && (
|
{weatherType >= 2 && (
|
||||||
<span className="minmax">
|
<span className="minmax">
|
||||||
<span className="subtitle">{this.state.weather.temp_min + this.state.temp_text}</span>
|
<span className="subtitle">{`${this.state.weather.temp_min}${this.state.temp_text}`}</span>
|
||||||
<span className="subtitle">{this.state.weather.temp_max + this.state.temp_text}</span>
|
<span className="subtitle">{`${this.state.weather.temp_max}${this.state.temp_text}`}</span>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -129,7 +135,7 @@ export default class Weather extends PureComponent {
|
||||||
<div className="extra-info">
|
<div className="extra-info">
|
||||||
<span>
|
<span>
|
||||||
{variables.getMessage('widgets.weather.feels_like', {
|
{variables.getMessage('widgets.weather.feels_like', {
|
||||||
amount: this.state.weather.feels_like + this.state.temp_text,
|
amount: `${this.state.weather.feels_like}${this.state.temp_text}`,
|
||||||
})}
|
})}
|
||||||
</span>
|
</span>
|
||||||
<span className="loc">{this.state.location}</span>
|
<span className="loc">{this.state.location}</span>
|
||||||
|
|
|
@ -15,42 +15,30 @@ import {
|
||||||
WiFog,
|
WiFog,
|
||||||
} from 'react-icons/wi';
|
} from 'react-icons/wi';
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
'01d': WiDaySunny,
|
||||||
|
'01n': WiNightClear,
|
||||||
|
'02d': WiDayCloudy,
|
||||||
|
'02n': WiNightCloudy,
|
||||||
|
'03d': WiCloud,
|
||||||
|
'03n': WiCloud,
|
||||||
|
'04d': WiCloudy,
|
||||||
|
'04n': WiCloudy,
|
||||||
|
'09d': WiDayShowers,
|
||||||
|
'09n': WiNightShowers,
|
||||||
|
'10d': WiRain,
|
||||||
|
'10n': WiRain,
|
||||||
|
'11d': WiThunderstorm,
|
||||||
|
'11n': WiThunderstorm,
|
||||||
|
'13d': WiSnow,
|
||||||
|
'13n': WiSnow,
|
||||||
|
'50d': WiFog,
|
||||||
|
'50n': WiFog,
|
||||||
|
};
|
||||||
|
|
||||||
function WeatherIcon({ name }) {
|
function WeatherIcon({ name }) {
|
||||||
// name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
|
const IconComponent = iconMap[name];
|
||||||
switch (name) {
|
return IconComponent ? <IconComponent className="weatherIcon" /> : null;
|
||||||
case '01d':
|
|
||||||
return <WiDaySunny className="weatherIcon" />;
|
|
||||||
case '01n':
|
|
||||||
return <WiNightClear className="weatherIcon" />;
|
|
||||||
case '02d':
|
|
||||||
return <WiDayCloudy className="weatherIcon" />;
|
|
||||||
case '02n':
|
|
||||||
return <WiNightCloudy className="weatherIcon" />;
|
|
||||||
case '03d':
|
|
||||||
case '03n':
|
|
||||||
return <WiCloud className="weatherIcon" />;
|
|
||||||
case '04d':
|
|
||||||
case '04n':
|
|
||||||
return <WiCloudy className="weatherIcon" />;
|
|
||||||
case '09d':
|
|
||||||
return <WiDayShowers className="weatherIcon" />;
|
|
||||||
case '09n':
|
|
||||||
return <WiNightShowers className="weatherIcon" />;
|
|
||||||
case '10d':
|
|
||||||
case '10n':
|
|
||||||
return <WiRain className="weatherIcon" />;
|
|
||||||
case '11d':
|
|
||||||
case '11n':
|
|
||||||
return <WiThunderstorm className="weatherIcon" />;
|
|
||||||
case '13d':
|
|
||||||
case '13n':
|
|
||||||
return <WiSnow className="weatherIcon" />;
|
|
||||||
case '50d':
|
|
||||||
case '50n':
|
|
||||||
return <WiFog className="weatherIcon" />;
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(WeatherIcon);
|
export default memo(WeatherIcon);
|
||||||
|
|
Loading…
Reference in New Issue