fix: support refactored SNJS history

app/assets/javascripts/directives/views/historyMenu.ts

@@ -1,71 +1,64 @@
 import { WebDirective } from '../../types';
 import { WebApplication } from '@/ui_models/application';
 import template from '%/directives/history-menu.pug';
-import { SNItem, ItemHistoryEntry } from '@standardnotes/snjs';
+import { HistoryEntry, SNItem } from '@standardnotes/snjs';
 import { PureViewCtrl } from '@/views';
-import { ItemSessionHistory } from '@standardnotes/snjs';
 import { RevisionListEntry, SingleRevision } from '@standardnotes/snjs';
-import { confirmDialog } from '@/services/alertService';
+import { alertDialog, confirmDialog } from '@/services/alertService';
 
 type HistoryState = {
-  fetchingRemoteHistory: boolean
-}
+  sessionHistory?: HistoryEntry[];
+  remoteHistory?: RevisionListEntry[];
+  fetchingRemoteHistory: boolean;
+  autoOptimize: boolean;
+  diskEnabled: boolean;
+};
 
-interface HistoryScope {
-  application: WebApplication
-  item: SNItem
-}
+class HistoryMenuCtrl extends PureViewCtrl<unknown, HistoryState> {
+  application!: WebApplication;
+  item!: SNItem;
 
-class HistoryMenuCtrl extends PureViewCtrl<unknown, HistoryState> implements HistoryScope {
-
-  diskEnabled = false
-  autoOptimize = false
-  application!: WebApplication
-  item!: SNItem
-  sessionHistory?: ItemSessionHistory
-  remoteHistory?: RevisionListEntry[]
+  /** @template */
+  showSessionOptions = false;
 
   /* @ngInject */
-  constructor(
-    $timeout: ng.ITimeoutService
-  ) {
+  constructor($timeout: ng.ITimeoutService) {
     super($timeout);
-    this.state = {
-      fetchingRemoteHistory: false
+  }
+
+  getInitialState() {
+    return {
+      fetchingRemoteHistory: false,
+      autoOptimize: this.application.historyManager.autoOptimize,
+      diskEnabled: this.application.historyManager.isDiskEnabled(),
     };
   }
 
+  reloadState() {
+    this.setState({
+      ...this.getInitialState(),
+      fetchingRemoteHistory: this.state.fetchingRemoteHistory,
+    });
+  }
+
   $onInit() {
     super.$onInit();
-    this.reloadSessionHistory();
     this.fetchRemoteHistory();
-    this.diskEnabled = this.application.historyManager!.isDiskEnabled();
-    this.autoOptimize = this.application.historyManager!.isAutoOptimizeEnabled();
-  }
-
-  reloadSessionHistory() {
-    this.sessionHistory = this.application.historyManager!.sessionHistoryForItem(this.item);
-  }
-
-  get isfetchingRemoteHistory() {
-    return this.state.fetchingRemoteHistory;
-  }
-
-  set fetchingRemoteHistory(value: boolean) {
-    this.setState({
-      fetchingRemoteHistory: value
-    });
   }
 
   async fetchRemoteHistory() {
-    this.fetchingRemoteHistory = true;
-    this.remoteHistory = await this.application.historyManager!.remoteHistoryForItem(this.item)
-      .finally(() => {
-        this.fetchingRemoteHistory = false;
-      });
+    this.setState({ fetchingRemoteHistory: true });
+    try {
+      const remoteHistory = await this.application.historyManager.remoteHistoryForItem(
+        this.item
+      );
+      this.setState({ remoteHistory });
+    } finally {
+      this.setState({ fetchingRemoteHistory: false });
+    }
   }
 
-  async openSessionRevision(revision: ItemHistoryEntry) {
+  async openSessionRevision(revision: HistoryEntry) {
     this.application.presentRevisionPreviewModal(
       revision.payload.uuid,
       revision.payload.content
@@ -73,11 +66,17 @@ class HistoryMenuCtrl extends PureViewCtrl<unknown, HistoryState> implements His
   }
 
   async openRemoteRevision(revision: RevisionListEntry) {
-    this.fetchingRemoteHistory = true;
-    const remoteRevision = await this.application.historyManager!.fetchRemoteRevision(this.item.uuid, revision);
-    this.fetchingRemoteHistory = false;
+    this.setState({ fetchingRemoteHistory: true });
+    const remoteRevision = await this.application.historyManager.fetchRemoteRevision(
+      this.item.uuid,
+      revision
+    );
+    this.setState({ fetchingRemoteHistory: false });
     if (!remoteRevision) {
-      this.application.alertService!.alert("The remote revision could not be loaded. Please try again later.");
+      alertDialog({
+        text:
+          'The remote revision could not be loaded. Please try again later.',
+      });
       return;
     }
     this.application.presentRevisionPreviewModal(
@@ -86,7 +85,7 @@ class HistoryMenuCtrl extends PureViewCtrl<unknown, HistoryState> implements His
     );
   }
 
-  classForSessionRevision(revision: ItemHistoryEntry) {
+  classForSessionRevision(revision: HistoryEntry) {
     const vector = revision.operationVector();
     if (vector === 0) {
       return 'default';
@@ -97,81 +96,63 @@ class HistoryMenuCtrl extends PureViewCtrl<unknown, HistoryState> implements His
     }
   }
 
-  clearItemSessionHistory() {
-    confirmDialog({
-      text: "Are you sure you want to delete the local session history for this note?",
-      confirmButtonStyle: "danger"
-    }).then((confirmed) => {
-      if (!confirmed) {
-        return;
-      }
-      this.application.historyManager!.clearHistoryForItem(this.item).then(() => {
-        this.$timeout(() => {
-          this.reloadSessionHistory();
-        });
-      });
-    });
-  }
-
-  clearAllSessionHistory() {
-    confirmDialog({
-      text: "Are you sure you want to delete the local session history for all notes?",
-      confirmButtonStyle: "danger"
-    }).then((confirmed) => {
-      if (!confirmed) {
-        return;
-      }
-      this.application.historyManager!.clearAllHistory().then(() => {
-        this.$timeout(() => {
-          this.reloadSessionHistory();
-        });
-      });
-    });
-  }
-
-  get sessionHistoryEntries() {
-    return this.sessionHistory?.entries;
-  }
-
-  get remoteHistoryEntries() {
-    return this.remoteHistory;
-  }
-
-  toggleSessionHistoryDiskSaving() {
-    const run = () => {
-      this.application.historyManager!.toggleDiskSaving().then(() => {
-        this.$timeout(() => {
-          this.diskEnabled = this.application.historyManager!.isDiskEnabled();
-        });
-      });
-    };
-    if (!this.application.historyManager!.isDiskEnabled()) {
-      confirmDialog({
-        text: "Are you sure you want to save history to disk? This will decrease general " +
-        "performance, especially as you type. You are advised to disable this feature " +
-        "if you experience any lagging.",
-        confirmButtonStyle: "danger"
-      }).then((confirmed) => {
-        if (confirmed) {
-          run();
-        }
-      });
-    } else {
-      run();
+  async clearItemSessionHistory() {
+    if (
+      await confirmDialog({
+        text:
+          'Are you sure you want to delete the local session history for this note?',
+        confirmButtonStyle: 'danger',
+      })
+    ) {
+      this.application.historyManager.clearHistoryForItem(this.item);
+      this.reloadState();
     }
   }
 
+  async clearAllSessionHistory() {
+    if (
+      await confirmDialog({
+        text:
+          'Are you sure you want to delete the local session history for all notes?',
+        confirmButtonStyle: 'danger',
+      })
+    ) {
+      await this.application.historyManager.clearAllHistory();
+      this.reloadState();
+    }
+  }
+
+  /** @entries */
+  get sessionHistoryEntries() {
+    return this.state.sessionHistory?.entries;
+  }
+
+  async toggleSessionHistoryDiskSaving() {
+    if (!this.state.diskEnabled) {
+      if (
+        await confirmDialog({
+          text:
+            'Are you sure you want to save history to disk? This will decrease general ' +
+            'performance, especially as you type. You are advised to disable this feature ' +
+            'if you experience any lagging.',
+          confirmButtonStyle: 'danger',
+        })
+      ) {
+        this.application.historyManager.toggleDiskSaving();
+      }
+    } else {
+      this.application.historyManager.toggleDiskSaving();
+    }
+    this.reloadState();
+  }
+
   toggleSessionHistoryAutoOptimize() {
-    this.application.historyManager!.toggleAutoOptimize().then(() => {
-      this.$timeout(() => {
-        this.autoOptimize = this.application.historyManager!.autoOptimize;
-      });
-    });
+    this.application.historyManager.toggleAutoOptimize();
+    this.reloadState();
   }
 
   previewRemoteHistoryTitle(revision: SingleRevision) {
-    const createdAt = revision.created_at!;
-    return new Date(createdAt).toLocaleString();
+    return new Date(revision.created_at).toLocaleString();
   }
 }
 
@@ -185,7 +166,7 @@ export class HistoryMenu extends WebDirective {
     this.bindToController = true;
     this.scope = {
       item: '=',
-      application: '='
+      application: '=',
     };
   }
 }

app/assets/templates/directives/history-menu.pug

@@ -17,12 +17,12 @@
         )
       menu-row(
         action='ctrl.toggleSessionHistoryAutoOptimize()'
-        label="(ctrl.autoOptimize ? 'Disable' : 'Enable') + ' auto cleanup'")
+        label="(ctrl.state.autoOptimize ? 'Disable' : 'Enable') + ' auto cleanup'")
         .sk-sublabel
           | Automatically cleans up small revisions to conserve space.
       menu-row(
         action='ctrl.toggleSessionHistoryDiskSaving()'
-        label="(ctrl.diskEnabled ? 'Disable' : 'Enable') + ' saving history to disk'"
+        label="(ctrl.state.diskEnabled ? 'Disable' : 'Enable') + ' saving history to disk'"
         )
         .sk-sublabel
           | Saving to disk is not recommended. Decreases performance and increases app
@@ -49,7 +49,7 @@
         .sk-sublabel
           | Fetch history from server.
     menu-row(
-      ng-repeat='revision in ctrl.remoteHistoryEntries track by $index'
+      ng-repeat='revision in ctrl.remoteHistory track by $index'
       action='ctrl.openRemoteRevision(revision);'
       label='ctrl.previewRemoteHistoryTitle(revision);'
       )