Improve error handling - just display nothing

spa/src/AggregatesShowcase.js

@@ -2,59 +2,43 @@ import React from "react";
 import { useQuery } from "react-query";
 import axios from "axios";
 
-import {
-  AspectRatio,
-  Box,
-  Flex,
-  Heading,
-  HStack,
-  Icon,
-  SimpleGrid,
-  Stat,
-  StatLabel,
-  StatNumber,
-  StatHelpText,
-  StatArrow,
-  StatGroup,
-  Tooltip,
-} from "@chakra-ui/react";
-import { FaUserCircle, FaArrowAltCircleRight } from "react-icons/fa";
-import { Link } from "react-router-dom";
-import { AutoSizer, WindowScroller, List } from "react-virtualized";
+import { SimpleGrid, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
 import prettifyStatisticName from "./PrettifyStatisticName";
 import StackedBar from "./StackedBar";
 
 const AggregatesShowcase = () => {
-  const aggregates = useQuery(
-    `aggregates`,
-    async () => {
-      const { data } = await axios.get(`/api/aggregates`);
-      return data;
-    },
-    {
-      placeholderData: [],
-    }
-  );
+  const aggregates = useQuery(`aggregates`, async () => {
+    const { data } = await axios.get(`/api/aggregates`);
+    return data;
+  });
 
-  const killedAggregates = aggregates.data
-    .filter((x) => x.type === "minecraft:killed")
-    .sort((a, b) => b.value - a.value);
-  const killedTotal = killedAggregates.reduce((acc, val) => acc + val.value, 0);
+  const killedAggregates = aggregates.isSuccess
+    ? aggregates.data
+        .filter((x) => x.type === "minecraft:killed")
+        .sort((a, b) => b.value - a.value)
+    : [];
+  // const killedTotal = killedAggregates.reduce((acc, val) => acc + val.value, 0);
 
-  const killedByAggregates = aggregates.data
-    .filter((x) => x.type === "minecraft:killed_by")
-    .sort((a, b) => b.value - a.value);
-  const killedByTotal = killedByAggregates.reduce(
-    (acc, val) => acc + val.value,
-    0
-  );
+  const killedByAggregates = aggregates.isSuccess
+    ? aggregates.data
+        .filter((x) => x.type === "minecraft:killed_by")
+        .sort((a, b) => b.value - a.value)
+    : [];
+  // const killedByTotal = killedByAggregates.reduce(
+  //   (acc, val) => acc + val.value,
+  //   0
+  // );
 
-  const travelAggregates = aggregates.data
-    .filter((x) => x.type === "minecraft:custom" && x.name.endsWith("one_cm"))
-    .sort((a, b) => b.value - a.value);
-  const travelTotal = travelAggregates.reduce((acc, val) => acc + val.value, 0);
+  const travelAggregates = aggregates.isSuccess
+    ? aggregates.data
+        .filter(
+          (x) => x.type === "minecraft:custom" && x.name.endsWith("one_cm")
+        )
+        .sort((a, b) => b.value - a.value)
+    : [];
+  // const travelTotal = travelAggregates.reduce((acc, val) => acc + val.value, 0);
 
-  return aggregates.isFetched ? (
+  return aggregates.isSuccess ? (
     <>
       <StackedBar heading="Mobs Killed" aggregates={killedAggregates} />
 
@@ -73,13 +57,13 @@ const AggregatesShowcase = () => {
           .map((x, i) => {
             var value = x.value;
             if (x.name === "minecraft:play_one_minute") {
-              value = x.value / 20 / 60;
+              value = Math.floor(x.value / 20 / 60);
             }
 
             return (
               <Stat key={i}>
                 <StatLabel>{prettifyStatisticName(x.type, x.name)}</StatLabel>
-                <StatNumber>{`${x.value
+                <StatNumber>{`${value
                   .toString()
                   .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</StatNumber>
               </Stat>

spa/src/App.js

@@ -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>

spa/src/Player.js

@@ -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);
-      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>
     </>

spa/src/StackedBar.js

@@ -1,21 +1,6 @@
 import React, { useMemo } from "react";
 import useHover from "./useHover";
-import {
-  AspectRatio,
-  Box,
-  Button,
-  Heading,
-  HStack,
-  Icon,
-  Input,
-  Stat,
-  StatLabel,
-  StatNumber,
-  StatHelpText,
-  StatArrow,
-  StatGroup,
-  Tooltip,
-} from "@chakra-ui/react";
+import { Box, Heading, HStack, Tooltip } from "@chakra-ui/react";
 import prettifyStatisticName from "./PrettifyStatisticName";
 
 const randomColor = () =>
@@ -41,7 +26,7 @@ const StackedBarSegment = ({ aggregate, total }) => {
       <Box
         width={aggregate.value / total}
         height="100%"
-        filter={isHovered ? "clear" : "saturate(0.15)"}
+        filter={isHovered ? "clear" : "saturate(0.5)"}
         backgroundColor={color}
         ref={hoverRef}
       ></Box>

spa/src/Statistic.js

@@ -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>
     </>

spa/src/useHover.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 function useHover() {
   const [value, setValue] = useState(false);
@@ -16,8 +16,8 @@ function useHover() {
           node.removeEventListener("mouseout", handleMouseOut);
         };
       }
-    },
-    [ref.current] // Recall only if ref changes
+    } //,
+    //[ref.current] // Recall only if ref changes
   );
   return [ref, value];
 }