Improve error handling - just display nothing

main
Kevin Belisle 2021-09-03 11:56:02 -04:00
parent d224ac81d8
commit 5b7885368f
3 changed files with 50 additions and 51 deletions

View File

@ -41,14 +41,17 @@ const App = () => {
<Statistic
type={routeProps.match.params.type}
name={routeProps.match.params.name}
players={players}
players={players.data}
/>
)}
/>
<Route
path="/player/:id"
render={(routeProps) => (
<Player playerId={routeProps.match.params.id} players={players} />
<Player
playerId={routeProps.match.params.id}
players={players.data}
/>
)}
/>
<Route>

View File

@ -16,19 +16,13 @@ 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);
},
{
placeholderData: [],
}
);
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.data.find((x) => x.id === playerId)?.name;
const playerName = players?.find((x) => x.id === playerId)?.name;
return (
<>
@ -60,19 +54,23 @@ const Player = ({ playerId, players }) => {
</Tr>
</Thead>
<Tbody>
{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>
);
})}
{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>
</>

View File

@ -15,19 +15,13 @@ import { Link } from "react-router-dom";
import prettifyStatisticName from "./PrettifyStatisticName";
const Statistic = ({ type, name, players }) => {
const ranking = useQuery(
`statistic ${type} ${name}`,
async () => {
const { data } = await axios.get(`/api/statistics/${type}/${name}`);
return data.filter((x) => x.value > 0);
},
{
placeholderData: [],
}
);
const ranking = useQuery(`statistic ${type} ${name}`, async () => {
const { data } = await axios.get(`/api/statistics/${type}/${name}`);
return data.filter((x) => x.value > 0);
});
const playerDict = useMemo(() => {
return Object.assign({}, ...players.data.map((x) => ({ [x.id]: x.name })));
return Object.assign({}, ...players.map((x) => ({ [x.id]: x.name })));
}, [players]);
return (
@ -52,19 +46,23 @@ const Statistic = ({ type, name, players }) => {
</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>
);
})}
{ranking.isSuccess ? (
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>
</>