chore(ui): move to ui-ready pattern

Author: zunderscore

src/backend/backup-manager.ts

@@ -39,11 +39,12 @@ class BackupManager {
 
         SettingsManager.on("settings:setting-updated:BackupLocation", () => {
             this.updateBackupFolderPath();
+            this.triggerUiRefresh();
         });
 
-        frontendCommunicator.onAsync("backups:get-backup-folder-path", async () => {
-            return this._backupFolderPath;
-        });
+        frontendCommunicator.onAsync("backups:ui-service-ready",
+            async () => this.triggerUiRefresh()
+        );
 
         frontendCommunicator.onAsync("backups:get-backup-list", async () => {
             return await this.getBackupList();
@@ -392,6 +393,13 @@ class BackupManager {
         frontendCommunicator.send("backups:move-backup-folder-completed", success);
         return success;
     }
+
+    triggerUiRefresh(): void {
+        this.logger.debug("Triggering UI refresh");
+        frontendCommunicator.send("backups:backup-data-updated", {
+            backupFolderPath: this._backupFolderPath
+        });
+    }
 }
 
 const backupManager = new BackupManager();

src/backend/common/icon-manager.ts

@@ -1,6 +1,7 @@
 import type { FontAwesomeIcon } from "../../types";
 
 import frontendCommunicator from "./frontend-communicator";
+import { LoggerCache } from "../logger-cache";
 
 enum FontAwesomeStyle {
     Brands = "brands",
@@ -41,10 +42,13 @@ type FontAwesomeIconDefinitions = {
 const ICON_DEFINITION_URL = "https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@master/metadata/icons.json";
 
 class IconManager {
+    private logger = LoggerCache.getLogger("Icons");
     icons: FontAwesomeIcon[] = [];
 
     constructor() {
-        frontendCommunicator.onAsync("all-font-awesome-icons", async () => this.icons);
+        frontendCommunicator.onAsync("icons:ui-service-ready",
+            async () => this.triggerUiRefresh()
+        );
     }
 
     async loadFontAwesomeIcons(): Promise<void> {
@@ -80,6 +84,11 @@ class IconManager {
             }
         });
     }
+
+    triggerUiRefresh(): void {
+        this.logger.debug("Triggering UI refresh");
+        frontendCommunicator.send("icons:icons-updated", this.icons ?? []);
+    }
 }
 
 const iconManager = new IconManager();

src/backend/currency/currency-access.ts

@@ -21,6 +21,10 @@ class CurrencyAccess extends EventEmitter {
     constructor() {
         super();
 
+        frontendCommunicator.onAsync("currencies:ui-service-ready",
+            async () => this.triggerUiRefresh()
+        );
+
         frontendCommunicator.onAsync("currencies:get-currencies", async () => {
             return this.getCurrencies();
         });
@@ -77,7 +81,7 @@ class CurrencyAccess extends EventEmitter {
         }
 
         this._currencyCache = cache;
-        frontendCommunicator.send("currencies:currencies-updated", this.getCurrencies());
+        this.triggerUiRefresh();
     }
 
     getCurrencies(): CurrencyCache {
@@ -187,7 +191,12 @@ class CurrencyAccess extends EventEmitter {
 
     private saveAllCurrencies(): void {
         this.getCurrencyDb().push("/", this._currencyCache);
-        frontendCommunicator.send("currencies:currencies-updated", this.getCurrencies());
+        this.triggerUiRefresh();
+    }
+
+    triggerUiRefresh(): void {
+        this.logger.debug("Triggering UI refresh");
+        frontendCommunicator.send("currencies:currencies-updated", Object.values(this.getCurrencies()));
     }
 }
 

src/backend/effects/builtin/custom-variable.ts

@@ -74,7 +74,7 @@ const effect: EffectType<{
         }
 
         $scope.openVariableInspector = function () {
-            backendCommunicator.fireEvent("show-variable-inspector");
+            backendCommunicator.send("show-variable-inspector");
         };
 
         $scope.editors = [

src/backend/events/events-access.ts

@@ -27,6 +27,10 @@ class EventsAccess {
     private _sortTags: SortTag[] = [];
 
     constructor() {
+        frontendCommunicator.onAsync("events:ui-service-ready",
+            async () => this.triggerUiRefresh()
+        );
+
         frontendCommunicator.onAsync("events:get-all-event-data", async () => {
             this.logger.debug("got 'get all event data' request");
             return {
@@ -313,7 +317,7 @@ class EventsAccess {
             this._mainEvents[index] = event;
 
             this.saveMainEvents(this._mainEvents);
-            frontendCommunicator.send("main-events-update");
+            this.triggerUiRefresh();
         } else {
             for (const [groupId, group] of Object.entries(this._groups)) {
                 event = this._groups[groupId].events.find(e => e.id === eventId);
@@ -346,8 +350,15 @@ class EventsAccess {
         frontendCommunicator.send("event-group-update", group);
     }
 
-    triggerUiRefresh() {
-        frontendCommunicator.send("main-events-update");
+    triggerUiRefresh(): void {
+        this.logger.debug("Triggering UI update");
+        frontendCommunicator.send("events:main-events-update", {
+            mainEvents: Array.isArray(this._mainEvents)
+                ? this._mainEvents
+                : Object.values(this._mainEvents),
+            groups: Object.values(this._groups),
+            sortTags: this._sortTags
+        });
     }
 }
 

src/backend/overlay-widgets/overlay-widget-config-manager.ts

@@ -13,6 +13,30 @@ type ExtraEvents = {
 class OverlayWidgetConfigManager extends JsonDbManager<OverlayWidgetConfig, ExtraEvents> {
     constructor() {
         super("Overlay Widget", "/overlay-widgets", "Overlay Widgets");
+
+        frontendCommunicator.onAsync("overlay-widgets:ui-service-ready",
+            async () => this.triggerUiRefresh()
+        );
+
+        frontendCommunicator.onAsync("overlay-widgets:save-config", async (config: OverlayWidgetConfig) => {
+            const existing = this.getItem(config.id);
+            if (existing) {
+                config.state = existing.state;
+            }
+            return this.saveWidgetConfig(config);
+        });
+
+        frontendCommunicator.onAsync("overlay-widgets:save-new-config",
+            async (config: OverlayWidgetConfig) => this.saveWidgetConfig(config, true)
+        );
+
+        frontendCommunicator.on("overlay-widgets:save-all-configs",
+            (configs: OverlayWidgetConfig[]) => this.saveAllItems(configs)
+        );
+
+        frontendCommunicator.on("overlay-widgets:delete-config", (configId: string) =>
+            this.removeWidgetConfigById(configId)
+        );
     }
 
     saveWidgetConfig(config: OverlayWidgetConfig, isNew = false): OverlayWidgetConfig {
@@ -67,34 +91,11 @@ class OverlayWidgetConfigManager extends JsonDbManager<OverlayWidgetConfig, Extr
     }
 
     triggerUiRefresh(): void {
-        frontendCommunicator.send("overlay-widgets:configs-updated");
+        this.logger.debug("Triggering widget config UI refresh");
+        frontendCommunicator.send("overlay-widgets:configs-updated", this.getAllItems());
     }
 }
 
 const manager = new OverlayWidgetConfigManager();
 
-frontendCommunicator.onAsync("overlay-widgets:get-all-configs",
-    async () => manager.getAllItems()
-);
-
-frontendCommunicator.onAsync("overlay-widgets:save-config", async (config: OverlayWidgetConfig) => {
-    const existing = manager.getItem(config.id);
-    if (existing) {
-        config.state = existing.state;
-    }
-    return manager.saveWidgetConfig(config);
-});
-
-frontendCommunicator.onAsync("overlay-widgets:save-new-config",
-    async (config: OverlayWidgetConfig) => manager.saveWidgetConfig(config, true)
-);
-
-frontendCommunicator.on("overlay-widgets:save-all-configs",
-    (configs: OverlayWidgetConfig[]) => manager.saveAllItems(configs)
-);
-
-frontendCommunicator.on("overlay-widgets:delete-config", (configId: string) =>
-    manager.removeWidgetConfigById(configId)
-);
-
 export = manager;

src/backend/overlay-widgets/overlay-widgets-manager.ts

@@ -29,6 +29,10 @@ class OverlayWidgetsManager extends TypedEmitter<Events> {
 
     constructor() {
         super();
+
+        frontendCommunicator.onAsync("overlay-widgets:ui-service-ready",
+            async () => this.triggerUiRefresh()
+        );
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -169,28 +173,30 @@ class OverlayWidgetsManager extends TypedEmitter<Events> {
             }))
         };
     }
+
+    private formatStateDisplaysForFrontend(): Record<string, string> {
+        const configs = overlayWidgetConfigManager.getAllItems();
+        return configs.reduce((acc, config) => {
+            const type = this.getOverlayWidgetType(config.type);
+            if (type?.stateDisplay) {
+                const display = type.stateDisplay(config);
+                if (display) {
+                    acc[config.id] = display;
+                }
+            }
+            return acc;
+        }, {} as Record<string, string>);
+    }
+
+    triggerUiRefresh(): void {
+        logger.debug("Triggering types/state displays UI refresh");
+        frontendCommunicator.send("overlay-widget:types-updated", this.getOverlayWidgetTypesForFrontend());
+        frontendCommunicator.send("overlay-widget:state-displays-updated", this.formatStateDisplaysForFrontend());
+    }
 }
 
 const manager = new OverlayWidgetsManager();
 
-frontendCommunicator.onAsync("overlay-widgets:get-all-types",
-    async () => manager.getOverlayWidgetTypesForFrontend()
-);
-
-frontendCommunicator.onAsync("overlay-widgets:get-state-displays", async () => {
-    const configs = overlayWidgetConfigManager.getAllItems();
-    return configs.reduce((acc, config) => {
-        const type = manager.getOverlayWidgetType(config.type);
-        if (type?.stateDisplay) {
-            const display = type.stateDisplay(config);
-            if (display) {
-                acc[config.id] = display;
-            }
-        }
-        return acc;
-    }, {} as Record<string, string>);
-});
-
 overlayWidgetConfigManager.on("widget-config-active-changed", (config) => {
     if (config.active === false) {
         void manager.sendWidgetEventToOverlay("remove", config);

src/backend/power-ups/power-ups-manager.ts

@@ -21,6 +21,10 @@ class PowerUpsManager {
     powerUps: Record<string, SavedPowerUp> = {};
 
     constructor() {
+        frontendCommunicator.onAsync("power-ups:ui-service-ready",
+            async () => this.triggerUiRefresh()
+        );
+
         frontendCommunicator.onAsync("power-ups:get-all", async () => Object.values(this.powerUps));
 
         frontendCommunicator.onAsync("power-ups:save", async (powerUp: SavedPowerUp) => this.savePowerUp(powerUp));
@@ -114,7 +118,7 @@ class PowerUpsManager {
 
             this.logger.debug(`Loaded power-ups.`);
 
-            frontendCommunicator.send("power-ups:updated-all", Object.values(this.powerUps));
+            this.triggerUiRefresh();
         } catch (err) {
             this.logger.warn(`There was an error reading power-ups file.`, err);
         }
@@ -231,6 +235,11 @@ class PowerUpsManager {
 
         return this.triggerPowerUpEffects(metadata, savedPowerUp.effects, manual);
     }
+
+    triggerUiRefresh(): void {
+        this.logger.debug("Triggering UI refresh");
+        frontendCommunicator.send("power-ups:updated-all", Object.values(this.powerUps));
+    }
 }
 
 const powerUpsManager = new PowerUpsManager();

src/backend/sort-tags/sort-tag-manager.ts

@@ -14,6 +14,10 @@ class SortTagManager {
     sortTags: SortTagCache = { };
 
     constructor() {
+        frontendCommunicator.onAsync("sort-tags:ui-service-ready",
+            async () => this.triggerUiRefresh()
+        );
+
         frontendCommunicator.onAsync("sort-tags:get-sort-tags", async () => {
             return this.sortTags ?? { };
         });
@@ -103,12 +107,17 @@ class SortTagManager {
         try {
             this.getSortTagsDb().push("/", this.sortTags);
 
-            frontendCommunicator.send("sort-tags:updated-sort-tags", this.sortTags);
+            this.triggerUiRefresh();
             this.logger.debug("Saved tags");
         } catch (error) {
             this.logger.warn("There was an error saving tags", error);
         }
     }
+
+    triggerUiRefresh(): void {
+        this.logger.debug("Triggering UI refresh");
+        frontendCommunicator.send("sort-tags:updated-sort-tags", this.sortTags ?? { });
+    }
 }
 
 const sortTagManager = new SortTagManager();

src/backend/variables/macro-manager.ts

@@ -5,6 +5,22 @@ import frontendCommunicator from "../common/frontend-communicator";
 class MacroManager extends JsonDbManager<VariableMacro> {
     constructor() {
         super("Variable Macro", "/variable-macros", "Variable Macros");
+
+        frontendCommunicator.onAsync("macros:ui-service-ready",
+            async () => this.triggerUiRefresh()
+        );
+
+        frontendCommunicator.onAsync("macros:get-all",
+            async () => this.getAllItems());
+
+        frontendCommunicator.onAsync("macros:save",
+            async (macros: VariableMacro) => this.saveItem(macros));
+
+        frontendCommunicator.onAsync("macros:save-all",
+            async (macros: VariableMacro[]) => this.saveAllItems(macros));
+
+        frontendCommunicator.on("macros:delete",
+            (macroId: string) => this.deleteItem(macroId));
     }
 
     getMacroByName(name: string) {
@@ -16,22 +32,11 @@ class MacroManager extends JsonDbManager<VariableMacro> {
     }
 
     triggerUiRefresh(): void {
+        this.logger.debug("Triggering UI refresh");
         frontendCommunicator.send("macros:updated");
     }
 }
 
 const manager = new MacroManager();
 
-frontendCommunicator.onAsync("macros:get-all",
-    async () => manager.getAllItems());
-
-frontendCommunicator.onAsync("macros:save",
-    async (macros: VariableMacro) => manager.saveItem(macros));
-
-frontendCommunicator.onAsync("macros:save-all",
-    async (macros: VariableMacro[]) => manager.saveAllItems(macros));
-
-frontendCommunicator.on("macros:delete",
-    (macroId: string) => manager.deleteItem(macroId));
-
 export = manager;