From 6ceaf3686c4cfb734bfb1f7a14b58c96e6f5f010 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 19 Jul 2023 23:37:30 -0700
Subject: [PATCH] Fix weather icon DOM warnings
---
src/components/widgets/openmeteo/icon.jsx | 7 -------
src/components/widgets/openmeteo/openmeteo.jsx | 13 +++++--------
src/components/widgets/openweathermap/icon.jsx | 7 -------
src/components/widgets/openweathermap/weather.jsx | 12 ++++--------
src/components/widgets/weather/icon.jsx | 7 -------
src/components/widgets/weather/weather.jsx | 11 ++++-------
src/components/widgets/widget/widget_icon.jsx | 5 ++---
7 files changed, 15 insertions(+), 47 deletions(-)
delete mode 100644 src/components/widgets/openmeteo/icon.jsx
delete mode 100644 src/components/widgets/openweathermap/icon.jsx
delete mode 100644 src/components/widgets/weather/icon.jsx
diff --git a/src/components/widgets/openmeteo/icon.jsx b/src/components/widgets/openmeteo/icon.jsx
deleted file mode 100644
index 12d93fcb..00000000
--- a/src/components/widgets/openmeteo/icon.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import mapIcon from "utils/weather/openmeteo-condition-map";
-
-export default function Icon({ condition, timeOfDay }) {
- const IconComponent = mapIcon(condition, timeOfDay);
-
- return <IconComponent className="w-10 h-10 text-theme-800 dark:text-theme-200" />;
-}
diff --git a/src/components/widgets/openmeteo/openmeteo.jsx b/src/components/widgets/openmeteo/openmeteo.jsx
index 040a3b6b..0614d925 100644
--- a/src/components/widgets/openmeteo/openmeteo.jsx
+++ b/src/components/widgets/openmeteo/openmeteo.jsx
@@ -10,8 +10,7 @@ import ContainerButton from "../widget/container_button";
import WidgetIcon from "../widget/widget_icon";
import PrimaryText from "../widget/primary_text";
import SecondaryText from "../widget/secondary_text";
-
-import Icon from "./icon";
+import mapIcon from "../../../utils/weather/openmeteo-condition-map";
function Widget({ options }) {
const { t } = useTranslation();
@@ -33,10 +32,8 @@ function Widget({ options }) {
}
const unit = options.units === "metric" ? "celsius" : "fahrenheit";
- const weatherInfo = {
- condition: data.current_weather.weathercode,
- timeOfDay: data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0] ? "day" : "night"
- };
+ const condition = data.current_weather.weathercode;
+ const timeOfDay = data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0] ? "day" : "night";
return <Container options={options}>
<PrimaryText>
@@ -47,8 +44,8 @@ function Widget({ options }) {
unit,
})}
</PrimaryText>
- <SecondaryText>{t(`wmo.${data.current_weather.weathercode}-${weatherInfo.timeOfDay}`)}</SecondaryText>
- <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
+ <SecondaryText>{t(`wmo.${data.current_weather.weathercode}-${timeOfDay}`)}</SecondaryText>
+ <WidgetIcon icon={mapIcon(condition, timeOfDay)} size="xl" />
</Container>;
}
diff --git a/src/components/widgets/openweathermap/icon.jsx b/src/components/widgets/openweathermap/icon.jsx
deleted file mode 100644
index a2b01ba1..00000000
--- a/src/components/widgets/openweathermap/icon.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import mapIcon from "utils/weather/owm-condition-map";
-
-export default function Icon({ condition, timeOfDay }) {
- const IconComponent = mapIcon(condition, timeOfDay);
-
- return <IconComponent className="w-10 h-10 text-theme-800 dark:text-theme-200" />;
-}
diff --git a/src/components/widgets/openweathermap/weather.jsx b/src/components/widgets/openweathermap/weather.jsx
index a857f13a..32c81f06 100644
--- a/src/components/widgets/openweathermap/weather.jsx
+++ b/src/components/widgets/openweathermap/weather.jsx
@@ -10,9 +10,7 @@ import ContainerButton from "../widget/container_button";
import PrimaryText from "../widget/primary_text";
import SecondaryText from "../widget/secondary_text";
import WidgetIcon from "../widget/widget_icon";
-
-import Icon from "./icon";
-
+import mapIcon from "../../../utils/weather/owm-condition-map";
function Widget({ options }) {
const { t, i18n } = useTranslation();
@@ -35,15 +33,13 @@ function Widget({ options }) {
const unit = options.units === "metric" ? "celsius" : "fahrenheit";
- const weatherInfo = {
- condition: data.weather[0].id,
- timeOfDay: data.dt > data.sys.sunrise && data.dt < data.sys.sunset ? "day" : "night"
- };
+ const condition = data.weather[0].id;
+ const timeOfDay = data.dt > data.sys.sunrise && data.dt < data.sys.sunset ? "day" : "night";
return <Container options={options}>
<PrimaryText>{options.label && `${options.label}, ` }{t("common.number", { value: data.main.temp, style: "unit", unit })}</PrimaryText>
<SecondaryText>{data.weather[0].description}</SecondaryText>
- <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
+ <WidgetIcon icon={mapIcon(condition, timeOfDay)} size="xl" />
</Container>;
}
diff --git a/src/components/widgets/weather/icon.jsx b/src/components/widgets/weather/icon.jsx
deleted file mode 100644
index 79406ae7..00000000
--- a/src/components/widgets/weather/icon.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import mapIcon from "utils/weather/condition-map";
-
-export default function Icon({ condition, timeOfDay }) {
- const IconComponent = mapIcon(condition, timeOfDay);
-
- return <IconComponent className="w-10 h-10 text-theme-800 dark:text-theme-200" />;
-}
diff --git a/src/components/widgets/weather/weather.jsx b/src/components/widgets/weather/weather.jsx
index 702ea669..20d4eeee 100644
--- a/src/components/widgets/weather/weather.jsx
+++ b/src/components/widgets/weather/weather.jsx
@@ -10,8 +10,7 @@ import PrimaryText from "../widget/primary_text";
import SecondaryText from "../widget/secondary_text";
import WidgetIcon from "../widget/widget_icon";
import ContainerButton from "../widget/container_button";
-
-import Icon from "./icon";
+import mapIcon from "../../../utils/weather/condition-map";
function Widget({ options }) {
const { t, i18n } = useTranslation();
@@ -33,10 +32,8 @@ function Widget({ options }) {
}
const unit = options.units === "metric" ? "celsius" : "fahrenheit";
- const weatherInfo = {
- condition: data.current.condition.code,
- timeOfDay: data.current.is_day ? "day" : "night",
- };
+ const condition = data.current.condition.code;
+ const timeOfDay = data.current.is_day ? "day" : "night";
return <Container options={options}>
<PrimaryText>
@@ -48,7 +45,7 @@ function Widget({ options }) {
})}
</PrimaryText>
<SecondaryText>{data.current.condition.text}</SecondaryText>
- <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
+ <WidgetIcon icon={mapIcon(condition, timeOfDay)} size="xl" />
</Container>;
}
diff --git a/src/components/widgets/widget/widget_icon.jsx b/src/components/widgets/widget/widget_icon.jsx
index 9766a879..557cba01 100644
--- a/src/components/widgets/widget/widget_icon.jsx
+++ b/src/components/widgets/widget/widget_icon.jsx
@@ -1,6 +1,5 @@
-export default function WidgetIcon({ icon, size = "s", pulse = false, weatherInfo = {} }) {
+export default function WidgetIcon({ icon, size = "s", pulse = false }) {
const Icon = icon;
- const { condition, timeOfDay } = weatherInfo;
let additionalClasses = "text-theme-800 dark:text-theme-200 ";
switch (size) {
@@ -14,5 +13,5 @@ export default function WidgetIcon({ icon, size = "s", pulse = false, weatherInf
additionalClasses += "animate-pulse ";
}
- return <Icon className={additionalClasses} condition={condition} timeOfDay={timeOfDay} />;
+ return <Icon className={additionalClasses} />;
}