Untitled

"use client";
import react, {useState, useEffect} from "react";
import {Col, FormProps, Modal, Row} from 'antd';
import {Button, Checkbox, Form, Input, Table, Flex} from 'antd';
import type {TableColumnsType, TableProps} from 'antd';
import {
    ArrowUpOutlined,
    ReloadOutlined,
    FilterOutlined,
    PlayCircleOutlined,
    UploadOutlined,
    DownloadOutlined
} from '@ant-design/icons';
import {useSelector, useDispatch} from 'react-redux';
import {increment, decrement} from '@/store/counterSlice';
import { RootState } from "@/store/store";
import {Address4} from 'ip-address'
import { Client, Address } from "ysftp-web-sdk";

type FieldType = {
    username?: string;
    password?: string;
};
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];

interface DataType {
    isDirectory: Boolean;
    key: number;
    name: string;
    size: number;
}

interface FormValues {
    ip: string;
    port: number;
    username: string;
    password: string;
}

interface paginationType {
    current: number;
    pageSize: number;
    total: number;
}


const FormItem = Form.Item;

interface LeftPageContentProps {
  client : Client;
}


function LeftPageContent(props : LeftPageContentProps) {
    const [client, setclient] = useState<Client>(props.client)
    const [filePath, setfilePath] = useState<string>("/")
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [dataSource, setDataSource] = useState<DataType[]>([]);
    const [pagination, setPagination] = useState<paginationType>({current: 1, pageSize: 10, total: 0});
    const columns: TableColumnsType<DataType> = [
        {
            title: 'Name', dataIndex: 'name',
            render: (text, record) => {
                return record.isDirectory ?
                    <span style={{cursor: "pointer"}}
                          onClick={() => directoryClick(text, record)}>{text}</span> :
                    <span>{text}</span>;
            }
        },
        {title: 'size', dataIndex: 'size'},
        {
            title: '操作',
            dataIndex: '',
            key: 'key',
            render: () => <span onClick={fileDownload}><DownloadOutlined/></span>,
        },
        // { title: 'time', dataIndex: 'time' },
    ];
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const onSelectAll = (selected: boolean, selectedRows: DataType[], changeRows: DataType[]) => {
        console.log('selectedAllRowKeys changed: ', selected, selectedRows, changeRows);
        let selectRowKeys: number[];
        selectRowKeys = []
        if (selected) {
            dataSource.forEach((row) => {
                selectRowKeys.push(row.key)
            })
        }
        setSelectedRowKeys(selectRowKeys);
    }
    const rowSelection: TableRowSelection<DataType> = {
        selectedRowKeys,
        // onChange: onSelectChange,
        onSelectAll: onSelectAll,
    };

    const hasSelected = selectedRowKeys.length > 0;

    const fileDownload = () => {

    }
    const handleChange = (pagination: any) => {
        setPagination(pagination)
    }
    const directoryClick = (text: string, record: DataType) => {
        console.log(text, record);
        let currentfilePath = filePath;
        if (currentfilePath != "/") {
            currentfilePath = currentfilePath + "/" + record.name;
        } else {
            currentfilePath = currentfilePath + record.name;
        }
        setfilePath(currentfilePath);
        return text
    }

    useEffect(() => {
        if (client && client.gettoken() !== "") {
            client.list(filePath)
                .then((fileinfos) => {
                    const formattedFiles = fileinfos.map((fileinfo, index) => ({
                        key: index,
                        name: fileinfo.name,
                        size: fileinfo.size,
                        isDirectory: fileinfo.isDirectory,
                    }));
                    console.log("formattedFiles:")
                    console.log(formattedFiles);
                    setDataSource(formattedFiles);
                    setPagination({current: 1, pageSize: 10, total: formattedFiles.length})
                    // leftForm.setFieldsValue({
                    //     path:filePath
                    // })
                })
                .catch((error: Error) => {
                    console.error("Error fetching file list : ", error);
                });
        }
    }, [props, filePath])

    return (
        <div style={{width: "100%", height: "100%",}}>

            {/*<div style={{width: '100%', height: "30px",}}>*/}

            {/*</div>*/}
            <Flex gap="middle" vertical>
                <Table
                    bordered
                    rowKey={record => record.key}
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={dataSource}
                    pagination={pagination}
                    onChange={handleChange}
                />
            </Flex>

        </div>
    )
}



export default function LeftPage() {
    const {username, password, ip, port}= useSelector((state: RootState) => state.fileManager.leftPageClientValue);
    const [client, setClient] = useState<Client | null>(null);
    useEffect(() => {
        if (username && password && ip && port) {
          const address = new Address4(ip)
          const newClient = new Client({address, port});
          console.log("new client")
          if (username != undefined && password != undefined) {
            newClient.login(username, password)
          }
          console.log("set newclient")
          setClient(newClient);
        }
      }, [username, password, ip, port]);

    return (
      <div>
        {client && <LeftPageContent client={client} />}
      </div>
    )
}