From c55a7e45a4f126a88202f271c82be7d7a6650075 Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Wed, 21 Oct 2020 15:55:09 +0200
Subject: [PATCH] fix: promote actions visibility to global state

---
 .../directives/views/actionsMenu.ts           | 25 ++++++++++++-------
 app/assets/javascripts/ui_models/app_state.ts | 25 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/directives/views/actionsMenu.ts b/app/assets/javascripts/directives/views/actionsMenu.ts
index 4d7c8d28e..52cdcd27c 100644
--- a/app/assets/javascripts/directives/views/actionsMenu.ts
+++ b/app/assets/javascripts/directives/views/actionsMenu.ts
@@ -5,6 +5,7 @@ import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
 import { SNItem, Action, SNActionsExtension, UuidString } from 'snjs/dist/@types';
 import { ActionResponse } from 'snjs';
 import { ActionsExtensionMutator } from 'snjs/dist/@types/models/app/extension';
+import { autorun, IReactionDisposer } from 'mobx';
 
 type ActionsMenuScope = {
   application: WebApplication
@@ -19,7 +20,6 @@ type ActionSubRow = {
 }
 
 type ExtensionState = {
-  hidden: boolean
   loading: boolean
   error: boolean
 }
@@ -43,6 +43,7 @@ type ActionsMenuState = {
 class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements ActionsMenuScope {
   application!: WebApplication
   item!: SNItem
+  private removeHiddenExtensionsListener?: IReactionDisposer;
 
   /* @ngInject */
   constructor(
@@ -57,9 +58,17 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
       item: this.item
     });
     this.loadExtensions();
-    this.rebuildMenu();
+    this.removeHiddenExtensionsListener = autorun(() => {
+      this.rebuildMenu({
+        hiddenExtensions: this.appState.actionsMenu.hiddenExtensions
+      });
+    });
   };
 
+  deinit() {
+    this.removeHiddenExtensionsListener?.();
+  }
+
   /** @override */
   getInitialState() {
     const extensions = this.application.actionsManager!.getExtensions().sort((a, b) => {
@@ -70,12 +79,12 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
       extensionsState[extension.uuid] = {
         loading: false,
         error: false,
-        hidden: false
       };
     });
     return {
       extensions,
       extensionsState,
+      hiddenExtensions: {},
       menu: [],
     };
   }
@@ -84,6 +93,7 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
     extensions = this.state.extensions,
     extensionsState = this.state.extensionsState,
     selectedActionId = this.state.selectedActionId,
+    hiddenExtensions = this.appState.actionsMenu.hiddenExtensions,
   } = {}) {
     return this.setState({
       extensions,
@@ -91,12 +101,13 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
       selectedActionId,
       menu: extensions.map(extension => {
         const state = extensionsState[extension.uuid];
+        const hidden = hiddenExtensions[extension.uuid];
         return {
           uuid: extension.uuid,
           name: extension.name,
           loading: state?.loading ?? false,
           error: state?.error ?? false,
-          hidden: state?.hidden ?? false,
+          hidden: hidden ?? false,
           deprecation: extension.deprecation!,
           actions: extension.actionsWithContextForItem(this.item).map(action => {
             if (action.id === selectedActionId) {
@@ -237,11 +248,7 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
   }
 
   public toggleExtensionVisibility(extensionUuid: UuidString) {
-    const { extensionsState } = this.state;
-    extensionsState[extensionUuid].hidden = !extensionsState[extensionUuid].hidden;
-    this.rebuildMenu({
-      extensionsState
-    });
+    this.appState.actionsMenu.toggleExtensionVisibility(extensionUuid);
   }
 
   private setLoadingExtension(extensionUuid: UuidString, value = false) {
diff --git a/app/assets/javascripts/ui_models/app_state.ts b/app/assets/javascripts/ui_models/app_state.ts
index f22e177de..4d93f71ee 100644
--- a/app/assets/javascripts/ui_models/app_state.ts
+++ b/app/assets/javascripts/ui_models/app_state.ts
@@ -9,7 +9,8 @@ import {
   ContentType,
   SNSmartTag,
   PayloadSource,
-  DeinitSource
+  DeinitSource,
+  UuidString
 } from 'snjs';
 import { WebApplication } from '@/ui_models/application';
 import { Editor } from '@/ui_models/editor';
@@ -36,6 +37,26 @@ type ObserverCallback = (event: AppStateEvent, data?: any) => Promise<void>
 
 const SHOW_BETA_WARNING_KEY = 'show_beta_warning';
 
+class ActionsMenuState {
+  hiddenExtensions: Record<UuidString, boolean> = {};
+
+  constructor() {
+    makeObservable(this, {
+      hiddenExtensions: observable,
+      toggleExtensionVisibility: action,
+      deinit: action,
+    });
+  }
+
+  toggleExtensionVisibility(uuid: UuidString) {
+    this.hiddenExtensions[uuid] = !this.hiddenExtensions[uuid];
+  }
+
+  deinit() {
+    this.hiddenExtensions = {};
+  }
+}
+
 export class AppState {
   $rootScope: ng.IRootScopeService;
   $timeout: ng.ITimeoutService;
@@ -50,6 +71,7 @@ export class AppState {
   userPreferences?: SNUserPrefs;
   multiEditorEnabled = false;
   showBetaWarning = false;
+  actionsMenu = new ActionsMenuState();
 
   /* @ngInject */
   constructor(
@@ -82,6 +104,7 @@ export class AppState {
     if (source === DeinitSource.SignOut) {
       localStorage.removeItem(SHOW_BETA_WARNING_KEY);
     }
+    this.actionsMenu.deinit();
     this.unsubApp();
     this.unsubApp = undefined;
     this.observers.length = 0;