system-copyright-react/src/components/list/ListProj.tsx

import './list-proj.css'
import CardProj from "../card/CardProj.tsx";
import {useRef, MutableRefObject, useState, useEffect} from "react";
import {Input, Pagination} from 'antd';
import type {SearchProps} from 'antd/es/input/Search';
import {Axios} from "../../util/AjaxUtils.ts";


const {Search} = Input;

const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
    console.log(info?.source, value)
};

export default function ListProj() {

    const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
    const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);

    const [page, _setPage] = useState(1);
    const [total, _setTotal] = useState(0);
    const [projs, _setProjs] = useState([]);

    const domHeight = window.innerHeight - 280;

    const renderData = () => {
        Axios.get('/api/proj/listpage/self', {
            params: {
                page: page,
                rows: 20
            }
        }).then(res => {
            const data = res.data;
            _setProjs(data.page);
            _setTotal(data.total);
            _setProjs(data.rows);
        }).catch(res => {
            console.log(res);
        })
    }

    const renderList = () => {
        return projs.map((item, index) => <CardProj item={item} key={`proj${index}`}/>);
    }

    useEffect(() => {
        renderData();
    }, [])

    return (
        <div className="list-proj" ref={listProjRef}>
            <div className="top">
                <Search placeholder="按项目名搜索" onSearch={onSearch} style={{width: 200}}/>
            </div>
            <div className="body">
                <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
                    {renderList()}
                </div>
                <div className="page">
                    <Pagination defaultCurrent={page} total={total}/>
                </div>
            </div>
        </div>
    )
}