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

import './list-proj.css'
import CardProj from "../card/CardProj.tsx";
import {useRef, MutableRefObject, useState, useEffect, useContext} from "react";
import {Input, Pagination, message, Spin} from 'antd';
import {get} from "../../util/AjaxUtils.ts";
import {IndexListContext} from "../../context/IndexListContext.ts";
import {IListPage} from "../../interfaces/listpage/IListPage.ts";
import {IProj} from "../../interfaces/proj/IProj.ts";

const {Search} = Input;

export default function ListProj() {
    const indexListContext = useContext(IndexListContext);
    const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
    const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);

    const [messageApi, contextHolder] = message.useMessage();
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [projs, setProjs] = useState<IProj[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    const [keywords, setKeywords] = useState('');

    const domHeight = window.innerHeight - 280;

    const reqData = (currentPage: number) => {
        get<IListPage<IProj>>({
            messageApi: messageApi,
            url: '/api/proj/listpage/self',
            config: {
                params: {
                    page: currentPage,
                    rows: 20,
                    keywords: keywords,
                    status: indexListContext.status ? indexListContext.status : ''
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess({data}) {
                setPage(data.page);
                setTotal(data.total);
                setProjs(data.rows);
            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }

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

    useEffect(() => {
        reqData(page);
    }, [indexListContext.status, keywords, page])

    return (
        <>
            {contextHolder}
            <div className="list-proj" ref={listProjRef}>
                <div className="top">
                    <Search placeholder="按项目名搜索" onSearch={(value) => {
                        setKeywords(value)
                    }} style={{width: 200}}/>
                </div>
                <div className="body">
                    <Spin tip="加载中..." spinning={isLoading}>
                        <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
                            {renderList()}
                        </div>
                        <div className="page">
                            <Pagination defaultCurrent={page} total={total} onChange={(page) => {
                                setPage(page);
                            }}/>
                        </div>
                    </Spin>
                </div>
            </div>
        </>
    )
}