From 9dce33bb5068504f4b4bdff6a1ab72ecc6e78f1e Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 28 Aug 2022 14:15:19 +0800
Subject: [PATCH] refactor: deprecate DOM focus util

---
 .../FileExplorer/hooks/useHandleKeyDown.tsx   | 13 +++++++----
 src/utils/DOMHelper.ts                        | 23 -------------------
 2 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/src/components/FileExplorer/hooks/useHandleKeyDown.tsx b/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
index c1fdec4..ff96844 100644
--- a/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
+++ b/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
@@ -1,3 +1,4 @@
+import { SidebarContext } from 'components/SidebarContext'
 import * as React from 'react'
 import * as DOMHelper from 'utils/DOMHelper'
 import { OperatingSystems, os } from 'utils/general'
@@ -31,17 +32,19 @@ export function useHandleKeyDown(
   searched: boolean,
   setAlignMode: (mode: AlignMode) => void,
 ) {
+  const { pendingFocusTarget } = React.useContext(SidebarContext)
+  const setPendingFocusTarget = pendingFocusTarget.onChange
   return React.useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       const { nodes, focusedNode, expandedNodes } = visibleNodes
 
       const handleVerticalMove = (index: number) => {
         if (0 <= index && index < nodes.length) {
-          DOMHelper.focusFileExplorer()
+          setPendingFocusTarget('files')
           setAlignMode('lazy')
           focusNode(nodes[index])
         } else {
-          DOMHelper.focusSearchInput()
+          setPendingFocusTarget('search')
           focusNode(null)
         }
       }
@@ -136,11 +139,11 @@ export function useHandleKeyDown(
         if (nodes.length) {
           switch (key) {
             case 'ArrowDown':
-              DOMHelper.focusFileExplorer()
+              setPendingFocusTarget('files')
               focusNode(nodes[0])
               break
             case 'ArrowUp':
-              DOMHelper.focusFileExplorer()
+              setPendingFocusTarget('files')
               focusNode(nodes[nodes.length - 1])
               break
             default:
@@ -152,6 +155,6 @@ export function useHandleKeyDown(
         }
       }
     },
-    [visibleNodes, searched, goTo, focusNode, toggleExpansion, setAlignMode],
+    [visibleNodes, searched, goTo, focusNode, toggleExpansion, setAlignMode, setPendingFocusTarget],
   )
 }
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 12376f9..1f42159 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -130,29 +130,6 @@ export function copyElementContent(element: Element, trimLeadingSpace?: boolean)
   return isCopySuccessful
 }
 
-/**
- * focus to side bar, user will be able to manipulate it with keyboard
- */
-export function focusFileExplorer() {
-  const sideBarContentSelector = '.gitako-side-bar .file-explorer'
-  $(sideBarContentSelector, sideBarElement => {
-    if (document.activeElement !== sideBarElement && sideBarElement instanceof HTMLElement)
-      sideBarElement.focus()
-  })
-}
-
-export function focusSearchInput() {
-  const searchInputSelector = '.search-input input'
-  $(searchInputSelector, searchInputElement => {
-    if (
-      document.activeElement !== searchInputElement &&
-      searchInputElement instanceof HTMLElement
-    ) {
-      searchInputElement.focus()
-    }
-  })
-}
-
 export function findNodeElement(node: TreeNode, rootElement: HTMLElement): HTMLElement | null {
   const nodeElement = rootElement.querySelector(`a[href="${node.url}"]`)
   if (nodeElement instanceof HTMLElement) return nodeElement