Fix second load in firefox and localize init (#8525)

hassio/src/addon-store/hassio-addon-store.ts

@@ -199,9 +199,9 @@ class HassioAddonStore extends LitElement {
   }
 
   private async _loadData() {
-    fireEvent(this, "supervisor-colllection-refresh", { colllection: "addon" });
+    fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
-    fireEvent(this, "supervisor-colllection-refresh", {
+    fireEvent(this, "supervisor-collection-refresh", {
-      colllection: "supervisor",
+      collection: "supervisor",
     });
   }
 

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -191,8 +191,8 @@ class HassioAddonDashboard extends LitElement {
     const path: string = pathSplit[pathSplit.length - 1];
 
     if (["uninstall", "install", "update", "start", "stop"].includes(path)) {
-      fireEvent(this, "supervisor-colllection-refresh", {
+      fireEvent(this, "supervisor-collection-refresh", {
-        colllection: "supervisor",
+        collection: "supervisor",
       });
     }
 

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -999,8 +999,8 @@ class HassioAddonInfo extends LitElement {
 
   private async _updateAddon(): Promise<void> {
     await updateHassioAddon(this.hass, this.addon.slug);
-    fireEvent(this, "supervisor-colllection-refresh", {
+    fireEvent(this, "supervisor-collection-refresh", {
-      colllection: "addon",
+      collection: "addon",
     });
     const eventdata = {
       success: true,

hassio/src/dashboard/hassio-update.ts

@@ -210,8 +210,8 @@ export class HassioUpdate extends LitElement {
       } else {
         await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
       }
-      fireEvent(this, "supervisor-colllection-refresh", {
+      fireEvent(this, "supervisor-collection-refresh", {
-        colllection: item.key,
+        collection: item.key,
       });
     } catch (err) {
       // Only show an error if the status code was not expected (user behind proxy)
@@ -232,8 +232,8 @@ export class HassioUpdate extends LitElement {
 
   private async _updateCore(): Promise<void> {
     await updateCore(this.hass);
-    fireEvent(this, "supervisor-colllection-refresh", {
+    fireEvent(this, "supervisor-collection-refresh", {
-      colllection: "core",
+      collection: "core",
     });
   }
 

hassio/src/hassio-panel.ts

@@ -31,7 +31,7 @@ class HassioPanel extends LitElement {
 
     if (
       Object.keys(supervisorCollection).some(
-        (colllection) => !this.supervisor[colllection]
+        (collection) => !this.supervisor[collection]
       )
     ) {
       return html`<hass-loading-screen></hass-loading-screen>`;

hassio/src/supervisor-base-element.ts

@@ -23,19 +23,19 @@ import {
 import { fetchSupervisorStore } from "../../src/data/supervisor/store";
 import {
   getSupervisorEventCollection,
-  subscribeSupervisorEvents,
   Supervisor,
   SupervisorObject,
   supervisorCollection,
 } from "../../src/data/supervisor/supervisor";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
+import { HomeAssistant } from "../../src/types";
 import { getTranslation } from "../../src/util/common-translation";
 
 declare global {
   interface HASSDomEvents {
     "supervisor-update": Partial<Supervisor>;
-    "supervisor-colllection-refresh": { colllection: SupervisorObject };
+    "supervisor-collection-refresh": { collection: SupervisorObject };
   }
 }
 
@@ -53,8 +53,6 @@ export class SupervisorBaseElement extends urlSyncMixin(
     Collection<unknown>
   > = {};
 
-  @internalProperty() private _resources?: Record<string, any>;
-
   @internalProperty() private _language = "en";
 
   public connectedCallback(): void {
@@ -71,12 +69,39 @@ export class SupervisorBaseElement extends urlSyncMixin(
 
   protected updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
+    if (changedProperties.has("hass")) {
+      const oldHass = changedProperties.get("hass") as
+        | HomeAssistant
+        | undefined;
+      if (
+        oldHass !== undefined &&
+        oldHass.language !== undefined &&
+        oldHass.language !== this.hass.language
+      ) {
+        this._language = this.hass.language;
+      }
+    }
 
     if (changedProperties.has("_language")) {
       if (changedProperties.get("_language") !== this._language) {
         this._initializeLocalize();
       }
     }
+
+    if (changedProperties.has("_collections")) {
+      if (this._collections) {
+        const unsubs = Object.keys(this._unsubs);
+        for (const collection of Object.keys(this._collections)) {
+          if (!unsubs.includes(collection)) {
+            this._unsubs[collection] = this._collections[
+              collection
+            ].subscribe((data) =>
+              this._updateSupervisor({ [collection]: data })
+            );
+          }
+        }
+      }
+    }
   }
 
   protected _updateSupervisor(obj: Partial<Supervisor>): void {
@@ -85,7 +110,10 @@ export class SupervisorBaseElement extends urlSyncMixin(
 
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
-    if (this._language !== this.hass.language) {
+    if (
+      this._language !== this.hass.language &&
+      this.hass.language !== undefined
+    ) {
       this._language = this.hass.language;
     }
     this._initializeLocalize();
@@ -99,55 +127,43 @@ export class SupervisorBaseElement extends urlSyncMixin(
       "/api/hassio/app/static/translations"
     );
 
-    this._resources = {
-      [language]: data,
-    };
-
     this.supervisor = {
       ...this.supervisor,
-      localize: await computeLocalize(
+      localize: await computeLocalize(this.constructor.prototype, language, {
-        this.constructor.prototype,
+        [language]: data,
-        this._language,
+      }),
-        this._resources
-      ),
     };
   }
 
   private async _handleSupervisorStoreRefreshEvent(ev) {
-    const colllection = ev.detail.colllection;
+    const collection = ev.detail.collection;
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      this._collections[colllection].refresh();
+      this._collections[collection].refresh();
       return;
     }
 
     const response = await this.hass.callApi<HassioResponse<any>>(
       "GET",
-      `hassio${supervisorCollection[colllection]}`
+      `hassio${supervisorCollection[collection]}`
     );
-    this._updateSupervisor({ [colllection]: response.data });
+    this._updateSupervisor({ [collection]: response.data });
   }
 
   private async _initSupervisor(): Promise<void> {
     this.addEventListener(
-      "supervisor-colllection-refresh",
+      "supervisor-collection-refresh",
       this._handleSupervisorStoreRefreshEvent
     );
 
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      Object.keys(supervisorCollection).forEach((colllection) => {
+      Object.keys(supervisorCollection).forEach((collection) => {
-        this._unsubs[colllection] = subscribeSupervisorEvents(
+        if (collection in this._collections) {
-          this.hass,
+          this._collections[collection].refresh();
-          (data) => this._updateSupervisor({ [colllection]: data }),
-          colllection,
-          supervisorCollection[colllection]
-        );
-        if (this._collections[colllection]) {
-          this._collections[colllection].refresh();
         } else {
-          this._collections[colllection] = getSupervisorEventCollection(
+          this._collections[collection] = getSupervisorEventCollection(
             this.hass.connection,
-            colllection,
+            collection,
-            supervisorCollection[colllection]
+            supervisorCollection[collection]
           );
         }
       });

hassio/src/system/hassio-core-info.ts

@@ -184,8 +184,8 @@ class HassioCoreInfo extends LitElement {
 
   private async _updateCore(): Promise<void> {
     await updateCore(this.hass);
-    fireEvent(this, "supervisor-colllection-refresh", {
+    fireEvent(this, "supervisor-collection-refresh", {
-      colllection: "core",
+      collection: "core",
     });
   }
 

hassio/src/system/hassio-host-info.ts

@@ -342,7 +342,7 @@ class HassioHostInfo extends LitElement {
 
     try {
       await updateOS(this.hass);
-      fireEvent(this, "supervisor-colllection-refresh", { colllection: "os" });
+      fireEvent(this, "supervisor-collection-refresh", { collection: "os" });
     } catch (err) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
@@ -378,8 +378,8 @@ class HassioHostInfo extends LitElement {
     if (hostname && hostname !== curHostname) {
       try {
         await changeHostOptions(this.hass, { hostname });
-        fireEvent(this, "supervisor-colllection-refresh", {
+        fireEvent(this, "supervisor-collection-refresh", {
-          colllection: "host",
+          collection: "host",
         });
       } catch (err) {
         showAlertDialog(this, {
@@ -393,8 +393,8 @@ class HassioHostInfo extends LitElement {
   private async _importFromUSB(): Promise<void> {
     try {
       await configSyncOS(this.hass);
-      fireEvent(this, "supervisor-colllection-refresh", {
+      fireEvent(this, "supervisor-collection-refresh", {
-        colllection: "host",
+        collection: "host",
       });
     } catch (err) {
       showAlertDialog(this, {
@@ -408,8 +408,8 @@ class HassioHostInfo extends LitElement {
 
   private async _loadData(): Promise<void> {
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      fireEvent(this, "supervisor-colllection-refresh", {
+      fireEvent(this, "supervisor-collection-refresh", {
-        colllection: "network",
+        collection: "network",
       });
     } else {
       const network = await fetchNetworkInfo(this.hass);

hassio/src/system/hassio-supervisor-info.ts

@@ -317,8 +317,8 @@ class HassioSupervisorInfo extends LitElement {
 
   private async _reloadSupervisor(): Promise<void> {
     await reloadSupervisor(this.hass);
-    fireEvent(this, "supervisor-colllection-refresh", {
+    fireEvent(this, "supervisor-collection-refresh", {
-      colllection: "supervisor",
+      collection: "supervisor",
     });
   }
 
@@ -386,8 +386,8 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await updateSupervisor(this.hass);
-      fireEvent(this, "supervisor-colllection-refresh", {
+      fireEvent(this, "supervisor-collection-refresh", {
-        colllection: "supervisor",
+        collection: "supervisor",
       });
     } catch (err) {
       showAlertDialog(this, {