81 lines
2.0 KiB
JavaScript
81 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import { useQuery } from "react-query";
|
|
import axios from "axios";
|
|
import {
|
|
Center,
|
|
Heading,
|
|
Image,
|
|
Table,
|
|
Thead,
|
|
Tbody,
|
|
Tr,
|
|
Th,
|
|
Td,
|
|
} from "@chakra-ui/react";
|
|
import { Link } from "react-router-dom";
|
|
import prettifyStatisticName from "./PrettifyStatisticName";
|
|
|
|
const Player = ({ playerId, players }) => {
|
|
const playerStats = useQuery(`player ${playerId}`, async () => {
|
|
const { data } = await axios.get(`/api/players/${playerId}`);
|
|
data.sort((a, b) => a.rank - b.rank || b.value - a.value);
|
|
return data.filter((x) => x.value > 0);
|
|
});
|
|
|
|
const playerName = players?.find((x) => x.id === playerId)?.name;
|
|
|
|
return (
|
|
<>
|
|
<Heading as="h2" 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">
|
|
<Image
|
|
display="inline"
|
|
width="48px"
|
|
height="48px"
|
|
src={`https://minotar.net/avatar/${playerId.replaceAll("-", "")}/48`}
|
|
mr="4"
|
|
rounded="md"
|
|
/>
|
|
{playerName}
|
|
</Heading>
|
|
<Table size="sm" variant="striped">
|
|
<Thead>
|
|
<Tr>
|
|
<Th>Statistic</Th>
|
|
<Th isNumeric>Rank</Th>
|
|
<Th isNumeric>Value</Th>
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{playerStats.isSuccess ? (
|
|
playerStats.data.map((x, i) => {
|
|
return (
|
|
<Tr key={i}>
|
|
<Td>
|
|
<Link to={`/statistic/${x.type}/${x.name}`}>
|
|
{prettifyStatisticName(x.type, x.name)}
|
|
</Link>
|
|
</Td>
|
|
<Td isNumeric>{x.rank}</Td>
|
|
<Td isNumeric>{x.value}</Td>
|
|
</Tr>
|
|
);
|
|
})
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Tbody>
|
|
</Table>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Player;
|