forked from Minecraft/Stonks
81 lines
1.8 KiB
JavaScript
81 lines
1.8 KiB
JavaScript
|
import React, { useMemo, useState } from "react";
|
||
|
|
import { useQuery } from "react-query";
|
||
|
|
import axios from "axios";
|
||
|
|
import {
|
||
|
|
Button,
|
||
|
|
Center,
|
||
|
|
Flex,
|
||
|
|
Heading,
|
||
|
|
Icon,
|
||
|
|
Input,
|
||
|
|
Table,
|
||
|
|
Thead,
|
||
|
|
Tbody,
|
||
|
|
Tfoot,
|
||
|
|
Tr,
|
||
|
|
Th,
|
||
|
|
Td,
|
||
|
|
TableCaption,
|
||
|
|
} from "@chakra-ui/react";
|
||
|
|
import { FaUserCircle, FaArrowAltCircleRight } from "react-icons/fa";
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
|
||
|
|
const Statistic = ({ type, name, players }) => {
|
||
|
|
const ranking = useQuery(
|
||
|
|
`statistic ${type} ${name}`,
|
||
|
|
async () => {
|
||
|
|
const { data } = await axios.get(`/api/statistics/${type}/${name}`);
|
||
|
|
return data;
|
||
|
|
},
|
||
|
|
{
|
||
|
|
placeholderData: [],
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
const playerDict = useMemo(() => {
|
||
|
|
return Object.assign({}, ...players.data.map((x) => ({ [x.id]: x.name })));
|
||
|
|
}, players);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Heading as="h1" size="4xl" my="8">
|
||
|
|
<Link to="/">
|
||
|
|
<Center>📈</Center>
|
||
|
|
</Link>
|
||
|
|
</Heading>
|
||
|
|
<Heading as="h3" size="sm" mt="8" fontWeight="normal">
|
||
|
|
Stonks for
|
||
|
|
</Heading>
|
||
|
|
<Heading as="h1" size="xl" mb="8">
|
||
|
|
{type} {name}
|
||
|
|
</Heading>
|
||
|
|
<Table variant="simple" size="sm" variant="striped">
|
||
|
|
<Thead>
|
||
|
|
<Tr>
|
||
|
|
<Th>Player</Th>
|
||
|
|
<Th isNumeric>Rank</Th>
|
||
|
|
<Th isNumeric>Value</Th>
|
||
|
|
</Tr>
|
||
|
|
</Thead>
|
||
|
|
<Tbody>
|
||
|
|
{ranking.data.map((x, i) => {
|
||
|
|
return (
|
||
|
|
<Tr key={i}>
|
||
|
|
<Td>
|
||
|
|
<Link to={`/player/${x.playerId}`}>
|
||
|
|
{playerDict[x.playerId]}
|
||
|
|
</Link>
|
||
|
|
</Td>
|
||
|
|
<Td isNumeric>{x.rank}</Td>
|
||
|
|
<Td isNumeric>{x.value}</Td>
|
||
|
|
</Tr>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</Tbody>
|
||
|
|
</Table>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Statistic;
|