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 <Statistic
type={routeProps.match.params.type} type={routeProps.match.params.type}
name={routeProps.match.params.name} name={routeProps.match.params.name}
players={players} players={players.data}
/> />
)} )}
/> />
<Route <Route
path="/player/:id" path="/player/:id"
render={(routeProps) => ( render={(routeProps) => (
<Player playerId={routeProps.match.params.id} players={players} /> <Player
playerId={routeProps.match.params.id}
players={players.data}
/>
)} )}
/> />
<Route> <Route>

View File

@ -16,19 +16,13 @@ import { Link } from "react-router-dom";
import prettifyStatisticName from "./PrettifyStatisticName"; import prettifyStatisticName from "./PrettifyStatisticName";
const Player = ({ playerId, players }) => { const Player = ({ playerId, players }) => {
const playerStats = useQuery( const playerStats = useQuery(`player ${playerId}`, async () => {
`player ${playerId}`, const { data } = await axios.get(`/api/players/${playerId}`);
async () => { data.sort((a, b) => a.rank - b.rank || b.value - a.value);
const { data } = await axios.get(`/api/players/${playerId}`); return data.filter((x) => x.value > 0);
data.sort((a, b) => a.rank - b.rank || b.value - a.value); });
return data.filter((x) => x.value > 0);
},
{
placeholderData: [],
}
);
const playerName = players.data.find((x) => x.id === playerId)?.name; const playerName = players?.find((x) => x.id === playerId)?.name;
return ( return (
<> <>
@ -60,19 +54,23 @@ const Player = ({ playerId, players }) => {
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{playerStats.data.map((x, i) => { {playerStats.isSuccess ? (
return ( playerStats.data.map((x, i) => {
<Tr key={i}> return (
<Td> <Tr key={i}>
<Link to={`/statistic/${x.type}/${x.name}`}> <Td>
{prettifyStatisticName(x.type, x.name)} <Link to={`/statistic/${x.type}/${x.name}`}>
</Link> {prettifyStatisticName(x.type, x.name)}
</Td> </Link>
<Td isNumeric>{x.rank}</Td> </Td>
<Td isNumeric>{x.value}</Td> <Td isNumeric>{x.rank}</Td>
</Tr> <Td isNumeric>{x.value}</Td>
); </Tr>
})} );
})
) : (
<></>
)}
</Tbody> </Tbody>
</Table> </Table>
</> </>

View File

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