From 36e0c7714ca09f46dc2407d7a52292d45369a6f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 22 Mar 2023 14:01:01 +0800
Subject: [PATCH] =?UTF-8?q?enhance(list):=E8=81=9A=E7=84=A6=E6=97=B6?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E8=87=AA=E5=8A=A8=E5=B1=95=E5=BC=80=E8=A2=AB?=
 =?UTF-8?q?=E8=81=9A=E7=84=A6=E7=9A=84=E6=96=87=E4=BB=B6=E5=A4=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DirTree.tsx | 35 +++++++++++++++++++++--------------
 src/states/dirs.ts         |  1 -
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/DirTree.tsx b/src/components/DirTree.tsx
index 82b712d..7358434 100644
--- a/src/components/DirTree.tsx
+++ b/src/components/DirTree.tsx
@@ -4,16 +4,17 @@ import { ActionIcon, Box, Flex, Stack, Text, Tooltip } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconEye, IconSquareMinus, IconSquarePlus } from '@tabler/icons-react';
 import { invoke } from '@tauri-apps/api';
+import EventEmitter from 'events';
 import { equals, isEmpty, isNil, map, not } from 'ramda';
-import { FC, PropsWithChildren, useCallback, useContext, useState } from 'react';
-import { useMeasure, useMount } from 'react-use';
+import { FC, PropsWithChildren, useCallback, useContext } from 'react';
+import { useLifecycles, useMeasure } from 'react-use';
 import { EventBusContext } from '../EventBus';
 import { DirItem } from '../models';
 import { loadSubDirectories } from '../queries/directories';
 import {
   currentRootsSelector,
   isExpandedSelector,
-  selectDirectories,
+  subDirectoriesSelector,
   useDirTreeStore
 } from '../states/dirs';
 import { useFileListStore } from '../states/files';
@@ -30,12 +31,9 @@ const Tree = styled.ul`
   }
 `;
 
-const Branch: FC<PropsWithChildren<{ current: DirItem; expanded: boolean }>> = ({
-  children,
-  current
-}) => {
+const Branch: FC<PropsWithChildren<{ current: DirItem }>> = ({ children, current }) => {
   const { directories: allSubDirs } = useDirTreeStore();
-  const [subDirs, setSubDirs] = useState<DirItem[]>([]);
+  const subDirs = useDirTreeStore(subDirectoriesSelector(current.id));
   const isCurrentExpanded = useDirTreeStore(isExpandedSelector(current.id));
   const expend = useDirTreeStore.use.expandDir();
   const fold = useDirTreeStore.use.foldDir();
@@ -44,18 +42,24 @@ const Branch: FC<PropsWithChildren<{ current: DirItem; expanded: boolean }>> = (
   const storeFiles = useFileListStore.use.updateFiles();
   const ebus = useContext<EventEmitter>(EventBusContext);
 
-  useMount(() => {
-    if (isCurrentExpanded) {
-      setSubDirs(selectDirectories(current.id)(useDirTreeStore.getState().directories));
+  useLifecycles(
+    () => {
+      ebus.addListener(`expand:${current.id}`, () => {
+        expend(current.id);
+        loadSubDirectories(current);
+      });
+    },
+    () => {
+      ebus.removeAllListeners(`expand:${current.id}`);
     }
-  });
+  );
+
   const handleExpandAction = useCallback(async () => {
     try {
       if (isCurrentExpanded) {
         fold(current.id);
       } else {
         await loadSubDirectories(current);
-        setSubDirs(selectDirectories(current.id)(useDirTreeStore.getState().directories));
         expend(current.id);
       }
     } catch (e) {
@@ -117,13 +121,16 @@ const Branch: FC<PropsWithChildren<{ current: DirItem; expanded: boolean }>> = (
 
 export const DirTree: FC = () => {
   const roots = useDirTreeStore(currentRootsSelector());
-  const { focused, focus, unfocus, selected } = useDirTreeStore();
+  const { focused, focus, unfocus, selected, foldDir } = useDirTreeStore();
   const [viewRef, { width }] = useMeasure();
+  const ebus = useContext<EventEmitter>(EventBusContext);
 
   const handleFocusAction = useCallback(() => {
     if (isNil(focused) && not(isNil(selected))) {
+      ebus.emit(`expand:${selected}`);
       focus(selected);
     } else {
+      foldDir(focused.id);
       unfocus();
     }
   }, [focused, selected]);
diff --git a/src/states/dirs.ts b/src/states/dirs.ts
index c21ed95..9c7520b 100644
--- a/src/states/dirs.ts
+++ b/src/states/dirs.ts
@@ -92,7 +92,6 @@ export const useDirTreeStore = createStoreHook<DirsStates & DirsActions>((set, g
   },
   focus(specifiedDirId) {
     const requestedDir = find(propEq('id', specifiedDirId), get().directories);
-    console.log('[debug]focus search: ', specifiedDirId, requestedDir);
     if (not(isNil(requestedDir))) {
       set(df => {
         df.focused = requestedDir;