fix: various optimizations

Author: Nerivec

src/components/dashboard-page/DashboardFeatureWrapper.tsx

@@ -7,11 +7,10 @@ import type { FeatureWrapperProps } from "../features/FeatureWrapper.js";
 import { getFeatureIcon } from "../features/index.js";
 
 const DashboardFeatureWrapper = memo((props: PropsWithChildren<FeatureWrapperProps>) => {
-    const { children, feature, deviceState = {} } = props;
-    const fi = useMemo(
-        () => getFeatureIcon(feature.name, deviceState[feature.property!], "unit" in feature ? feature.unit : undefined),
-        [feature, deviceState],
-    );
+    const { children, feature, deviceValue } = props;
+    // @ts-expect-error `undefined` is fine
+    const unit = feature.unit as string | undefined;
+    const fi = useMemo(() => getFeatureIcon(feature.name, deviceValue, unit), [unit, feature.name, deviceValue]);
     const { t } = useTranslation(["featureNames", "zigbee"]);
     const featureName = feature.name === "state" ? feature.property : feature.name;
     const fallbackFeatureName = startCase(camelCase(featureName));

src/components/device-page/tabs/DeviceInfo.tsx

@@ -92,7 +92,7 @@ export default function DeviceInfo(props: DeviceInfoProps) {
     return (
         <div className="card lg:card-side bg-base-100">
             <figure className="w-64 h-64" style={{ overflow: "visible" }}>
-                <DeviceImage device={device} deviceState={deviceState} disabled={device.disabled} className="" />
+                <DeviceImage device={device} otaState={deviceState.update} disabled={device.disabled} className="" />
             </figure>
             <div className="card-body">
                 <h2 className="card-title">
@@ -134,7 +134,7 @@ export default function DeviceInfo(props: DeviceInfoProps) {
                     <div className="stat">
                         <div className="stat-title">{t("last_seen")}</div>
                         <div className="stat-value">
-                            <LastSeen config={bridgeConfig.advanced.last_seen} state={deviceState} />
+                            <LastSeen config={bridgeConfig.advanced.last_seen} lastSeen={deviceState.last_seen} />
                         </div>
                         <div className="stat-desc">
                             {t("availability:availability")}

src/components/device/DeviceCard.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from "react";
-import type { FeatureWithAnySubFeatures, LastSeenConfig } from "../../types.js";
-import { type BaseFeatureProps, getFeatureKey } from "../features/index.js";
+import type { DeviceState, FeatureWithAnySubFeatures, LastSeenConfig } from "../../types.js";
+import { type BaseWithSubFeaturesProps, getFeatureKey } from "../features/index.js";
 
 import { Link } from "react-router";
 
@@ -13,8 +13,9 @@ import { Lqi } from "../value-decorators/Lqi.js";
 import PowerSource from "../value-decorators/PowerSource.js";
 import { DeviceImage } from "./DeviceImage.js";
 
-type Props = Omit<BaseFeatureProps<FeatureWithAnySubFeatures>, "feature"> &
+type Props = Omit<BaseWithSubFeaturesProps<FeatureWithAnySubFeatures>, "feature" | "deviceState"> &
     PropsWithChildren<{
+        deviceState: DeviceState;
         features: FeatureWithAnySubFeatures[];
         lastSeenConfig: LastSeenConfig;
         endpoint?: string | number;
@@ -38,7 +39,7 @@ export default function DeviceCard({
             <li className="list-row flex-grow">
                 <div className="h-12 w-12" style={{ overflow: "visible" }}>
                     {/* disabled always false because dashboard does not contain disabled devices */}
-                    <DeviceImage disabled={false} device={device} deviceState={deviceState} />
+                    <DeviceImage disabled={false} device={device} otaState={deviceState.update} />
                 </div>
                 <div>
                     <Link to={`/device/${device.ieee_address}`} className="link link-hover">
@@ -74,7 +75,7 @@ export default function DeviceCard({
             </li>
             <li className="flex flex-row flex-wrap gap-1 m-4 justify-around items-center">
                 <span className="badge badge-soft badge-ghost cursor-default" title={t("last_seen")}>
-                    <LastSeen state={deviceState} config={lastSeenConfig} />
+                    <LastSeen lastSeen={deviceState.last_seen} config={lastSeenConfig} />
                 </span>
                 <span className="badge badge-soft badge-ghost cursor-default" title={t("lqi")}>
                     <Lqi value={deviceState.linkquality as number | undefined} />

src/components/device/DeviceImage.tsx

@@ -5,20 +5,20 @@ import { useTranslation } from "react-i18next";
 import { InterviewState } from "../../consts.js";
 import genericDevice from "../../images/generic-zigbee-device.png";
 import type { Device, DeviceState } from "../../types.js";
-import { ErrorBoundary } from "./ErrorBoundary.js";
-import { LazyImage } from "./LazyImage.js";
+import ErrorBoundary from "./ErrorBoundary.js";
+import LazyImage from "./LazyImage.js";
 
 type DeviceImageProps = {
     device: Device;
-    deviceState?: DeviceState;
+    otaState?: DeviceState["update"];
     disabled: boolean;
     className?: string;
     noIndicator?: boolean;
 };
 
 export function DeviceImage(props: Readonly<DeviceImageProps>) {
     const { t } = useTranslation("zigbee");
-    const { device = {} as Device, disabled, deviceState, className, noIndicator } = props;
+    const { device = {} as Device, disabled, otaState, className, noIndicator } = props;
 
     const interviewState = useMemo(
         () =>
@@ -54,7 +54,7 @@ export function DeviceImage(props: Readonly<DeviceImageProps>) {
                     <LazyImage device={device} className={`grid place-items-center${className ? ` ${className}` : ""}`} />
                 ) : (
                     <div className="indicator w-full">
-                        {deviceState?.update?.state === "updating" && (
+                        {otaState?.state === "updating" && (
                             <FontAwesomeIcon
                                 icon={faSync}
                                 spin

src/components/device/ErrorBoundary.tsx

@@ -7,6 +7,6 @@ type ErrorBoundaryProps = {
     children: JSX.Element | JSX.Element[];
 };
 
-export function ErrorBoundary({ error, children }: ErrorBoundaryProps) {
+export default function ErrorBoundary({ error, children }: ErrorBoundaryProps) {
     return error ? <FontAwesomeIcon icon={faExclamationTriangle} size="3x" className="text-error" title="Missing image" /> : children;
 }

src/components/device/LazyImage.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useImage } from "react-image";
 import genericDevice from "../../images/generic-zigbee-device.png";
 import type { Device } from "../../types.js";
@@ -8,8 +9,7 @@ type LazyImageProps = {
     className?: string;
 };
 
-export function LazyImage(props: Readonly<LazyImageProps>) {
-    const { device, ...rest } = props;
+const LazyImage = memo(({ device, className }: Readonly<LazyImageProps>) => {
     const fromDefinition = device.definition?.icon;
     const fromZ2MDocs = getZ2MDeviceImage(device);
     const srcList: string[] = [];
@@ -28,6 +28,7 @@ export function LazyImage(props: Readonly<LazyImageProps>) {
 
     const { src } = useImage({ srcList });
 
-    // biome-ignore lint/a11y/useAltText: bad detection
-    return <img alt={device.ieee_address} crossOrigin={"anonymous"} src={src} {...rest} />;
-}
+    return <img alt={device.ieee_address} crossOrigin={"anonymous"} src={src} className={className} />;
+});
+
+export default LazyImage;

src/components/features/BaseViewer.tsx

@@ -3,15 +3,15 @@ import type { BasicFeature } from "../../types.js";
 import { DisplayValue } from "../value-decorators/DisplayValue.js";
 import type { BaseFeatureProps } from "./index.js";
 
-const BaseViewer = memo((props: BaseFeatureProps<BasicFeature>) => {
+const BaseViewer = memo(({ feature, deviceValue }: BaseFeatureProps<BasicFeature>) => {
     return (
         <div>
-            {props.feature.property && (
+            {feature.property && (
                 <span className="font-bold">
-                    <DisplayValue value={props.deviceState[props.feature.property]} name={props.feature.name} />
+                    <DisplayValue value={deviceValue} name={feature.name} />
                 </span>
             )}
-            {"unit" in props.feature && <span className="text-xs ms-1">{props.feature.unit}</span>}
+            {"unit" in feature && <span className="text-xs ms-1">{feature.unit}</span>}
         </div>
     );
 });

src/components/features/Binary.tsx

@@ -14,7 +14,7 @@ type BinaryProps = BaseFeatureProps<BinaryFeature>;
 const Binary = memo((props: BinaryProps) => {
     const {
         feature: { access = FeatureAccessMode.SET, name, property, value_off: valueOff, value_on: valueOn },
-        deviceState,
+        deviceValue,
         onChange,
         minimal,
     } = props;
@@ -26,8 +26,7 @@ const Binary = memo((props: BinaryProps) => {
     );
 
     if (access & FeatureAccessMode.SET) {
-        const value = deviceState[property];
-        const valueExists = value != null;
+        const valueExists = deviceValue != null;
         const showOnOffButtons = !minimal || (minimal && !valueExists);
 
         return (
@@ -38,7 +37,7 @@ const Binary = memo((props: BinaryProps) => {
                     </Button>
                 )}
                 {valueExists ? (
-                    <input className="toggle" type="checkbox" checked={value === valueOn} onChange={onCheckboxChange} />
+                    <input className="toggle" type="checkbox" checked={deviceValue === valueOn} onChange={onCheckboxChange} />
                 ) : (
                     <FontAwesomeIcon icon={faQuestion} title={t("unknown")} />
                 )}

src/components/features/Climate.tsx

@@ -1,9 +1,9 @@
 import { memo } from "react";
 import type { ClimateFeature, WithAnySubFeatures } from "../../types.js";
 import FeatureSubFeatures from "./FeatureSubFeatures.js";
-import type { BaseFeatureProps } from "./index.js";
+import type { BaseWithSubFeaturesProps } from "./index.js";
 
-type ClimateProps = BaseFeatureProps<WithAnySubFeatures<ClimateFeature>>;
+type ClimateProps = BaseWithSubFeaturesProps<WithAnySubFeatures<ClimateFeature>>;
 
 const Climate = memo((props: ClimateProps) => {
     return <FeatureSubFeatures {...props} />;

src/components/features/Color.tsx

@@ -6,17 +6,17 @@ import type { BaseFeatureProps } from "./index.js";
 type ColorProps = BaseFeatureProps<ColorFeature>;
 
 const Color = memo((props: ColorProps) => {
-    const { deviceState, feature, onChange, minimal } = props;
+    const { deviceValue, feature, onChange, minimal } = props;
 
     const value = useMemo(() => {
         const val = {} as AnyColor;
 
         for (const innerFeature of feature.features) {
-            val[innerFeature.name] = deviceState[feature.property]?.[innerFeature.property] ?? 0;
+            val[innerFeature.name] = deviceValue?.[innerFeature.property] ?? 0;
         }
 
         return val;
-    }, [deviceState[feature.property], feature]);
+    }, [deviceValue, feature]);
 
     const onEditorChange = useCallback((color: AnyColor | { hex: string }) => onChange({ color }), [onChange]);