From 397c67ff833765402ab23b565d2368560ba713e2 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Fri, 23 Feb 2024 22:40:45 +0000 Subject: [PATCH] refactor(weather): Reduce repeated code on expanded --- src/features/widgets/weather/Expanded.jsx | 119 ------------------ src/features/widgets/weather/Weather.jsx | 38 +++--- .../widgets/weather/components/Expanded.jsx | 94 ++++++++++++++ .../{ => components}/WindDirectionIcon.jsx | 0 src/features/widgets/weather/weather.scss | 51 +++++--- 5 files changed, 145 insertions(+), 157 deletions(-) delete mode 100644 src/features/widgets/weather/Expanded.jsx create mode 100644 src/features/widgets/weather/components/Expanded.jsx rename src/features/widgets/weather/{ => components}/WindDirectionIcon.jsx (100%) diff --git a/src/features/widgets/weather/Expanded.jsx b/src/features/widgets/weather/Expanded.jsx deleted file mode 100644 index 4f6e0743..00000000 --- a/src/features/widgets/weather/Expanded.jsx +++ /dev/null @@ -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 ( -
- {weatherType >= 3 && ( - - {variables.getMessage('widgets.weather.extra_information')} - - )} - {enabled('cloudiness') && ( - - - - {weather.cloudiness}% - - - )} - {enabled('windspeed') && ( - - - - {weather.wind_speed} - m/s{' '} - {enabled('windDirection') && ( -
- -
- )} - - - )} - {enabled('atmosphericpressure') && ( - - - - {weather.pressure} - hPa - - - )} - {enabled('weatherdescription') && ( - - - - {weather.description} - - - )} - {enabled('visibility') && ( - - - - {variables.getMessage('widgets.weather.meters', { - amount: weather.visibility, - })} - - - )} - {enabled('humidity') && ( - - - - {weather.humidity} - - - )} -
- ); -} - -export default memo(Expanded); diff --git a/src/features/widgets/weather/Weather.jsx b/src/features/widgets/weather/Weather.jsx index 7f2944d9..a1090c56 100644 --- a/src/features/widgets/weather/Weather.jsx +++ b/src/features/widgets/weather/Weather.jsx @@ -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 (
-
- {weatherType >= 1 && ( -
+
+
+
{`${this.state.weather.temp}${this.state.temp_text}`}
- )} + {weatherType >= 2 && ( + + {`${this.state.weather.temp_min}${this.state.temp_text}`} + {`${this.state.weather.temp_max}${this.state.temp_text}`} + + )} +
{weatherType >= 2 && ( - - {`${this.state.weather.temp_min}${this.state.temp_text}`} - {`${this.state.weather.temp_max}${this.state.temp_text}`} - +
+ + {variables.getMessage('widgets.weather.feels_like', { + amount: `${this.state.weather.feels_like}${this.state.temp_text}`, + })} + + {this.state.location} +
)}
- {weatherType >= 2 && ( -
- - {variables.getMessage('widgets.weather.feels_like', { - amount: `${this.state.weather.feels_like}${this.state.temp_text}`, - })} - - {this.state.location} -
- )} {weatherType >= 3 && ( )} diff --git a/src/features/widgets/weather/components/Expanded.jsx b/src/features/widgets/weather/components/Expanded.jsx new file mode 100644 index 00000000..18edb242 --- /dev/null +++ b/src/features/widgets/weather/components/Expanded.jsx @@ -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) && ( + + + + {`${weather[key]} ${unit || ''}`} + {extra && ( +
+ +
+ )} + + + ) + ); + }; + + const anyTooltipEnabled = Object.keys(weatherTypes).some(enabled); + + return ( + anyTooltipEnabled && ( +
+ {weatherType >= 3 && ( + + {variables.getMessage('widgets.weather.extra_information')} + + )} + {Object.keys(weatherTypes).map((type) => ( + + ))} +
+ ) + ); +} + +export default memo(Expanded); diff --git a/src/features/widgets/weather/WindDirectionIcon.jsx b/src/features/widgets/weather/components/WindDirectionIcon.jsx similarity index 100% rename from src/features/widgets/weather/WindDirectionIcon.jsx rename to src/features/widgets/weather/components/WindDirectionIcon.jsx diff --git a/src/features/widgets/weather/weather.scss b/src/features/widgets/weather/weather.scss index 7e9fa554..d4d8ab03 100644 --- a/src/features/widgets/weather/weather.scss +++ b/src/features/widgets/weather/weather.scss @@ -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);