mirror of https://github.com/mue/mue.git
refactor(weather): Reduce repeated code on expanded
This commit is contained in:
alexsparkes
parent
90092a80ea
commit
397c67ff83
|
|
@ -1,119 +0,0 @@
|
|||
import { memo, useMemo } from 'react';
|
||||
|
||||
import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
|
||||
import { MdDisabledVisible } from 'react-icons/md';
|
||||
|
||||
import WeatherIcon from './components/WeatherIcon';
|
||||
import WindDirectionIcon from './WindDirectionIcon';
|
||||
|
||||
import { Tooltip } from 'components/Elements';
|
||||
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
|
||||
* weatherType is equal to 3, then return true.
|
||||
* @param {string} setting - The localStorage item to check.
|
||||
* @returns a boolean value.
|
||||
*/
|
||||
const enabled = useMemo(() => {
|
||||
return (setting) => {
|
||||
return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
|
||||
};
|
||||
}, [weatherType]);
|
||||
|
||||
return (
|
||||
<div className="expanded-info">
|
||||
{weatherType >= 3 && (
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('widgets.weather.extra_information')}
|
||||
</span>
|
||||
)}
|
||||
{enabled('cloudiness') && (
|
||||
<Tooltip
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.cloudiness',
|
||||
)}
|
||||
placement="left"
|
||||
>
|
||||
<span>
|
||||
<WiCloud className="weatherIcon" />
|
||||
{weather.cloudiness}%
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{enabled('windspeed') && (
|
||||
<Tooltip
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.wind_speed',
|
||||
)}
|
||||
placement="left"
|
||||
>
|
||||
<span>
|
||||
<WiWindy className="weatherIcon" />
|
||||
{weather.wind_speed}
|
||||
<span className="minmax">m/s</span>{' '}
|
||||
{enabled('windDirection') && (
|
||||
<div style={{ fontSize: '25px', display: 'grid' }}>
|
||||
<WindDirectionIcon className="weatherIcon" degrees={weather.wind_degrees} />
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{enabled('atmosphericpressure') && (
|
||||
<Tooltip
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
|
||||
)}
|
||||
placement="left"
|
||||
>
|
||||
<span>
|
||||
<WiBarometer className="weatherIcon" />
|
||||
{weather.pressure}
|
||||
<span className="minmax">hPa</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{enabled('weatherdescription') && (
|
||||
<Tooltip
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.weather_description',
|
||||
)}
|
||||
placement="left"
|
||||
>
|
||||
<span>
|
||||
<WeatherIcon className="weatherIcon" name={icon} />
|
||||
{weather.description}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{enabled('visibility') && (
|
||||
<Tooltip
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.weather.extra_info.visibility',
|
||||
)}
|
||||
placement="left"
|
||||
>
|
||||
<span>
|
||||
<MdDisabledVisible className="materialWeatherIcon" />
|
||||
{variables.getMessage('widgets.weather.meters', {
|
||||
amount: weather.visibility,
|
||||
})}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{enabled('humidity') && (
|
||||
<Tooltip
|
||||
title={variables.getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
|
||||
placement="left"
|
||||
>
|
||||
<span>
|
||||
<WiHumidity className="materialWeatherIcon" />
|
||||
{weather.humidity}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Expanded);
|
||||
|
|
@ -2,7 +2,7 @@ import variables from 'config/variables';
|
|||
import { PureComponent } from 'react';
|
||||
|
||||
import WeatherIcon from './components/WeatherIcon';
|
||||
import Expanded from './Expanded';
|
||||
import Expanded from './components/Expanded';
|
||||
|
||||
import EventBus from 'utils/eventbus';
|
||||
|
||||
|
|
@ -122,30 +122,30 @@ export default class WeatherSettings extends PureComponent {
|
|||
|
||||
return (
|
||||
<div className="weather">
|
||||
<div className="top-weather">
|
||||
{weatherType >= 1 && (
|
||||
<div>
|
||||
<div className="weatherCore">
|
||||
<div className="iconAndTemps">
|
||||
<div className="weathericon">
|
||||
<WeatherIcon name={this.state.icon} />
|
||||
<span>{`${this.state.weather.temp}${this.state.temp_text}`}</span>
|
||||
</div>
|
||||
)}
|
||||
{weatherType >= 2 && (
|
||||
<span className="minmax">
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
{weatherType >= 2 && (
|
||||
<span className="minmax">
|
||||
<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>
|
||||
<div className="extra-info">
|
||||
<span>
|
||||
{variables.getMessage('widgets.weather.feels_like', {
|
||||
amount: `${this.state.weather.feels_like}${this.state.temp_text}`,
|
||||
})}
|
||||
</span>
|
||||
<span className="loc">{this.state.location}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{weatherType >= 2 && (
|
||||
<div className="extra-info">
|
||||
<span>
|
||||
{variables.getMessage('widgets.weather.feels_like', {
|
||||
amount: `${this.state.weather.feels_like}${this.state.temp_text}`,
|
||||
})}
|
||||
</span>
|
||||
<span className="loc">{this.state.location}</span>
|
||||
</div>
|
||||
)}
|
||||
{weatherType >= 3 && (
|
||||
<Expanded weatherType={weatherType} state={this.state} variables={variables} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
import { memo, useMemo } from 'react';
|
||||
|
||||
import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
|
||||
import { MdDisabledVisible } from 'react-icons/md';
|
||||
|
||||
import WeatherIcon from './WeatherIcon';
|
||||
import WindDirectionIcon from './WindDirectionIcon';
|
||||
|
||||
import { Tooltip } from 'components/Elements';
|
||||
|
||||
const weatherTypes = {
|
||||
cloudiness: {
|
||||
icon: WiCloud,
|
||||
key: 'cloudiness',
|
||||
unit: '%',
|
||||
title: 'modals.main.settings.sections.weather.extra_info.cloudiness',
|
||||
},
|
||||
windspeed: {
|
||||
icon: WiWindy,
|
||||
key: 'wind_speed',
|
||||
unit: 'm/s',
|
||||
title: 'modals.main.settings.sections.weather.extra_info.wind_speed',
|
||||
extra: 'windDirection',
|
||||
},
|
||||
atmosphericpressure: {
|
||||
icon: WiBarometer,
|
||||
key: 'pressure',
|
||||
unit: 'hPa',
|
||||
title: 'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
|
||||
},
|
||||
weatherdescription: {
|
||||
icon: WeatherIcon,
|
||||
key: 'description',
|
||||
title: 'modals.main.settings.sections.weather.extra_info.weather_description',
|
||||
},
|
||||
visibility: {
|
||||
icon: MdDisabledVisible,
|
||||
key: 'visibility',
|
||||
unit: 'm',
|
||||
title: 'modals.main.settings.sections.weather.extra_info.visibility',
|
||||
},
|
||||
humidity: {
|
||||
icon: WiHumidity,
|
||||
key: 'humidity',
|
||||
unit: '%',
|
||||
title: 'modals.main.settings.sections.weather.extra_info.humidity',
|
||||
},
|
||||
};
|
||||
|
||||
function Expanded({ state: { weather, icon }, weatherType, variables }) {
|
||||
const enabled = useMemo(() => {
|
||||
return (setting) => {
|
||||
return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
|
||||
};
|
||||
}, [weatherType]);
|
||||
|
||||
const WeatherTooltip = ({ type }) => {
|
||||
const { icon: Icon, key, unit, title, extra } = weatherTypes[type];
|
||||
return (
|
||||
enabled(type) && (
|
||||
<Tooltip title={variables.getMessage(title)} placement="left">
|
||||
<span>
|
||||
<Icon className="weatherIcon" name={icon} />
|
||||
{`${weather[key]} ${unit || ''}`}
|
||||
{extra && (
|
||||
<div style={{ fontSize: '25px', display: 'grid' }}>
|
||||
<WindDirectionIcon className="weatherIcon" degrees={weather.wind_degrees} />
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const anyTooltipEnabled = Object.keys(weatherTypes).some(enabled);
|
||||
|
||||
return (
|
||||
anyTooltipEnabled && (
|
||||
<div className="expanded-info">
|
||||
{weatherType >= 3 && (
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('widgets.weather.extra_information')}
|
||||
</span>
|
||||
)}
|
||||
{Object.keys(weatherTypes).map((type) => (
|
||||
<WeatherTooltip key={type} type={type} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Expanded);
|
||||
|
|
@ -10,11 +10,8 @@
|
|||
cursor: initial;
|
||||
user-select: none;
|
||||
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
width: auto;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
justify-items: start;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
&:hover {
|
||||
height: auto;
|
||||
|
|
@ -22,15 +19,10 @@
|
|||
}
|
||||
|
||||
.expanded-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.tooltip {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tooltipTitle {
|
||||
max-height: 12px;
|
||||
}
|
||||
|
|
@ -39,7 +31,7 @@
|
|||
.extra-info {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
gap: 40px;
|
||||
gap: 25px;
|
||||
|
||||
@include themed {
|
||||
color: t($weather);
|
||||
|
|
@ -62,11 +54,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.top-weather {
|
||||
width: 100%;
|
||||
.weatherCore {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
gap: 25px;
|
||||
padding: 25px;
|
||||
@include themed() {
|
||||
border-bottom: 1px solid t($btn-backgroundHover);
|
||||
}
|
||||
|
||||
div {
|
||||
align-items: center;
|
||||
|
|
@ -75,10 +70,6 @@
|
|||
svg {
|
||||
font-size: 2em !important;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.minmax {
|
||||
|
|
@ -88,12 +79,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
.weatherIcon {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.iconAndTemps {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
svg {
|
||||
font-size: 2em !important;
|
||||
}
|
||||
span {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-info {
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
text-transform: capitalize;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
padding: 15px 25px 25px 25px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
|
|
@ -101,6 +110,10 @@
|
|||
gap: 10px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include themed {
|
||||
svg {
|
||||
color: t($subColor);
|
||||
|
|
|
|||
Loading…
Reference in New Issue