fix(#773): ensure listener are destroyed when components are unmounted

Author: peterpeterparker

studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx

@@ -67,22 +67,30 @@ export class AppActionsDeck {
 
   private anonymousService: AnonymousService;
 
+  private destroyListener;
+
   constructor() {
     this.anonymousService = AnonymousService.getInstance();
   }
 
   async componentWillLoad() {
     this.fullscreenEnable = !isIPad();
 
-    const destroyListener = remoteStore.onChange('pendingRequests', async (requests: DeckdeckgoEventDeckRequest[] | undefined) => {
+    this.destroyListener = remoteStore.onChange('pendingRequests', async (requests: DeckdeckgoEventDeckRequest[] | undefined) => {
       if (requests && requests.length > 0) {
         await this.clickToOpenRemote();
       }
 
-      destroyListener();
+      this.destroyListener();
     });
   }
 
+  componentDidUnload() {
+    if (this.destroyListener) {
+      this.destroyListener();
+    }
+  }
+
   async onActionOpenSlideAdd($event: CustomEvent) {
     if (!$event || !$event.detail) {
       return;

studio/src/app/components/feed/app-feed/app-feed.tsx

@@ -27,22 +27,30 @@ export class AppFeed {
 
   private presentationUrl: string = EnvironmentConfigService.getInstance().get('deckdeckgo').presentationUrl;
 
+  private destroyListener;
+
   constructor() {
     this.feedService = FeedService.getInstance();
   }
 
   async componentWillLoad() {
     this.initOffline(offlineStore.state.offline);
 
-    const destroyListner = offlineStore.onChange('offline', (offline: OfflineDeck | undefined) => {
+    this.destroyListener = offlineStore.onChange('offline', (offline: OfflineDeck | undefined) => {
       this.initOffline(offline);
 
-      destroyListner();
+      this.destroyListener();
     });
 
     this.mobile = isMobile();
   }
 
+  componentDidUnload() {
+    if (this.destroyListener) {
+      this.destroyListener();
+    }
+  }
+
   private initOffline(offline: OfflineDeck | undefined) {
     this.offline = navigator && !navigator.onLine && offline !== undefined ? offline : undefined;
   }

studio/src/app/pages/core/app-dashboard/app-dashboard.tsx

@@ -44,6 +44,8 @@ export class AppDashboard {
   private imageEventsHandler: ImageEventsHandler = new ImageEventsHandler();
   private chartEventsHandler: ChartEventsHandler = new ChartEventsHandler();
 
+  private destroyListener;
+
   constructor() {
     this.deckService = DeckService.getInstance();
     this.slideService = SlideService.getInstance();
@@ -54,19 +56,19 @@ export class AppDashboard {
     await this.imageEventsHandler.init();
     await this.chartEventsHandler.init();
 
-    const destroyListener = authStore.onChange('authUser', async (_authUser: AuthUser | null) => {
-      await this.initDashboard(destroyListener);
+    this.destroyListener = authStore.onChange('authUser', async (_authUser: AuthUser | null) => {
+      await this.initDashboard();
     });
 
-    await this.initDashboard(destroyListener);
+    await this.initDashboard();
   }
 
-  private async initDashboard(destroyListener) {
+  private async initDashboard() {
     if (!authStore.state.authUser) {
       return;
     }
 
-    destroyListener();
+    this.destroyListener();
 
     const userDecks: Deck[] = await this.deckService.getUserDecks(authStore.state.authUser.uid);
     this.decks = await this.fetchFirstSlides(userDecks);
@@ -77,6 +79,10 @@ export class AppDashboard {
   }
 
   componentDidUnload() {
+    if (this.destroyListener) {
+      this.destroyListener();
+    }
+
     this.imageEventsHandler.destroy();
     this.chartEventsHandler.destroy();
   }

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -97,6 +97,7 @@ export class AppEditor {
   private fullscreen: boolean = false;
 
   private destroyBusyListener;
+  private destroyAuthListener;
 
   constructor() {
     this.authService = AuthService.getInstance();
@@ -139,12 +140,12 @@ export class AppEditor {
   private async initWithAuth() {
     if (!authStore.state.authUser) {
       // As soon as the anonymous is created, we proceed
-      const destroyListener = authStore.onChange('authUser', async (authUser: AuthUser | null) => {
+      this.destroyAuthListener = authStore.onChange('authUser', async (authUser: AuthUser | null) => {
         if (authUser) {
           await this.initOrFetch();
         }
 
-        destroyListener();
+        this.destroyAuthListener();
       });
 
       // If no user create an anonymous one
@@ -204,6 +205,10 @@ export class AppEditor {
     if (this.destroyBusyListener) {
       this.destroyBusyListener();
     }
+
+    if (this.destroyAuthListener) {
+      this.destroyAuthListener();
+    }
   }
 
   private updateInlineEditorListener(): Promise<void> {