Fixed issue that caused infinite message loop (#7)

Closes #7

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- None
+### Fixed
+
+- Issue that caused infinite message loop between plugin and app ([#7](https://github.com/benji300/joplin-note-tabs/issues/7))
 
 ## [1.2.0] - 2021-02-17
 

src/favorites.ts

@@ -1,3 +1,5 @@
+import { Settings } from "./settings";
+
 /**
  * Favorite type definitions.
  */
@@ -48,43 +50,41 @@ export const FavoriteDesc: IFavoriteDesc[] = [
  * - Then work on this._tabs array.
  */
 export class Favorites {
-  /**
-   * Temporary array to work with favorites.
-   */
-  private _store: IFavorite[];
+
+  private _settings: Settings;
 
   /**
-   * Init with stored values from settings array.
+   * Initialization of Favorites.
    */
-  constructor(settingsArray: IFavorite[]) {
-    this._store = settingsArray;
+  constructor(settings: Settings) {
+    this._settings = settings;
   }
 
-  //#region  GETTER
+  //#region GETTER
 
   /**
-   * All entries.
+   * All favorites.
    */
-  get all(): IFavorite[] {
-    return this._store;
+  get favorites(): IFavorite[] {
+    return this._settings.favorites;
   }
 
   /**
-   * Number of entries.
+   * Number of favorites.
    */
   get length(): number {
-    return this._store.length;
+    return this.favorites.length;
   }
 
   //#endregion
 
   /**
-   * Inserts handled favorite at specified index.
+   * Write tabs array back to settings.
+   * 
+   * TODO: Would be better in an "onClose()" event of the plugin. Then they would only be stored once.
    */
-  private async insertAtIndex(index: number, favorite: IFavorite) {
-    if (index < 0 || favorite === undefined) return;
-
-    this._store.splice(index, 0, favorite);
+  private async store() {
+    await this._settings.storeFavorites();
   }
 
   /**
@@ -126,7 +126,7 @@ export class Favorites {
    */
   get(index: number): IFavorite {
     if (this.indexOutOfBounds(index)) return;
-    return this._store[index];
+    return this.favorites[index];
   }
 
   /**
@@ -144,7 +144,7 @@ export class Favorites {
   indexOf(value: string): number {
     if (value) {
       for (let i: number = 0; i < this.length; i++) {
-        if (this._store[i]['value'] === value) return i;
+        if (this.favorites[i]['value'] === value) return i;
       }
     }
     return -1;
@@ -164,35 +164,42 @@ export class Favorites {
     if (newValue === undefined || newTitle === undefined || newType === undefined) return;
 
     const newFavorite = { value: this.encodeHtml(newValue), title: this.encodeHtml(newTitle), type: newType };
-    if (targetIdx) {
-      await this.insertAtIndex(targetIdx, newFavorite);
+    if (targetIdx && targetIdx > 0) {
+      this.favorites.splice(targetIdx, 0, newFavorite);
     } else {
-      this._store.push(newFavorite);
+      this.favorites.push(newFavorite);
     }
+    await this.store();
   }
 
   /**
    * Changes the title of the handled favorite.
    */
   async changeValue(index: number, newValue: string) {
     if (index < 0 || newValue === undefined || newValue === '') return;
-    this._store[index].value = this.encodeHtml(newValue);
+
+    this.favorites[index].value = this.encodeHtml(newValue);
+    await this.store();
   }
 
   /**
    * Changes the title of the handled favorite.
    */
   async changeTitle(index: number, newTitle: string) {
     if (index < 0 || newTitle === undefined || newTitle === '') return;
-    this._store[index].title = this.encodeHtml(newTitle);
+
+    this.favorites[index].title = this.encodeHtml(newTitle);
+    await this.store();
   }
 
   /**
    * Changes the type of the handled favorite.
    */
   async changeType(index: number, newType: FavoriteType) {
     if (index < 0 || newType === undefined) return;
-    this._store[index].type = newType;
+
+    this.favorites[index].type = newType;
+    await this.store();
   }
 
   /**
@@ -208,24 +215,19 @@ export class Favorites {
       // else move at desired index
       target = targetIdx;
     }
-    const favorite: IFavorite = this._store[sourceIdx];
-    this._store.splice(sourceIdx, 1);
-    this._store.splice(target, 0, favorite);
+    const favorite: IFavorite = this.favorites[sourceIdx];
+    this.favorites.splice(sourceIdx, 1);
+    this.favorites.splice(target, 0, favorite);
+    await this.store();
   }
 
   /**
    * Removes favorite with handled index.
    */
   async delete(index: number) {
     if (index >= 0) {
-      this._store.splice(index, 1);
+      this.favorites.splice(index, 1);
+      await this.store();
     }
   }
-
-  /**
-   * Clears the stored array.
-   */
-  async clearAll() {
-    this._store = [];
-  }
 }

src/index.ts

@@ -16,7 +16,7 @@ joplin.plugins.register({
     const settings: Settings = new Settings();
     await settings.register();
     // favorites
-    const favorites = new Favorites(settings.favorites);
+    const favorites = new Favorites(settings);
     // panel
     const panel = new Panel(favorites, settings);
     await panel.register();
@@ -263,7 +263,7 @@ joplin.plugins.register({
         const result: number = await Dialog.showMessage('Do you really want to remove all Favorites?');
         if (result) return;
 
-        await favorites.clearAll();
+        await settings.clearFavorites();
         await panel.updateWebview();
       }
     });
@@ -324,12 +324,15 @@ joplin.plugins.register({
 
     //#region EVENTS
 
+    // let onChangeCnt = 0;
     SETTINGS.onChange(async (event: ChangeEvent) => {
+      // console.debug(`onChange() hits: ${onChangeCnt++}`);
       await settings.read(event);
       await panel.updateWebview();
     });
 
     //#endregion
 
+    await panel.updateWebview();
   }
 });

src/panel.ts

@@ -3,6 +3,7 @@ import { FavoriteDesc, Favorites, FavoriteType } from './favorites';
 import { Settings } from './settings';
 
 export class Panel {
+
   private _panel: any;
   private _favs: Favorites;
   private _settings: Settings;
@@ -55,8 +56,6 @@ export class Panel {
         </div>
       </div>
     `);
-
-    await this.updateWebview();
   }
 
   private getPanelTitleHtml(): string {
@@ -80,7 +79,7 @@ export class Panel {
     const favsHtml: any = [];
     let index: number = 0;
 
-    for (const favorite of this._favs.all) {
+    for (const favorite of this._favs.favorites) {
       const fg = this._settings.foreground;
       const bg = this._settings.background;
       const hoverBg = this._settings.hoverBackground;
@@ -126,11 +125,6 @@ export class Panel {
         </div>
       </div>
     `);
-
-    // store the current favorites array back to the settings
-    // - Currently there's no "event" to call store() only on App closing
-    // - Which would be preferred
-    await this._settings.storeFavorites(this._favs.all);
   }
 
   /**

src/settings.ts

@@ -21,7 +21,7 @@ enum SettingDefaults {
  */
 export class Settings {
   // private settings
-  private _store: any[] = new Array();
+  private _favs: any[] = new Array();
   // general settings
   private _enableDragAndDrop: boolean = true;
   private _editBeforeAdd: boolean = true;
@@ -46,7 +46,7 @@ export class Settings {
   //#region GETTER
 
   get favorites(): any[] {
-    return this._store;
+    return this._favs;
   }
 
   get enableDragAndDrop(): boolean {
@@ -125,7 +125,7 @@ export class Settings {
       public: false,
       label: 'Favorites'
     });
-    this._store = await joplin.settings.value('favorites');
+    this._favs = await joplin.settings.value('favorites');
 
     // general settings
     await joplin.settings.registerSetting('enableDragAndDrop', {
@@ -279,9 +279,17 @@ export class Settings {
   }
 
   /**
-   * Store the handled favorites array back to the settings.
+   * Store the favorites array back to the settings.
    */
-  async storeFavorites(favorites: any[]) {
-    await joplin.settings.setValue('favorites', favorites);
+  async storeFavorites() {
+    await joplin.settings.setValue('favorites', this._favs);
+  }
+
+  /**
+   * Clear the settings favorites array.
+   */
+  async clearFavorites() {
+    this._favs = [];
+    await this.storeFavorites();
   }
 }