fix(forms): fix disapearing changes on device state update

nurikk · Mar 19, 2023 · 84882cc · 84882cc
1 parent 3db4ecd
commit 84882cc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/components/device-page/bind.tsx b/src/components/device-page/bind.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Device, Cluster, Endpoint } from "../../types";
 import BindRow from "./bind-row";
 import actions from "../../actions/actions";
@@ -59,7 +59,7 @@ export function Bind(props: BindProps & PropsFromStore & BindApi): JSX.Element {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [newBindingRule] = useState<NiceBindingRule>({ isNew: Date.now(), target: {} as BindTarget, source: { 'ieee_address': device.ieee_address, endpoint: "" }, clusters: [] })
 
-    const bidingRules = convertBindingsIntoNiceStructure(device);
+    const bidingRules = useMemo(() => convertBindingsIntoNiceStructure(device), [device]);
     return <div className="container-fluid">
         {
             [...bidingRules, newBindingRule]

diff --git a/src/components/device-page/reporting.tsx b/src/components/device-page/reporting.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Device, Cluster, Endpoint, Attribute } from "../../types";
 
 import actions, { ReportingApi } from "../../actions/actions";
@@ -51,7 +51,7 @@ function Reporting(props: ReportingProps & PropsFromStore & ReportingApi): JSX.E
             cluster, attribute, minimum_report_interval, maximum_report_interval, reportable_change
         });
     }
-    const reportingRules = convertBindingsIntoNiceStructure(device);
+    const reportingRules = useMemo(() => convertBindingsIntoNiceStructure(device), [device]);
     return (
         <div className="container-fluid">
             {

diff --git a/src/components/features/composite/composite.tsx b/src/components/features/composite/composite.tsx
@@ -7,6 +7,7 @@ import groupBy from "lodash/groupBy";
 import { Feature } from "./Feature";
 import cx from "classnames";
 import { WithTranslation, withTranslation } from "react-i18next";
+import isEqual from "lodash/isEqual";
 
 type CompositeType = "composite" | "light" | "switch" | "cover" | "lock" | "fan" | "climate";
 
@@ -140,5 +141,8 @@ export class Composite extends Component<CompositeProps & WithTranslation<"compo
 
     }
 }
-
-export default withTranslation(["composite", "common"])(Composite);
+function compositePropsAreEqual(prevProps: CompositeProps, nextProps: CompositeProps){
+    const checkProps: (keyof CompositeProps)[] = ['deviceState', 'device', 'feature'];
+    return checkProps.every(p => isEqual(prevProps[p], nextProps[p]));
+}
+export default withTranslation(["composite", "common"])(React.memo(Composite, compositePropsAreEqual));