refactor: deprecate execAfterRender pattern

Also extracted regex logic into view component

src/components/FileExplorer.tsx

@@ -37,11 +37,6 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
     setUpTree({ treeRoot, metaData, config })
   }, [setUpTree, treeRoot, config.compressSingletonFolder, config.access_token])
 
-  React.useEffect(() => {
-    const { execAfterRender } = props
-    execAfterRender()
-  })
-
   function renderFiles(visibleNodes: VisibleNodes) {
     const inSearch = searchKey !== ''
     const { nodes, focusedNode } = visibleNodes
@@ -147,7 +142,7 @@ const VirtualNode = React.memo(function VirtualNode({
       key={node.path}
       node={node}
       depth={depths.get(node) || 0}
-      focused={focusedNode === node}
+      focused={focusedNode?.path === node.path}
       loading={loading.has(node.path)}
       expanded={expandedNodes.has(node.path)}
       onClick={onNodeClick}

src/driver/core/FileExplorer.ts

@@ -2,7 +2,7 @@ import { GetCreatedMethod, MethodCreator } from 'driver/connect'
 import { platform } from 'platforms'
 import { Config } from 'utils/configHelper'
 import * as DOMHelper from 'utils/DOMHelper'
-import { searchKeyToRegexps } from 'utils/general'
+import { searchKeyToRegexp } from 'utils/general'
 import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 
 export type Props = {
@@ -21,7 +21,6 @@ export type ConnectorState = {
   searchKey: string
   searched: boolean // derived state from searchKey, = !!searchKey
 
-  execAfterRender: GetCreatedMethod<typeof execAfterRender>
   handleKeyDown: GetCreatedMethod<typeof handleKeyDown>
   search: GetCreatedMethod<typeof search>
   onNodeClick: GetCreatedMethod<typeof onNodeClick>
@@ -42,7 +41,6 @@ function getVisibleParentNode(nodes: TreeNode[], focusedNode: TreeNode) {
 }
 
 type Task = () => void
-const tasksAfterRender: Task[] = []
 let visibleNodesGenerator: VisibleNodesGenerator
 
 type BoundMethodCreator<Args extends any[] = []> = MethodCreator<Props, ConnectorState, Args>
@@ -63,14 +61,13 @@ export const setUpTree: BoundMethodCreator<[
       return root
     },
   })
-  visibleNodesGenerator.hub.addEventListener('emit', visibleNodes => dispatch.set({ visibleNodes }))
+  visibleNodesGenerator.onUpdate(visibleNodes => dispatch.set({ visibleNodes }))
 
-  tasksAfterRender.push(DOMHelper.focusSearchInput)
   dispatch.set({ state: 'done' })
 
   if (platform.shouldExpandAll?.()) {
     visibleNodesGenerator.visibleNodes.nodes.forEach(node =>
-      dispatch.call(toggleNodeExpansion, node, { skipScrollToNode: true, recursive: true }),
+      dispatch.call(toggleNodeExpansion, node, { recursive: true }),
     )
   } else {
     const targetPath = platform.getCurrentPath(metaData.branchName)
@@ -78,13 +75,6 @@ export const setUpTree: BoundMethodCreator<[
   }
 }
 
-export const execAfterRender: BoundMethodCreator = dispatch => () => {
-  for (const task of tasksAfterRender) {
-    task()
-  }
-  tasksAfterRender.length = 0
-}
-
 export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch => event => {
   const [{ searched, visibleNodes }, { loadWithPJAX }] = dispatch.get()
   if (!visibleNodes) return
@@ -192,13 +182,13 @@ export const onFocusSearchBar: BoundMethodCreator = dispatch => () => dispatch.c
 
 export const search: BoundMethodCreator<[string]> = dispatch => searchKey => {
   dispatch.set({ searchKey, searched: searchKey !== '' })
-  const regexps = searchKeyToRegexps(searchKey)
-  visibleNodesGenerator.search(regexps)
+  const regexp = searchKeyToRegexp(searchKey)
+  visibleNodesGenerator.search(regexp && (node => regexp.test(node.name)))
 }
 
-export const goTo: BoundMethodCreator<[string[]]> = dispatch => async currentPath => {
+export const goTo: BoundMethodCreator<[string[]]> = dispatch => currentPath => {
   dispatch.set({ searchKey: '', searched: false })
-  await visibleNodesGenerator.search(null)
+  visibleNodesGenerator.search(null)
   dispatch.call(expandTo, currentPath)
 }
 
@@ -216,9 +206,8 @@ export const toggleNodeExpansion: BoundMethodCreator<[
     recursive?: boolean
   },
 ]> = dispatch => async (node, { recursive = false }) => {
-  await visibleNodesGenerator.toggleExpand(node, recursive)
   visibleNodesGenerator.focusNode(node)
-  tasksAfterRender.push(DOMHelper.focusFileExplorer)
+  await visibleNodesGenerator.toggleExpand(node, recursive)
 }
 
 export const focusNode: BoundMethodCreator<[TreeNode | null]> = dispatch => (
@@ -244,10 +233,7 @@ export const onNodeClick: BoundMethodCreator<[
     const recursive =
       (recursiveToggleFolder === 'shift' && event.shiftKey) ||
       (recursiveToggleFolder === 'alt' && event.altKey)
-    dispatch.call(toggleNodeExpansion, node, {
-      skipScrollToNode: true,
-      recursive,
-    })
+    dispatch.call(toggleNodeExpansion, node, { recursive })
   } else if (node.type === 'blob') {
     const [, { loadWithPJAX }] = dispatch.get()
     dispatch.call(focusNode, node)

src/utils/VisibleNodesGenerator.ts

@@ -259,12 +259,12 @@ class FlattenLayer extends CompressLayer {
     }
   }, this.generateVisibleNodes)
 
-  search = withEffect((regexp: RegExp | null) => {
+  search = withEffect((match: ((node: TreeNode) => boolean) | null) => {
     this.focusNode(null)
     this.shake(
-      regexp
+      match
         ? {
-            match: node => regexp.test(node.name),
+            match,
             onChildMatch: node => this.$setExpand(node, true),
           }
         : undefined,
@@ -300,6 +300,10 @@ export class VisibleNodesGenerator extends FlattenLayer {
     this.baseHub.addEventListener('loadingChange', () => this.update())
   }
 
+  onUpdate(callback: (visibleNodes: VisibleNodes) => void) {
+    return this.hub.addEventListener('emit', callback)
+  }
+
   update() {
     this.hub.emit('emit', this.visibleNodes)
   }

src/utils/general.ts

@@ -141,7 +141,7 @@ export async function JSONRequest(url: string, data: any, extra: RequestInit = {
   ).json()
 }
 
-export function searchKeyToRegexps(searchKey: string) {
+export function searchKeyToRegexp(searchKey: string) {
   if (!searchKey) return null
 
   try {