From 386ca341789c502a9e8b8e48accf040ad6260ba2 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 3 Jun 2021 13:53:49 -0300
Subject: [PATCH] refactor: rename state

---
 .../javascripts/components/AutocompleteTagHint.tsx |  4 ++--
 .../components/AutocompleteTagInput.tsx            | 14 +++++++-------
 .../components/AutocompleteTagResult.tsx           |  8 ++++----
 app/assets/javascripts/components/NoteTag.tsx      | 10 +++++-----
 .../javascripts/components/NoteTagsContainer.tsx   |  6 +++---
 .../javascripts/ui_models/app_state/app_state.ts   | 14 +++++++-------
 .../{active_note_state.ts => note_tags_state.ts}   |  2 +-
 .../javascripts/ui_models/app_state/notes_state.ts |  2 +-
 app/assets/javascripts/views/notes/notes_view.ts   |  6 +++---
 9 files changed, 33 insertions(+), 33 deletions(-)
 rename app/assets/javascripts/ui_models/app_state/{active_note_state.ts => note_tags_state.ts} (99%)

diff --git a/app/assets/javascripts/components/AutocompleteTagHint.tsx b/app/assets/javascripts/components/AutocompleteTagHint.tsx
index 65630b4f4..ec5905000 100644
--- a/app/assets/javascripts/components/AutocompleteTagHint.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagHint.tsx
@@ -10,10 +10,10 @@ type Props = {
 export const AutocompleteTagHint = observer(
   ({ appState, closeOnBlur }: Props) => {
     const { autocompleteSearchQuery, autocompleteTagResults } =
-      appState.activeNote;
+      appState.noteTags;
 
     const onTagHintClick = async () => {
-      await appState.activeNote.createAndAddNewTag();
+      await appState.noteTags.createAndAddNewTag();
     };
 
     return (
diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index fa8efc6fc..f887d0d0a 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -17,7 +17,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
     autocompleteTagResults,
     tagElements,
     tags,
-  } = appState.activeNote;
+  } = appState.noteTags;
 
   const [dropdownVisible, setDropdownVisible] = useState(false);
   const [dropdownMaxHeight, setDropdownMaxHeight] =
@@ -28,7 +28,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
 
   const [closeOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) => {
     setDropdownVisible(visible);
-    appState.activeNote.clearAutocompleteSearch();
+    appState.noteTags.clearAutocompleteSearch();
   });
 
   const showDropdown = () => {
@@ -40,18 +40,18 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
 
   const onSearchQueryChange = (event: Event) => {
     const query = (event.target as HTMLInputElement).value;
-    appState.activeNote.setAutocompleteSearchQuery(query);
-    appState.activeNote.searchActiveNoteAutocompleteTags();
+    appState.noteTags.setAutocompleteSearchQuery(query);
+    appState.noteTags.searchActiveNoteAutocompleteTags();
   };
 
   const onFormSubmit = async (event: Event) => {
     event.preventDefault();
-    await appState.activeNote.createAndAddNewTag();
+    await appState.noteTags.createAndAddNewTag();
   };
 
   useEffect(() => {
-    appState.activeNote.searchActiveNoteAutocompleteTags();
-  }, [appState.activeNote]);
+    appState.noteTags.searchActiveNoteAutocompleteTags();
+  }, [appState.noteTags]);
 
   return (
     <form
diff --git a/app/assets/javascripts/components/AutocompleteTagResult.tsx b/app/assets/javascripts/components/AutocompleteTagResult.tsx
index f61830f16..ae31932eb 100644
--- a/app/assets/javascripts/components/AutocompleteTagResult.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagResult.tsx
@@ -11,18 +11,18 @@ type Props = {
 
 export const AutocompleteTagResult = observer(
   ({ appState, tagResult, closeOnBlur }: Props) => {
-    const { autocompleteSearchQuery } = appState.activeNote;
+    const { autocompleteSearchQuery } = appState.noteTags;
 
     const onTagOptionClick = async (tag: SNTag) => {
-      await appState.activeNote.addTagToActiveNote(tag);
-      appState.activeNote.clearAutocompleteSearch();
+      await appState.noteTags.addTagToActiveNote(tag);
+      appState.noteTags.clearAutocompleteSearch();
     };
 
     return (
       <button
         ref={(element) => {
           if (element) {
-            appState.activeNote.setAutocompleteTagResultElement(
+            appState.noteTags.setAutocompleteTagResultElement(
               tagResult,
               element
             );
diff --git a/app/assets/javascripts/components/NoteTag.tsx b/app/assets/javascripts/components/NoteTag.tsx
index a0bf2f73c..36b272fb1 100644
--- a/app/assets/javascripts/components/NoteTag.tsx
+++ b/app/assets/javascripts/components/NoteTag.tsx
@@ -10,13 +10,13 @@ type Props = {
 };
 
 export const NoteTag = observer(({ appState, tag }: Props) => {
-  const { tagsContainerMaxWidth } = appState.activeNote;
+  const { tagsContainerMaxWidth } = appState.noteTags;
 
   const [showDeleteButton, setShowDeleteButton] = useState(false);
   const deleteTagRef = useRef<HTMLButtonElement>();
 
   const deleteTag = () => {
-    appState.activeNote.removeTagFromActiveNote(tag);
+    appState.noteTags.removeTagFromActiveNote(tag);
   };
 
   const onTagClick = () => {
@@ -43,11 +43,11 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
         deleteTag();
         break;
       case 'ArrowLeft':
-        previousTagElement = appState.activeNote.getPreviousTagElement(tag);
+        previousTagElement = appState.noteTags.getPreviousTagElement(tag);
         previousTagElement?.focus();
         break;
       case 'ArrowRight':
-        nextTagElement = appState.activeNote.getNextTagElement(tag);
+        nextTagElement = appState.noteTags.getNextTagElement(tag);
         nextTagElement?.focus();
         break;
       default:
@@ -59,7 +59,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
     <button
       ref={(element) => {
         if (element) {
-          appState.activeNote.setTagElement(tag, element);
+          appState.noteTags.setTagElement(tag, element);
         }
       }}
       className="sn-tag pl-1 pr-2 mr-2"
diff --git a/app/assets/javascripts/components/NoteTagsContainer.tsx b/app/assets/javascripts/components/NoteTagsContainer.tsx
index dbf73fceb..e2815fd72 100644
--- a/app/assets/javascripts/components/NoteTagsContainer.tsx
+++ b/app/assets/javascripts/components/NoteTagsContainer.tsx
@@ -13,11 +13,11 @@ const NoteTagsContainer = observer(({ appState }: Props) => {
   const {
     tags,
     tagsContainerMaxWidth,
-  } = appState.activeNote;
+  } = appState.noteTags;
 
   useEffect(() => {
-    appState.activeNote.reloadTagsContainerMaxWidth();
-  }, [appState.activeNote]);
+    appState.noteTags.reloadTagsContainerMaxWidth();
+  }, [appState.noteTags]);
 
   return (
       <div
diff --git a/app/assets/javascripts/ui_models/app_state/app_state.ts b/app/assets/javascripts/ui_models/app_state/app_state.ts
index 6e32479ad..c57d88fb3 100644
--- a/app/assets/javascripts/ui_models/app_state/app_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/app_state.ts
@@ -16,7 +16,7 @@ import { Bridge } from '@/services/bridge';
 import { storage, StorageKey } from '@/services/localStorage';
 import { AccountMenuState } from './account_menu_state';
 import { ActionsMenuState } from './actions_menu_state';
-import { ActiveNoteState } from './active_note_state';
+import { NoteTagsState } from './note_tags_state';
 import { NoAccountWarningState } from './no_account_warning_state';
 import { SyncState } from './sync_state';
 import { SearchOptionsState } from './search_options_state';
@@ -63,8 +63,8 @@ export class AppState {
   showBetaWarning: boolean;
   readonly accountMenu = new AccountMenuState();
   readonly actionsMenu = new ActionsMenuState();
-  readonly activeNote: ActiveNoteState;
   readonly noAccountWarning: NoAccountWarningState;
+  readonly noteTags: NoteTagsState;
   readonly sync = new SyncState();
   readonly searchOptions: SearchOptionsState;
   readonly notes: NotesState;
@@ -83,11 +83,6 @@ export class AppState {
     this.$timeout = $timeout;
     this.$rootScope = $rootScope;
     this.application = application;
-    this.activeNote = new ActiveNoteState(
-      application,
-      this,
-      this.appEventObserverRemovers
-    );
     this.notes = new NotesState(
       application,
       this,
@@ -96,6 +91,11 @@ export class AppState {
       },
       this.appEventObserverRemovers,
     );
+    this.noteTags = new NoteTagsState(
+      application,
+      this,
+      this.appEventObserverRemovers
+    );
     this.tags = new TagsState(
       application,
       this.appEventObserverRemovers,
diff --git a/app/assets/javascripts/ui_models/app_state/active_note_state.ts b/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
similarity index 99%
rename from app/assets/javascripts/ui_models/app_state/active_note_state.ts
rename to app/assets/javascripts/ui_models/app_state/note_tags_state.ts
index c7a0dc124..efa8c8471 100644
--- a/app/assets/javascripts/ui_models/app_state/active_note_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
@@ -3,7 +3,7 @@ import { action, computed, makeObservable, observable } from 'mobx';
 import { WebApplication } from '../application';
 import { AppState } from './app_state';
 
-export class ActiveNoteState {
+export class NoteTagsState {
   autocompleteSearchQuery = '';
   autocompleteTagResultElements: (HTMLButtonElement | undefined)[] = [];
   autocompleteTagResults: SNTag[] = [];
diff --git a/app/assets/javascripts/ui_models/app_state/notes_state.ts b/app/assets/javascripts/ui_models/app_state/notes_state.ts
index 19e5967e6..c298c27c2 100644
--- a/app/assets/javascripts/ui_models/app_state/notes_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/notes_state.ts
@@ -171,7 +171,7 @@ export class NotesState {
       this.activeEditor.setNote(note);
     }
     
-    this.appState.activeNote.reloadTags();
+    this.appState.noteTags.reloadTags();
     await this.onActiveEditorChanged();
 
     if (note.waitingForKey) {
diff --git a/app/assets/javascripts/views/notes/notes_view.ts b/app/assets/javascripts/views/notes/notes_view.ts
index bee234060..c5bcb03ee 100644
--- a/app/assets/javascripts/views/notes/notes_view.ts
+++ b/app/assets/javascripts/views/notes/notes_view.ts
@@ -410,7 +410,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
     await this.appState.createEditor(title);
     await this.flushUI();
     await this.reloadNotes();
-    await this.appState.activeNote.reloadTags();
+    await this.appState.noteTags.reloadTags();
   }
 
   async handleTagChange(tag: SNTag) {
@@ -649,7 +649,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
     __: boolean,
     isCollapsed: boolean
   ) {
-    this.appState.activeNote.reloadTagsContainerMaxWidth();
+    this.appState.noteTags.reloadTagsContainerMaxWidth();
     this.application.setPreference(
       PrefKey.NotesPanelWidth,
       newWidth
@@ -661,7 +661,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
   }
 
   onPanelWidthEvent(): void {
-    this.appState.activeNote.reloadTagsContainerMaxWidth();
+    this.appState.noteTags.reloadTagsContainerMaxWidth();
   }
 
   paginate() {