fix: render problem (#655)

* fix: render problem * mod: code review
vesoft-inc · Oct 11, 2023 · 31affc1 · 31affc1
1 parent e3ed564
commit 31affc1
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 41 deletions.
diff --git a/app/components/FileConfigSetting/index.tsx b/app/components/FileConfigSetting/index.tsx
@@ -4,6 +4,7 @@ import { Button, Input, Modal, Table, Popconfirm, Dropdown, MenuProps } from 'an
 import { v4 as uuidv4 } from 'uuid';
 import { useCallback, useEffect, useState } from 'react';
 import { usePapaParse } from 'react-papaparse';
+import { debounce } from 'lodash';
 import cls from 'classnames';
 import { StudioFile } from '@app/interfaces/import';
 import { observer, useLocalObservable } from 'mobx-react-lite';
@@ -62,40 +63,43 @@ const FileConfigSetting = (props: IProps) => {
   useEffect(() => {
     state.activeItem && readFile();
   }, [state.activeItem]);
-  const readFile = useCallback(() => {
-    const { activeItem, setState } = state;
-    if (!activeItem) return;
-    setState({ loading: true });
-    let content = [];
-    if (activeItem.sample !== undefined) {
-      readString(activeItem.sample, {
-        delimiter: activeItem.delimiter || ',',
-        worker: true,
-        skipEmptyLines: true,
-        step: (row) => {
-          content = [...content, row.data];
-        },
-        complete: () => {
-          setState({ loading: false, previewContent: content });
-        },
-      });
-    } else {
-      const url = URL.createObjectURL(activeItem);
-      readRemoteFile(url, {
-        delimiter: activeItem.delimiter,
-        download: true,
-        preview: 5,
-        worker: true,
-        skipEmptyLines: true,
-        step: (row) => {
-          content = [...content, row.data];
-        },
-        complete: () => {
-          setState({ loading: false, previewContent: content });
-        },
-      });
-    }
-  }, []);
+  const readFile = useCallback(
+    debounce(() => {
+      const { activeItem, setState } = state;
+      if (!activeItem) return;
+      setState({ loading: true });
+      let content = [];
+      if (activeItem.sample !== undefined) {
+        readString(activeItem.sample, {
+          delimiter: activeItem.delimiter || ',',
+          worker: true,
+          skipEmptyLines: true,
+          step: (row) => {
+            content = [...content, row.data];
+          },
+          complete: () => {
+            setState({ loading: false, previewContent: content });
+          },
+        });
+      } else {
+        const url = URL.createObjectURL(activeItem);
+        readRemoteFile(url, {
+          delimiter: activeItem.delimiter,
+          download: true,
+          preview: 5,
+          worker: true,
+          skipEmptyLines: true,
+          step: (row) => {
+            content = [...content, row.data];
+          },
+          complete: () => {
+            setState({ loading: false, previewContent: content });
+          },
+        });
+      }
+    }, 300),
+    [],
+  );
 
   const onCheckAllChange = useCallback((e: CheckboxChangeEvent) => {
     const { data, setState } = state;
@@ -126,9 +130,12 @@ const FileConfigSetting = (props: IProps) => {
   }, []);
 
   const updateDelimiter = useCallback((e: React.ChangeEvent<HTMLInputElement>, item: StudioFile) => {
-    const { activeItem } = state;
+    const { activeItem, setState, data } = state;
     e.stopPropagation();
     item.delimiter = e.target.value;
+    setState({
+      data: data.map((i) => (i.path === item.path && (i.delimiter = e.target.value), i)),
+    });
     item === activeItem && readFile();
   }, []);
 
@@ -281,7 +288,7 @@ const FileConfigSetting = (props: IProps) => {
             className={styles.previewTable}
             dataSource={data}
             columns={columns}
-            rowKey={() => uuidv4()}
+            rowKey="path"
             pagination={false}
           />
         </div>

diff --git a/app/config/locale/en-US.ts b/app/config/locale/en-US.ts
@@ -112,7 +112,6 @@ export default {
     port: 'Port',
     username: 'Username',
     password: 'Password',
-    success: 'succeed',
     clear: 'Log out',
     title: `Connect to ${window.gConfig.databaseName}`,
     tip: "Don't know the address? Docs->",

diff --git a/app/config/locale/zh-CN.ts b/app/config/locale/zh-CN.ts
@@ -107,7 +107,6 @@ export default {
     port: 'Port',
     username: '用户名',
     password: '密码',
-    success: '配置成功',
     clear: '登出',
     title: '配置数据库',
     tip: '连接数据库说明文档->',

diff --git a/app/pages/Import/TaskList/index.tsx b/app/pages/Import/TaskList/index.tsx
@@ -25,7 +25,7 @@ const TaskList = () => {
   const { dataImport, global, moduleConfiguration, schema } = useStore();
   const { spaces, getSpaces } = schema;
   const isMounted = useRef(true);
-  const [filter, setFilter] = useState({ page: 1, pageSize: 10, space: '' });
+  const [filter, setFilter] = useState({ page: 1, pageSize: 10, space: undefined });
   const { intl, currentLocale } = useI18n();
   const history = useHistory();
   const { taskList, getTaskList, stopTask, deleteTask } = dataImport;
@@ -70,7 +70,7 @@ const TaskList = () => {
   }, []);
   const initList = useCallback(async () => {
     setLoading(true);
-    await getData({ page: 1, space: '' });
+    await getData({ page: 1, space: undefined });
     setLoading(false);
   }, []);
   const handleRerun = () => {

diff --git a/app/stores/global.ts b/app/stores/global.ts
@@ -107,7 +107,6 @@ export class GlobalStore {
       },
     )) as any;
     if (code === 0) {
-      message.success(intl.get('configServer.success'));
       cookies.set('nh', _host);
       cookies.set('nu', username);
       const socketConncted = await this.ngqlRunner.connect({