refactor: move status functions to footer view

app/assets/javascripts/services/statusManager.ts

@@ -1,54 +1,30 @@
 import { removeFromArray } from 'snjs';
-import { FooterStatus } from '@/types';
 
-type StatusCallback = (string: string) => void
+type StatusCallback = (string: string) => void;
 
 export class StatusManager {
+  private _message = '';
+  private observers: StatusCallback[] = [];
 
-  private statuses: FooterStatus[] = []
+  get message(): string {
-  private observers: StatusCallback[] = []
+    return this._message;
-
-  replaceStatusWithString(status: FooterStatus, string: string) {
-    this.removeStatus(status);
-    return this.addStatusFromString(string);
   }
 
-  addStatusFromString(string: string) {
+  setMessage(message: string) {
-    const status = { string };
+    this._message = message;
-    this.statuses.push(status);
     this.notifyObservers();
-    return status;
   }
 
-  removeStatus(status: FooterStatus) {
+  onStatusChange(callback: StatusCallback) {
-    removeFromArray(this.statuses, status);
-    this.notifyObservers();
-    return undefined;
-  }
-
-  addStatusObserver(callback: StatusCallback) {
     this.observers.push(callback);
     return () => {
       removeFromArray(this.observers, callback);
-    }
+    };
   }
 
   private notifyObservers() {
-    for(const observer of this.observers) {
+    for (const observer of this.observers) {
-      observer(this.getStatusString());
+      observer(this._message);
     }
   }
-
-  private getStatusString() {
-    let result = '';
-    this.statuses.forEach((status, index) => {
-      if(index > 0) {
-        result += '  ';
-      }
-      result += status.string;
-    });
-
-    return result;
-  }
-
 }

app/assets/javascripts/ui_models/application.ts

@@ -36,7 +36,7 @@ type WebServices = {
   autolockService: AutolockService
   archiveService: ArchiveManager
   nativeExtService: NativeExtManager
-  statusService: StatusManager
+  statusManager: StatusManager
   themeService: ThemeManager
   prefsService: PreferencesManager
   keyboardService: KeyboardManager
@@ -135,8 +135,8 @@ export class WebApplication extends SNApplication {
     return this.webServices.nativeExtService;
   }
 
-  public getStatusService() {
+  getStatusManager() {
-    return this.webServices.statusService;
+    return this.webServices.statusManager;
   }
 
   public getThemeService() {

app/assets/javascripts/ui_models/application_group.ts

@@ -96,7 +96,7 @@ export class ApplicationGroup extends SNApplicationGroup {
       autolockService,
       nativeExtService,
       prefsService,
-      statusService,
+      statusManager: statusService,
       themeService
     });
     return application;

app/assets/javascripts/views/application/application_view.ts

@@ -12,17 +12,14 @@ import {
   STRING_DEFAULT_FILE_ERROR
 } from '@/strings';
 import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
+import { alertDialog } from '@/services/alertService';
 
 class ApplicationViewCtrl extends PureViewCtrl {
   private $location?: ng.ILocationService
   private $rootScope?: ng.IRootScopeService
   public platformString: string
-  private completedInitialSync = false
-  private syncStatus: any
   private notesCollapsed = false
   private tagsCollapsed = false
-  private showingDownloadStatus = false
-  private uploadSyncStatus: any
 
   /* @ngInject */
   constructor(
@@ -89,35 +86,14 @@ class ApplicationViewCtrl extends PureViewCtrl {
   /** @override */
   async onAppEvent(eventName: ApplicationEvent) {
     super.onAppEvent(eventName);
-    if (eventName === ApplicationEvent.LocalDataIncrementalLoad) {
+    if (eventName === ApplicationEvent.LocalDatabaseReadError) {
-      this.updateLocalDataStatus();
+      alertDialog({
-    } else if (
+        text: 'Unable to load local database. Please restart the app and try again.'
-      eventName === ApplicationEvent.SyncStatusChanged ||
+      });
-      eventName === ApplicationEvent.FailedSync
-    ) {
-      this.updateSyncStatus();
-    } else if (eventName === ApplicationEvent.LocalDataLoaded) {
-      this.updateLocalDataStatus();
-    } else if (eventName === ApplicationEvent.WillSync) {
-      if (!this.completedInitialSync) {
-        this.syncStatus = this.application!.getStatusService().replaceStatusWithString(
-          this.syncStatus,
-          "Syncing…"
-        );
-      }
-    } else if (eventName === ApplicationEvent.CompletedFullSync) {
-      if (!this.completedInitialSync) {
-        this.syncStatus = this.application!.getStatusService().removeStatus(this.syncStatus);
-        this.completedInitialSync = true;
-      }
-    } else if (eventName === ApplicationEvent.LocalDatabaseReadError) {
-      this.application!.alertService!.alert(
-        'Unable to load local database. Please restart the app and try again.'
-      );
     } else if (eventName === ApplicationEvent.LocalDatabaseWriteError) {
-      this.application!.alertService!.alert(
+      alertDialog({
-        'Unable to write to local database. Please restart the app and try again.'
+        text: 'Unable to write to local database. Please restart the app and try again.'
-      );
+      });
     }
   }
 
@@ -141,77 +117,6 @@ class ApplicationViewCtrl extends PureViewCtrl {
     }
   }
 
-  updateLocalDataStatus() {
-    const syncStatus = this.application!.getSyncStatus();
-    const stats = syncStatus.getStats();
-    const encryption = this.application!.isEncryptionAvailable();
-    if (stats.localDataDone) {
-      this.syncStatus = this.application!.getStatusService().removeStatus(this.syncStatus);
-      return;
-    }
-    const notesString = `${stats.localDataCurrent}/${stats.localDataTotal} items...`;
-    const loadingStatus = encryption
-      ? `Decrypting ${notesString}`
-      : `Loading ${notesString}`;
-    this.syncStatus = this.application!.getStatusService().replaceStatusWithString(
-      this.syncStatus,
-      loadingStatus
-    );
-  }
-
-  updateSyncStatus() {
-    const syncStatus = this.application!.getSyncStatus();
-    const stats = syncStatus.getStats();
-    if (syncStatus.hasError()) {
-      this.syncStatus = this.application!.getStatusService().replaceStatusWithString(
-        this.syncStatus,
-        'Unable to Sync'
-      );
-    } else if (stats.downloadCount > 20) {
-      const text = `Downloading ${stats.downloadCount} items. Keep app open.`;
-      this.syncStatus = this.application!.getStatusService().replaceStatusWithString(
-        this.syncStatus,
-        text
-      );
-      this.showingDownloadStatus = true;
-    } else if (this.showingDownloadStatus) {
-      this.showingDownloadStatus = false;
-      const text = "Download Complete.";
-      this.syncStatus = this.application!.getStatusService().replaceStatusWithString(
-        this.syncStatus,
-        text
-      );
-      setTimeout(() => {
-        this.syncStatus = this.application!.getStatusService().removeStatus(this.syncStatus);
-      }, 2000);
-    } else if (stats.uploadTotalCount > 20) {
-      const completionPercentage = stats.uploadCompletionCount === 0
-        ? 0
-        : stats.uploadCompletionCount / stats.uploadTotalCount;
-
-      const stringPercentage = completionPercentage.toLocaleString(
-        undefined,
-        { style: 'percent' }
-      );
-
-      this.uploadSyncStatus = this.application!.getStatusService().replaceStatusWithString(
-        this.uploadSyncStatus,
-        `Syncing ${stats.uploadTotalCount} items (${stringPercentage} complete)`,
-      );
-    } else {
-      if (this.syncStatus) {
-        this.syncStatus = this.application!.getStatusService().removeStatus(
-          this.syncStatus
-        );
-      }
-      if (this.uploadSyncStatus) {
-        this.uploadSyncStatus = this.application!.getStatusService().removeStatus(
-          this.uploadSyncStatus
-        );
-      }
-    }
-  }
-
   addDragDropHandlers() {
     /**
      * Disable dragging and dropping of files (but allow text) into main SN interface.

app/assets/javascripts/views/footer/footer_view.ts

@@ -62,7 +62,6 @@ class FooterViewCtrl extends PureViewCtrl<{}, {
   private rootScopeListener2: any
   public arbitraryStatusMessage?: string
   public user?: any
-  private backupStatus?: FooterStatus
   private offline = true
   private showAccountMenu = false
   private didCheckForOffline = false
@@ -75,6 +74,8 @@ class FooterViewCtrl extends PureViewCtrl<{}, {
   public dockShortcuts: DockShortcut[] = []
   public roomShowState: Partial<Record<string, boolean>> = {}
   private observerRemovers: Array<() => void> = [];
+  private completedInitialSync = false;
+  private showingDownloadStatus = false;
 
   /* @ngInject */
   constructor(
@@ -107,9 +108,9 @@ class FooterViewCtrl extends PureViewCtrl<{}, {
 
   $onInit() {
     super.$onInit();
-    this.application.getStatusService().addStatusObserver((string: string) => {
+    this.application.getStatusManager().onStatusChange((message) => {
       this.$timeout(() => {
-        this.arbitraryStatusMessage = string;
+        this.arbitraryStatusMessage = message;
       });
     });
     this.loadAccountSwitcherState();
@@ -184,30 +185,32 @@ class FooterViewCtrl extends PureViewCtrl<{}, {
 
   /** @override */
   onAppStateEvent(eventName: AppStateEvent, data: any) {
-    if (eventName === AppStateEvent.EditorFocused) {
+    const statusService = this.application.getStatusManager();
-      if (data.eventSource === EventSource.UserInteraction) {
+    switch (eventName) {
-        this.closeAllRooms();
+      case AppStateEvent.EditorFocused:
-        this.closeAccountMenu();
+        if (data.eventSource === EventSource.UserInteraction) {
-      }
+          this.closeAllRooms();
-    } else if (eventName === AppStateEvent.BeganBackupDownload) {
+          this.closeAccountMenu();
-      this.backupStatus = this.application.getStatusService().addStatusFromString(
+        }
-        "Saving local backup..."
+        break;
-      );
+      case AppStateEvent.BeganBackupDownload:
-    } else if (eventName === AppStateEvent.EndedBackupDownload) {
+        statusService.setMessage("Saving local backup…");
-      if (data.success) {
+        break;
-        this.backupStatus = this.application.getStatusService().replaceStatusWithString(
+      case AppStateEvent.EndedBackupDownload:
-          this.backupStatus!,
+        const successMessage = "Successfully saved backup.";
-          "Successfully saved backup."
+        const errorMessage = "Unable to save local backup."
-        );
+        statusService.setMessage(data.success ? successMessage : errorMessage);
-      } else {
+
-        this.backupStatus = this.application.getStatusService().replaceStatusWithString(
+        const twoSeconds = 2000;
-          this.backupStatus!,
+        this.$timeout(() => {
-          "Unable to save local backup."
+          if (
-        );
+            statusService.message === successMessage ||
-      }
+            statusService.message === errorMessage
-      this.$timeout(() => {
+          ) {
-        this.backupStatus = this.application.getStatusService().removeStatus(this.backupStatus!);
+            statusService.setMessage('');
-      }, 2000);
+          }
+        }, twoSeconds);
+        break;
     }
   }
 
@@ -219,34 +222,56 @@ class FooterViewCtrl extends PureViewCtrl<{}, {
 
   /** @override */
   onAppEvent(eventName: ApplicationEvent) {
-    if (eventName === ApplicationEvent.KeyStatusChanged) {
+    switch (eventName) {
-      this.reloadUpgradeStatus();
+      case ApplicationEvent.KeyStatusChanged:
-    } else if (eventName === ApplicationEvent.EnteredOutOfSync) {
+        this.reloadUpgradeStatus();
-      this.setState({
+        break;
-        outOfSync: true
+      case ApplicationEvent.EnteredOutOfSync:
-      });
+        this.setState({
-    } else if (eventName === ApplicationEvent.ExitedOutOfSync) {
+          outOfSync: true
-      this.setState({
+        });
-        outOfSync: false
+        break;
-      });
+      case ApplicationEvent.ExitedOutOfSync:
-    } else if (eventName === ApplicationEvent.CompletedFullSync) {
+        this.setState({
-      if (!this.didCheckForOffline) {
+          outOfSync: false
-        this.didCheckForOffline = true;
+        });
-        if (this.offline && this.application.getNoteCount() === 0) {
+        break;
-          this.showAccountMenu = true;
+      case ApplicationEvent.CompletedFullSync:
+        if (!this.completedInitialSync) {
+          this.application.getStatusManager().setMessage('');
+          this.completedInitialSync = true;
         }
-      }
+        if (!this.didCheckForOffline) {
-      this.syncUpdated();
+          this.didCheckForOffline = true;
-      this.findErrors();
+          if (this.offline && this.application.getNoteCount() === 0) {
-      this.updateOfflineStatus();
+            this.showAccountMenu = true;
-    } else if (eventName === ApplicationEvent.FailedSync) {
+          }
-      this.findErrors();
+        }
-      this.updateOfflineStatus();
+        this.syncUpdated();
-    } else if (
+        this.findErrors();
-      eventName === ApplicationEvent.SignedIn ||
+        this.updateOfflineStatus();
-      eventName === ApplicationEvent.SignedOut
+        break;
-    ) {
+      case ApplicationEvent.SyncStatusChanged:
-      this.reloadUser();
+        this.updateSyncStatus();
+        break;
+      case ApplicationEvent.FailedSync:
+        this.updateSyncStatus();
+        this.findErrors();
+        this.updateOfflineStatus();
+        break;
+      case ApplicationEvent.LocalDataIncrementalLoad:
+      case ApplicationEvent.LocalDataLoaded:
+        this.updateLocalDataStatus();
+        break;
+      case ApplicationEvent.SignedIn:
+      case ApplicationEvent.SignedOut:
+        this.reloadUser();
+        break;
+      case ApplicationEvent.WillSync:
+        if (!this.completedInitialSync) {
+          this.application.getStatusManager().setMessage('Syncing…');
+        }
+        break;
     }
   }
 
@@ -310,6 +335,56 @@ class FooterViewCtrl extends PureViewCtrl<{}, {
     });
   }
 
+  updateSyncStatus() {
+    const statusManager = this.application.getStatusManager();
+    const syncStatus = this.application!.getSyncStatus();
+    const stats = syncStatus.getStats();
+    if (syncStatus.hasError()) {
+      statusManager.setMessage('Unable to Sync');
+    } else if (stats.downloadCount > 20) {
+      const text = `Downloading ${stats.downloadCount} items. Keep app open.`;
+      statusManager.setMessage(text);
+      this.showingDownloadStatus = true;
+    } else if (this.showingDownloadStatus) {
+      this.showingDownloadStatus = false;
+      statusManager.setMessage('Download Complete.');
+      setTimeout(() => {
+        statusManager.setMessage('');
+      }, 2000);
+    } else if (stats.uploadTotalCount > 20) {
+      const completionPercentage = stats.uploadCompletionCount === 0
+        ? 0
+        : stats.uploadCompletionCount / stats.uploadTotalCount;
+
+      const stringPercentage = completionPercentage.toLocaleString(
+        undefined,
+        { style: 'percent' }
+      );
+
+      statusManager.setMessage(
+        `Syncing ${stats.uploadTotalCount} items (${stringPercentage} complete)`,
+      );
+    } else {
+      statusManager.setMessage('');
+    }
+  }
+
+  updateLocalDataStatus() {
+    const statusManager = this.application.getStatusManager();
+    const syncStatus = this.application!.getSyncStatus();
+    const stats = syncStatus.getStats();
+    const encryption = this.application!.isEncryptionAvailable();
+    if (stats.localDataDone) {
+      statusManager.setMessage('');
+      return;
+    }
+    const notesString = `${stats.localDataCurrent}/${stats.localDataTotal} items...`;
+    const loadingStatus = encryption
+      ? `Decrypting ${notesString}`
+      : `Loading ${notesString}`;
+    statusManager.setMessage(loadingStatus);
+  }
+
   reloadExtendedData() {
     if (this.reloadInProgress) {
       return;

package-lock.json

@@ -10956,8 +10956,8 @@
       "from": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad"
     },
     "snjs": {
-      "version": "github:standardnotes/snjs#403dd0ccd860c42889601446540a9e17b8f7440f",
+      "version": "github:standardnotes/snjs#3ed1e58670cf1e5b554e18a88f0ea9a28668a376",
-      "from": "github:standardnotes/snjs#403dd0ccd860c42889601446540a9e17b8f7440f"
+      "from": "github:standardnotes/snjs#3ed1e58670cf1e5b554e18a88f0ea9a28668a376"
     },
     "sockjs": {
       "version": "0.3.20",

package.json

@@ -69,6 +69,6 @@
   },
   "dependencies": {
     "sncrypto": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad",
-    "snjs": "github:standardnotes/snjs#403dd0ccd860c42889601446540a9e17b8f7440f"
+    "snjs": "github:standardnotes/snjs#3ed1e58670cf1e5b554e18a88f0ea9a28668a376"
   }
 }