From 70f59eeec6726c071ce23bbbbe235dc889d15448 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 27 May 2020 15:25:28 +0200
Subject: [PATCH] MIgrate entity-filter-badge to updating element (#6050)

---
 .../badges/hui-entity-filter-badge.ts         | 68 ++++++++++---------
 src/panels/lovelace/views/hui-view.ts         |  2 +-
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/panels/lovelace/badges/hui-entity-filter-badge.ts b/src/panels/lovelace/badges/hui-entity-filter-badge.ts
index e187e8935e..29edf4ab63 100644
--- a/src/panels/lovelace/badges/hui-entity-filter-badge.ts
+++ b/src/panels/lovelace/badges/hui-entity-filter-badge.ts
@@ -5,16 +5,17 @@ import { createBadgeElement } from "../create-element/create-badge-element";
 import { EntityFilterEntityConfig } from "../entity-rows/types";
 import { LovelaceBadge } from "../types";
 import { EntityFilterBadgeConfig } from "./types";
+import { UpdatingElement, property, PropertyValues } from "lit-element";
+
+class EntityFilterBadge extends UpdatingElement implements LovelaceBadge {
+  @property() public hass!: HomeAssistant;
+
+  @property() private _config?: EntityFilterBadgeConfig;
 
-class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
   private _elements?: LovelaceBadge[];
 
-  private _config?: EntityFilterBadgeConfig;
-
   private _configEntities?: EntityFilterEntityConfig[];
 
-  private _hass?: HomeAssistant;
-
   private _oldEntities?: EntityFilterEntityConfig[];
 
   public setConfig(config: EntityFilterBadgeConfig): void {
@@ -34,39 +35,43 @@ class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
       throw new Error("Incorrect filter config.");
     }
 
-    this._config = config;
-    this._configEntities = undefined;
-
-    if (this.lastChild) {
+    while (this.lastChild) {
       this.removeChild(this.lastChild);
-      this._elements = undefined;
     }
+    this._elements = undefined;
+
+    this._configEntities = processConfigEntities(config.entities);
+    this._oldEntities = undefined;
+    this._config = config;
   }
 
-  set hass(hass: HomeAssistant) {
-    if (!hass || !this._config) {
+  protected shouldUpdate(changedProperties: PropertyValues): boolean {
+    if (
+      changedProperties.has("_config") ||
+      (changedProperties.has("hass") &&
+        this.haveEntitiesChanged(
+          changedProperties.get("hass") as HomeAssistant | undefined
+        ))
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  protected update(changedProperties: PropertyValues) {
+    super.update(changedProperties);
+    if (!this.hass || !this._configEntities) {
       return;
     }
 
     if (this._elements) {
       for (const element of this._elements) {
-        element.hass = hass;
+        element.hass = this.hass;
       }
     }
 
-    if (!this.haveEntitiesChanged(hass)) {
-      this._hass = hass;
-      return;
-    }
-
-    this._hass = hass;
-
-    if (!this._configEntities) {
-      this._configEntities = processConfigEntities(this._config.entities);
-    }
-
     const entitiesList = this._configEntities.filter((entityConf) => {
-      const stateObj = hass.states[entityConf.entity];
+      const stateObj = this.hass.states[entityConf.entity];
 
       if (!stateObj) {
         return false;
@@ -91,6 +96,7 @@ class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
 
     if (entitiesList.length === 0) {
       this.style.display = "none";
+      this._oldEntities = entitiesList;
       return;
     }
 
@@ -103,7 +109,7 @@ class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
       this._elements = [];
       for (const badgeConfig of entitiesList) {
         const element = createBadgeElement(badgeConfig);
-        element.hass = hass;
+        element.hass = this.hass;
         this._elements.push(element);
       }
       this._oldEntities = entitiesList;
@@ -124,17 +130,17 @@ class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
     this.style.display = "inline";
   }
 
-  private haveEntitiesChanged(hass: HomeAssistant): boolean {
-    if (!this._hass) {
+  private haveEntitiesChanged(oldHass?: HomeAssistant): boolean {
+    if (!oldHass) {
       return true;
     }
 
-    if (!this._configEntities || this._hass.localize !== hass.localize) {
+    if (!this._oldEntities || this.hass.localize !== oldHass.localize) {
       return true;
     }
 
-    for (const config of this._configEntities) {
-      if (this._hass.states[config.entity] !== hass.states[config.entity]) {
+    for (const config of this._configEntities!) {
+      if (this.hass.states[config.entity] !== oldHass.states[config.entity]) {
         return true;
       }
     }
diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts
index a2a986a2db..024eedb42a 100644
--- a/src/panels/lovelace/views/hui-view.ts
+++ b/src/panels/lovelace/views/hui-view.ts
@@ -162,7 +162,7 @@ export class HUIView extends LitElement {
 
     if (hassChanged && !configChanged) {
       this._cards.forEach((element) => {
-        element.hass = this.hass;
+        element.hass = hass;
       });
     }