Component and other handler deregisterations

app/assets/javascripts/controllers/editor.js

@@ -67,6 +67,8 @@ class EditorCtrl extends PureCtrl {
     this.leftPanelPuppet = null;
     this.rightPanelPuppet = null;
     this.onEditorLoad = null;
+    this.unregisterComponent();
+    this.unregisterComponent = null;
     super.deinit();
   }
 
@@ -243,7 +245,7 @@ class EditorCtrl extends PureCtrl {
     this.reloadPreferences();
 
     if (note.dummy) {
-      this.focusEditor();
+      this.focusTitle();
     }
     if (previousNote && previousNote !== note) {
       if (previousNote.dummy) {
@@ -866,7 +868,7 @@ class EditorCtrl extends PureCtrl {
   }
 
   registerComponentHandler() {
-    this.application.componentManager.registerHandler({
+    this.unregisterComponent = this.application.componentManager.registerHandler({
       identifier: 'editor',
       areas: [
         'note-tags',

app/assets/javascripts/controllers/footer.js

@@ -31,6 +31,8 @@ class FooterCtrl extends PureCtrl {
   deinit() {
     this.rooms.length = 0;
     this.themesWithIcons.length = 0;
+    this.unregisterComponent();
+    this.unregisterComponent = null;
     this.rootScopeListener1();
     this.rootScopeListener2();
     this.rootScopeListener1 = null;
@@ -65,11 +67,7 @@ class FooterCtrl extends PureCtrl {
 
   onAppLaunch() {
     super.onAppLaunch();
-    const hasPasscode = this.application.hasPasscode();
+    this.reloadPasscodeStatus();
-    this.setState({
-      hasPasscode: hasPasscode
-    });
-
     this.reloadUpgradeStatus();
     this.user = this.application.getUser();
     this.updateOfflineStatus();
@@ -78,6 +76,13 @@ class FooterCtrl extends PureCtrl {
     this.registerComponentHandler();
   }
 
+  async reloadPasscodeStatus() {
+    const hasPasscode = this.application.hasPasscode();
+    this.setState({
+      hasPasscode: hasPasscode
+    });
+  }
+
   addRootScopeListeners() {
     this.rootScopeListener1 = this.$rootScope.$on("reload-ext-data", () => {
       this.reloadExtendedData();
@@ -118,6 +123,13 @@ class FooterCtrl extends PureCtrl {
     }
   }
 
+  /** @override */
+  async onAppKeyChange() {
+    super.onAppKeyChange();
+    this.reloadPasscodeStatus();
+  }
+
+
   /** @override */
   onAppEvent(eventName) {
     if (eventName === ApplicationEvents.KeyStatusChanged) {
@@ -183,7 +195,7 @@ class FooterCtrl extends PureCtrl {
   }
 
   registerComponentHandler() {
-    this.application.componentManager.registerHandler({
+    this.unregisterComponent = this.application.componentManager.registerHandler({
       identifier: "roomBar",
       areas: ["rooms", "modal"],
       activationHandler: (component) => { },

app/assets/javascripts/controllers/notes/notes.js

@@ -111,16 +111,34 @@ class NotesCtrl extends PureCtrl {
         await this.reloadNotes();
       }
     } else if (eventName === ApplicationEvents.CompletedSync) {
-      if (this.state.notes.length === 0) {
+      this.getMostValidNotes().then((notes) => {
-        await this.createPlaceholderNote();
+        if (notes.length === 0) {
-      }
+          this.createPlaceholderNote();
-    } else if (eventName === ApplicationEvents.LocalDataLoaded) {
+        }
-      if (this.application.getLastSyncDate() && this.state.notes.length === 0) {
+      });
-        await this.createPlaceholderNote();
-      }
     }
   }
 
+  /** 
+   * @access private 
+   * Access the current state notes without awaiting any potential reloads
+   * that may be in progress. This is the sync alternative to `async getMostValidNotes`
+   */
+  getPossiblyStaleNotes() {
+    return this.state.notes;
+  }
+
+  /**
+   * @access private
+   * Access the current state notes after waiting for any pending reloads.
+   * This returns the most up to date notes, but is the asyncronous counterpart 
+   * to `getPossiblyStaleNotes`
+   */
+  async getMostValidNotes() {
+    await this.reloadNotesPromise;
+    return this.getPossiblyStaleNotes();
+  }
+
   /** 
    * Triggered programatically to create a new placeholder note 
    * when conditions allow for it. This is as opposed to creating a new note
@@ -251,6 +269,11 @@ class NotesCtrl extends PureCtrl {
   }
 
   async reloadNotes() {
+    this.reloadNotesPromise = this.performPeloadNotes();
+    return this.reloadNotesPromise;
+  }
+
+  async performPeloadNotes() {
     if (!this.state.tag) {
       return;
     }

app/assets/javascripts/controllers/root.js

@@ -2,7 +2,8 @@ import template from '%/root.pug';
 
 class RootCtrl {
   /* @ngInject */
-  constructor(applicationManager) {
+  constructor($timeout, applicationManager) {
+    this.$timeout = $timeout;
     this.applicationManager = applicationManager;
     this.applicationManager.addApplicationChangeObserver(() => {
       this.reload();
@@ -10,7 +11,9 @@ class RootCtrl {
   }
 
   reload() {
-    this.applications = this.applicationManager.getApplications();
+    this.$timeout(() => {
+      this.applications = this.applicationManager.getApplications();
+    });
   }
 }
 

app/assets/javascripts/controllers/tags.js

@@ -17,6 +17,12 @@ class TagsPanelCtrl extends PureCtrl {
     };
   }
 
+  deinit() {
+    this.unregisterComponent();
+    this.unregisterComponent = null;
+    super.deinit();
+  }
+
   getInitialState() {
     return {
       tags: [],
@@ -154,7 +160,7 @@ class TagsPanelCtrl extends PureCtrl {
   }
 
   registerComponentHandler() {
-    this.application.componentManager.registerHandler({
+    this.unregisterComponent = this.application.componentManager.registerHandler({
       identifier: 'tags',
       areas: ['tags-list'],
       activationHandler: (component) => {

app/assets/javascripts/directives/views/componentView.js

@@ -34,13 +34,16 @@ class ComponentViewCtrl {
     this.cleanUpOn();
     this.cleanUpWatch = null;
     this.cleanUpOn = null;
-    this.application.componentManager.deregisterHandler(this.themeHandlerIdentifier);
+    this.unregisterThemeHandler();
-    this.application.componentManager.deregisterHandler(this.identifier);
+    this.unregisterComponentHandler();
+    this.unregisterThemeHandler = null;
+    this.unregisterComponentHandler = null;
     if (this.component && !this.manualDealloc) {
       const dontSync = true;
       this.application.componentManager.deactivateComponent(this.component, dontSync);
     }
-    this.application.getDesktopService().deregisterUpdateObserver(this.updateObserver);
+    this.unregisterDesktopObserver();
+    this.unregisterDesktopObserver = null;
     document.removeEventListener(
       VISIBILITY_CHANGE_LISTENER_KEY,
       this.onVisibilityChange
@@ -57,7 +60,7 @@ class ComponentViewCtrl {
   };
 
   registerPackageUpdateObserver() {
-    this.updateObserver = this.application.getDesktopService()
+    this.unregisterDesktopObserver = this.application.getDesktopService()
       .registerUpdateObserver((component) => {
         if (component === this.component && component.active) {
           this.reloadComponent();
@@ -66,18 +69,16 @@ class ComponentViewCtrl {
   }
 
   registerComponentHandlers() {
-    this.themeHandlerIdentifier = 'component-view-' + Math.random();
+    this.unregisterThemeHandler = this.application.componentManager.registerHandler({
-    this.application.componentManager.registerHandler({
+      identifier: 'component-view-' + Math.random(),
-      identifier: this.themeHandlerIdentifier,
       areas: ['themes'],
       activationHandler: (component) => {
 
       }
     });
 
-    this.identifier = 'component-view-' + Math.random();
+    this.unregisterComponentHandler = this.application.componentManager.registerHandler({
-    this.application.componentManager.registerHandler({
+      identifier: 'component-view-' + Math.random(),
-      identifier: this.identifier,
       areas: [this.component.area],
       activationHandler: (component) => {
         if (component !== this.component) {

app/assets/javascripts/directives/views/revisionPreviewModal.js

@@ -19,8 +19,9 @@ class RevisionPreviewModalCtrl {
   }
   
   $onDestroy() {
-    if (this.identifier) {
+    if (this.unregisterComponent) {
-      this.application.componentManager.deregisterHandler(this.identifier);
+      this.unregisterComponent();
+      this.unregisterComponent = null;
     }
   }
 
@@ -49,9 +50,8 @@ class RevisionPreviewModalCtrl {
       });
       editorCopy.readonly = true;
       editorCopy.lockReadonly = true;
-      this.identifier = editorCopy.uuid;
+      this.unregisterComponent = this.application.componentManager.registerHandler({
-      this.application.componentManager.registerHandler({
+        identifier: editorCopy.uuid,
-        identifier: this.identifier,
         areas: ['editor-editor'],
         contextRequestHandler: (component) => {
           if (component === this.editor) {

app/assets/javascripts/services/desktopManager.js

@@ -1,8 +1,7 @@
 /* eslint-disable camelcase */
 // An interface used by the Desktop app to interact with SN
-import pull from 'lodash/pull';
 import { isDesktopApplication } from '@/utils';
-import { EncryptionIntents, ApplicationService, ApplicationEvents } from 'snjs';
+import { EncryptionIntents, ApplicationService, ApplicationEvents, removeFromArray } from 'snjs';
 
 const COMPONENT_DATA_KEY_INSTALL_ERROR = 'installError';
 const COMPONENT_CONTENT_KEY_PACKAGE_INFO = 'package_info';
@@ -89,7 +88,9 @@ export class DesktopManager extends ApplicationService {
       callback: callback
     };
     this.updateObservers.push(observer);
-    return observer;
+    return () => {
+      removeFromArray(this.updateObservers, observer);
+    };
   }
 
   searchText(text) {
@@ -106,10 +107,6 @@ export class DesktopManager extends ApplicationService {
     }
   }
 
-  deregisterUpdateObserver(observer) {
-    pull(this.updateObservers, observer);
-  }
-
   // Pass null to cancel search
   desktop_setSearchHandler(handler) {
     this.searchHandler = handler;
@@ -161,7 +158,7 @@ export class DesktopManager extends ApplicationService {
   }
 
   desktop_deregisterComponentActivationObserver(observer) {
-    pull(this.componentActivationObservers, observer);
+    removeFromArray(this.componentActivationObservers, observer);
   }
 
   /* Notify observers that a component has been registered/activated */

app/assets/javascripts/services/themeManager.js

@@ -26,6 +26,10 @@ export class ThemeManager extends ApplicationService {
     this.unsubState();
     this.unsubState = null;
     this.activeThemes.length = 0;
+    this.unregisterDesktop();
+    this.unregisterComponent();
+    this.unregisterDesktop = null;
+    this.unregisterComponent = null;
     super.deinit();
   }
 
@@ -38,13 +42,7 @@ export class ThemeManager extends ApplicationService {
     }
   }
 
-  onAppEvent(eventName) {
+  /** @access private */
-    super.onAppEvent(eventName);
-    if (eventName === ApplicationEvents.SignedOut) {
-      this.deactivateAllThemes();
-    }
-  }
-
   async activateCachedThemes() {
     const cachedThemes = await this.getCachedThemes();
     const writeToCache = false;
@@ -53,8 +51,9 @@ export class ThemeManager extends ApplicationService {
     }
   }
 
+  /** @access private */
   registerObservers() {
-    this.application.getDesktopService().registerUpdateObserver((component) => {
+    this.unregisterDesktop = this.application.getDesktopService().registerUpdateObserver((component) => {
       if (component.active && component.isTheme()) {
         this.deactivateTheme(component);
         setTimeout(() => {
@@ -63,7 +62,7 @@ export class ThemeManager extends ApplicationService {
       }
     });
 
-    this.application.componentManager.registerHandler({
+    this.unregisterComponent = this.application.componentManager.registerHandler({
       identifier: 'themeManager',
       areas: ['themes'],
       activationHandler: (component) => {
@@ -76,10 +75,7 @@ export class ThemeManager extends ApplicationService {
     });
   }
 
-  hasActiveTheme() {
+  /** @access public */
-    return this.application.componentManager.getActiveThemes().length > 0;
-  }
-
   deactivateAllThemes() {
     const activeThemes = this.application.componentManager.getActiveThemes();
     for (const theme of activeThemes) {
@@ -92,6 +88,7 @@ export class ThemeManager extends ApplicationService {
     this.decacheThemes();
   }
 
+  /** @access private */
   activateTheme(theme, writeToCache = true) {
     if (this.activeThemes.find((t) => t.uuid === theme.uuid)) {
       return;
@@ -110,6 +107,7 @@ export class ThemeManager extends ApplicationService {
     }
   }
 
+  /** @access private */
   deactivateTheme(theme) {
     const element = document.getElementById(theme.uuid);
     if (element) {
@@ -120,6 +118,7 @@ export class ThemeManager extends ApplicationService {
     this.cacheThemes();
   }
 
+  /** @access private */
   async cacheThemes() {
     const mapped = await Promise.all(this.activeThemes.map(async (theme) => {
       const payload = theme.payloadRepresentation();
@@ -136,6 +135,7 @@ export class ThemeManager extends ApplicationService {
     );
   }
 
+  /** @access private */
   async decacheThemes() {
     return this.application.removeValue(
       CACHED_THEMES_KEY,
@@ -143,6 +143,7 @@ export class ThemeManager extends ApplicationService {
     );
   }
 
+  /** @access private */
   async getCachedThemes() {
     const cachedThemes = await this.application.getValue(
       CACHED_THEMES_KEY,