refactor: extract list-control hooks

src/components/FileExplorer/ListView.tsx

@@ -1,9 +1,6 @@
 import { useConfigs } from 'containers/ConfigsContext'
-import { platform } from 'platforms'
 import * as React from 'react'
 import { Align, FixedSizeList } from 'react-window'
-import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import { NodeRendererContext } from '.'
 import { VirtualNode } from './VirtualNode'
@@ -12,17 +9,9 @@ type ListViewProps = {
   height: number
   width: number
   nodeRendererContext: NodeRendererContext
-  metaData: MetaData
-  expandTo: (path: string[]) => void
 }
 
-export function ListView({
-  width,
-  height,
-  metaData,
-  expandTo,
-  nodeRendererContext,
-}: ListViewProps) {
+export function ListView({ width, height, nodeRendererContext }: ListViewProps) {
   const { visibleNodes } = nodeRendererContext
   const { focusedNode, nodes } = visibleNodes
 
@@ -59,14 +48,6 @@ export function ListView({
     if (enableScroll && $mode.value === 'start') $mode.onChange('smart')
   }, [enableScroll, $mode.value]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const goToCurrentItem = React.useCallback(() => {
-    const targetPath = platform.getCurrentPath(metaData.branchName)
-    if (targetPath) expandTo(targetPath)
-  }, [metaData.branchName, expandTo])
-
-  useOnLocationChange(goToCurrentItem)
-  useOnPJAXDone(goToCurrentItem)
-
   const { compactFileTree } = useConfigs().value
 
   return (

src/components/FileExplorer/index.tsx

@@ -1,9 +1,12 @@
 import { Label, Text } from '@primer/react'
 import { LoadingIndicator } from 'components/LoadingIndicator'
 import { SearchBar } from 'components/SearchBar'
+import { platform } from 'platforms'
 import * as React from 'react'
 import { run } from 'utils/general'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
+import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
+import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { SideBarStateContext } from '../../containers/SideBarState'
 import { SizeObserver } from '../SizeObserver'
@@ -79,6 +82,14 @@ export function FileExplorer({ metaData }: Props) {
   const state = useLoadedContext(SideBarStateContext).value
   useFocusFileExplorerOnFirstRender()
 
+  const goToCurrentItem = React.useCallback(() => {
+    const targetPath = platform.getCurrentPath(metaData.branchName)
+    if (targetPath) expandTo(targetPath)
+  }, [metaData.branchName, expandTo])
+
+  useOnLocationChange(goToCurrentItem)
+  useOnPJAXDone(goToCurrentItem)
+
   return (
     <div className={`file-explorer`} tabIndex={-1} onKeyDown={handleKeyDown}>
       {run(() => {
@@ -124,8 +135,6 @@ export function FileExplorer({ metaData }: Props) {
                             height={height}
                             width={width}
                             nodeRendererContext={nodeRendererContext}
-                            expandTo={expandTo}
-                            metaData={metaData}
                           />
                         </div>
                       )}