1
0
Fork 0
Stonks_mau/spa/src/Player.js

89 lines
2.0 KiB
JavaScript
Raw Normal View History

2021-07-06 20:41:47 +00:00
import React, { useMemo, useState } from "react";
import { useQuery } from "react-query";
import axios from "axios";
import {
Button,
Center,
Flex,
Heading,
Icon,
Image,
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 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);
return data;
},
{
placeholderData: [],
}
);
const playerDict = useMemo(() => {
return Object.assign({}, ...players.data.map((x) => ({ [x.id]: x.name })));
}, players);
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"
/>
{playerDict[playerId]}
</Heading>
<Table variant="simple" size="sm" variant="striped">
<Thead>
<Tr>
<Th>Statistic</Th>
<Th isNumeric>Rank</Th>
<Th isNumeric>Value</Th>
</Tr>
</Thead>
<Tbody>
{playerStats.data.map((x, i) => {
return (
<Tr key={i}>
<Td>
<Link to={`/statistic/${x.type}/${x.name}`}>
{x.type} {x.name}
</Link>
</Td>
<Td isNumeric>{x.rank}</Td>
<Td isNumeric>{x.value}</Td>
</Tr>
);
})}
</Tbody>
</Table>
</>
);
};
export default Player;