From 672331faaae53cf7b30522135d3d57948afccc92 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 2 Jun 2021 20:18:59 -0300
Subject: [PATCH] feat: navigate tags with arrow keys

---
 app/assets/javascripts/components/NoteTag.tsx | 27 +++++++++++++++----
 .../ui_models/app_state/active_note_state.ts  | 25 ++++++++++++-----
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/components/NoteTag.tsx b/app/assets/javascripts/components/NoteTag.tsx
index d3c7a937d..ef304ce0a 100644
--- a/app/assets/javascripts/components/NoteTag.tsx
+++ b/app/assets/javascripts/components/NoteTag.tsx
@@ -36,6 +36,27 @@ export const NoteTag: FunctionalComponent<Props> = ({ appState, tag }) => {
     }
   };
 
+  const onKeyUp = (event: KeyboardEvent) => {
+    let previousTagElement;
+    let nextTagElement;
+
+    switch (event.key) {
+      case "Backspace":
+        deleteTag();
+        break;
+      case "ArrowLeft":
+        previousTagElement = appState.activeNote.getPreviousTagElement(tag);
+        previousTagElement?.focus();
+        break;
+      case "ArrowRight":
+        nextTagElement = appState.activeNote.getNextTagElement(tag);
+        nextTagElement?.focus();
+        break;
+      default:
+        return;
+    }
+  };
+
   return (
     <button
       ref={(element) => {
@@ -46,11 +67,7 @@ export const NoteTag: FunctionalComponent<Props> = ({ appState, tag }) => {
       className="sn-tag pl-1 pr-2 mr-2"
       style={{ maxWidth: tagsContainerMaxWidth }}
       onClick={onTagClick}
-      onKeyUp={(event) => {
-        if (event.key === 'Backspace') {
-          deleteTag();
-        }
-      }}
+      onKeyUp={onKeyUp}
       onFocus={onFocus}
       onBlur={onBlur}
     >
diff --git a/app/assets/javascripts/ui_models/app_state/active_note_state.ts b/app/assets/javascripts/ui_models/app_state/active_note_state.ts
index abfee2432..f78e06f9e 100644
--- a/app/assets/javascripts/ui_models/app_state/active_note_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/active_note_state.ts
@@ -42,6 +42,7 @@ export class ActiveNoteState {
   get activeNote(): SNNote | undefined {
     return this.appState.notes.activeEditor?.note;
   }
+
   setTagElement(tag: SNTag, element: HTMLButtonElement): void {
     const tagIndex = this.getTagIndex(tag);
     if (tagIndex > -1) {
@@ -72,10 +73,23 @@ export class ActiveNoteState {
     return this.tags.findIndex(t => t.uuid === tag.uuid);
   }
 
-  getPreviousTag(tag: SNTag): SNTag | undefined {
+  getPreviousTagElement(tag: SNTag): HTMLButtonElement | undefined {
     const previousTagIndex = this.getTagIndex(tag) - 1;
     if (previousTagIndex > -1 && this.tags.length > previousTagIndex) {
-      return this.tags[previousTagIndex];
+      const previousTag = this.tags[previousTagIndex];
+      if (previousTag) {
+        return this.getTagElement(previousTag);
+      }
+    }
+  }
+
+  getNextTagElement(tag: SNTag): HTMLButtonElement | undefined {
+    const nextTagIndex = this.getTagIndex(tag) + 1;
+    if (nextTagIndex > -1 && this.tags.length > nextTagIndex) {
+      const previousTag = this.tags[nextTagIndex];
+      if (previousTag) {
+        return this.getTagElement(previousTag);
+      }
     }
   }
 
@@ -117,15 +131,12 @@ export class ActiveNoteState {
   async removeTagFromActiveNote(tag: SNTag): Promise<void> {
     const { activeNote } = this;
     if (activeNote) {
-      const previousTag = this.getPreviousTag(tag);
+      const previousTagElement = this.getPreviousTagElement(tag);
       await this.application.changeItem(tag.uuid, (mutator) => {
         mutator.removeItemAsRelationship(activeNote);
       });
       this.application.sync();
-      if (previousTag) {
-        const previousTagElement = this.getTagElement(previousTag);
-        previousTagElement?.focus();
-      }
+      previousTagElement?.focus();
       this.reloadTags();
     }
   }