chore: export

src/view/download/index.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
-import { Table, Modal } from 'antd';
-import { path, shell, fs } from '@tauri-apps/api';
+import { Table, Modal, Popconfirm, Button, message } from 'antd';
+import { invoke, path, shell, fs } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
 import useJson from '@/hooks/useJson';
+import useData from '@/hooks/useData';
 import useColumns from '@/hooks/useColumns';
-import useTable, { TABLE_PAGINATION } from '@/hooks/useTable';
+import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { chatRoot, CHAT_DOWNLOAD_JSON } from '@/utils';
-import { syncColumns } from './config';
-import './index.scss';
+import { downloadColumns } from './config';
 
 function renderFile(buff: Uint8Array, type: string) {
   const renderType = {
@@ -19,52 +19,124 @@ function renderFile(buff: Uint8Array, type: string) {
 }
 
 export default function SyncPrompts() {
-  const { rowSelection, selectedRowIDs } = useTable();
-  const { columns, ...opInfo } = useColumns(syncColumns());
   const [downloadPath, setDownloadPath] = useState('');
-  const { json } = useJson<any[]>(CHAT_DOWNLOAD_JSON);
   const [source, setSource] = useState('');
   const [isVisible, setVisible] = useState(false);
+  const { opData, opInit, opReplace, opSafeKey } = useData([]);
+  const { columns, ...opInfo } = useColumns(downloadColumns());
+  const { rowSelection, selectedRows, rowReset } = useTableRowSelection({ rowType: 'row' });
+  const { json, refreshJson, updateJson } = useJson<any[]>(CHAT_DOWNLOAD_JSON);
+  const selectedItems = rowSelection.selectedRowKeys || [];
 
   useInit(async () => {
-    const file = await path.join(await chatRoot(), 'chat.download.json');
+    const file = await path.join(await chatRoot(), CHAT_DOWNLOAD_JSON);
     setDownloadPath(file);
   });
 
+  useEffect(() => {
+    if (!json || json.length <= 0) return;
+    opInit(json);
+  }, [json?.length]);
+
   useEffect(() => {
     if (!opInfo.opType) return;
     (async () => {
       const record = opInfo?.opRecord;
       const isImg = ['png'].includes(record?.ext);
       const file = await path.join(await chatRoot(), 'download', isImg ? 'img' : record?.ext, `${record?.id}.${record?.ext}`);
-      if (opInfo.opType === 'view') {
+      if (opInfo.opType === 'preview') {
         const data = await fs.readBinaryFile(file);
         const sourceData = renderFile(data, record?.ext);
         setSource(sourceData);
         setVisible(true);
+        return;
+      }
+      if (opInfo.opType === 'file') {
+        await shell.open(file);
+      }
+      if (opInfo.opType === 'delete') {
+        await fs.removeFile(file);
+        await handleRefresh();
+      }
+      if (opInfo.opType === 'rowedit') {
+        const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
+        await updateJson(data);
+        message.success('Name has been changed!');
       }
       opInfo.resetRecord();
     })()
   }, [opInfo.opType])
 
+  const handleDelete = async () => {
+    if (opData?.length === selectedRows.length) {
+      const downloadDir = await path.join(await chatRoot(), 'download');
+      await fs.removeDir(downloadDir, { recursive: true });
+      await handleRefresh();
+      rowReset();
+      message.success('All files have been cleared!');
+      return;
+    }
+
+    const rows = selectedRows.map(async (i) => {
+      const isImg = ['png'].includes(i?.ext);
+      const file = await path.join(await chatRoot(), 'download', isImg ? 'img' : i?.ext, `${i?.id}.${i?.ext}`);
+      await fs.removeFile(file);
+      return file;
+    })
+    Promise.all(rows).then(async () => {
+      await handleRefresh();
+      message.success('All files selected are cleared!');
+    });
+  };
+
+  const handleRefresh = async () => {
+    await invoke('download_list', { pathname: CHAT_DOWNLOAD_JSON });
+    refreshJson();
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+    opInfo.resetRecord();
+  };
+
   return (
     <div>
+      <div className="chat-table-btns">
+        <div>
+          {selectedItems.length > 0 && (
+            <>
+              <Popconfirm
+                overlayStyle={{ width: 250 }}
+                title="Sync will overwrite the previous data, confirm to sync?"
+                placement="topLeft"
+                onConfirm={handleDelete}
+                okText="Yes"
+                cancelText="No"
+              >
+                <Button>Batch delete</Button>
+              </Popconfirm>
+              <span className="num">Selected {selectedItems.length} items</span>
+            </>
+          )}
+        </div>
+      </div>
       <div className="chat-table-tip">
         <div className="chat-file-path">
           <div>PATH: <a onClick={() => shell.open(downloadPath)} title={downloadPath}>{downloadPath}</a></div>
         </div>
       </div>
       <Table
-        rowKey="name"
+        rowKey="id"
         columns={columns}
-        scroll={{ x: 'auto' }}
-        dataSource={json}
+        scroll={{ x: 800 }}
+        dataSource={opData}
         rowSelection={rowSelection}
         pagination={TABLE_PAGINATION}
       />
       <Modal
         open={isVisible}
-        onCancel={() => setVisible(false)}
+        title={<div>{opInfo?.opRecord?.name || ''}</div>}
+        onCancel={handleCancel}
         footer={false}
         destroyOnClose
       >