105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import { Button, Divider, Flex, Table } from "antd";
|
|
import type { GamesData } from "../types";
|
|
import User from "./User";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useRequest } from "ahooks";
|
|
|
|
interface Props {
|
|
uid?: string;
|
|
data?: GamesData[];
|
|
}
|
|
|
|
function toTeams(data: GamesData) {
|
|
const {
|
|
uid1, uid11, username1, username11,
|
|
uid2, uid22, username2, username22,
|
|
result1, result2, ascore1, score1, score2,
|
|
} = data;
|
|
const isDoubles = Boolean(username11);
|
|
const team1 = [{ uid: uid1, name: username1 }];
|
|
const team2 = [{ uid: uid2, name: username2 }];
|
|
if (isDoubles) {
|
|
team1.push({ uid: uid11, name: username11 });
|
|
team2.push({ uid: uid22, name: username22 });
|
|
}
|
|
return { team1, team2 };
|
|
}
|
|
|
|
export function GameTable(props: Props) {
|
|
const [displayData, setDisplayData] = useState(props.data ?? []);
|
|
const [page, setPage] = useState(props.data?.length ? 1 :0);
|
|
const fetchNextPage = useRequest<GamesData[], []>(async () => {
|
|
const newPage = page + 1;
|
|
if (page === 0) return [];
|
|
const resp = await fetch(`/api/user/${props.uid}/games?page=${newPage}`);
|
|
const nextPageData: GamesData[] = await resp.json();
|
|
setDisplayData(data => [...data, ...nextPageData])
|
|
setPage(newPage);
|
|
return nextPageData;
|
|
}, { manual: true, refreshDeps: [page] });
|
|
const hasMore = useMemo(() => (props.data?.length === 10 && page < 2) || (fetchNextPage.data?.length || 0) === 10, [page, fetchNextPage]);
|
|
|
|
return (
|
|
<>
|
|
<Divider>最近战绩</Divider>
|
|
<Table
|
|
loading={fetchNextPage.loading}
|
|
rowKey={e => e.gameid}
|
|
showHeader={false}
|
|
pagination={false}
|
|
dataSource={displayData}
|
|
size="small"
|
|
style={{ width: '100%', maxWidth: 400 }}
|
|
footer={() => (
|
|
<Flex justify="center">
|
|
<Button
|
|
disabled={!hasMore}
|
|
loading={fetchNextPage.loading}
|
|
onClick={fetchNextPage.runAsync}
|
|
>加载更多</Button>
|
|
</Flex>
|
|
)}
|
|
>
|
|
<Table.Column align="center" dataIndex={''} render={(_, __, i) => i + 1} />
|
|
<Table.Column
|
|
dataIndex='gameid'
|
|
align="center"
|
|
render={((_, record: GamesData) => {
|
|
const { uid1 } = record;
|
|
const { team1, team2 } = toTeams(record);
|
|
return (
|
|
<Flex gap={48} justify="center">
|
|
<PlayerTeam idNames={props.uid !== uid1 ? team1 : team2} />
|
|
</Flex>
|
|
);
|
|
})}
|
|
/>
|
|
<Table.Column
|
|
align="center"
|
|
dataIndex={'result1'}
|
|
render={(result1, { result2, uid1 }: GamesData) => {
|
|
const list = props.uid === uid1 ? [result1, result2] : [result2, result1];
|
|
return list.join(':');
|
|
}}
|
|
/>
|
|
<Table.Column
|
|
dataIndex={'score1'}
|
|
render={(score1, { uid1, score2 }: GamesData) => {
|
|
return props.uid === uid1 ? score1 : score2;
|
|
}}
|
|
/>
|
|
<Table.Column dataIndex={'dateline'} />
|
|
</Table>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function PlayerTeam(props: {
|
|
idNames: { uid: string; name: string; }[]
|
|
}) {
|
|
return (
|
|
<Flex vertical align="center" justify="center">
|
|
{props.idNames.map(e => (<div key={e.uid}><User {...e} /></div>))}
|
|
</Flex>
|
|
);
|
|
} |