Prettify stat names

spa/src/Player.js

@@ -13,6 +13,7 @@ import {
   Td,
 } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
+import prettifyStatisticName from "./PrettifyStatisticName";
 
 const Player = ({ playerId, players }) => {
   const playerStats = useQuery(
@@ -27,7 +28,7 @@ const Player = ({ playerId, players }) => {
     }
   );
 
-  const playerName = players.data.find((x) => x.id === playerId).name;
+  const playerName = players.data.find((x) => x.id === playerId)?.name;
 
   return (
     <>
@@ -46,6 +47,7 @@ const Player = ({ playerId, players }) => {
           height="48px"
           src={`https://minotar.net/avatar/${playerId.replaceAll("-", "")}/48`}
           mr="4"
+          rounded="md"
         />
         {playerName}
       </Heading>
@@ -63,7 +65,7 @@ const Player = ({ playerId, players }) => {
               <Tr key={i}>
                 <Td>
                   <Link to={`/statistic/${x.type}/${x.name}`}>
-                    {x.type} {x.name}
+                    {prettifyStatisticName(x.type, x.name)}
                   </Link>
                 </Td>
                 <Td isNumeric>{x.rank}</Td>

spa/src/PrettifyStatisticName.js

@@ -0,0 +1,16 @@
+const prettifyStatisticName = (type, name) => {
+  return toTitleCase(
+    `${type.replace("custom", "")} ${name}`
+      .replaceAll("minecraft:", "")
+      .replaceAll("_", " ")
+      .trim()
+  );
+};
+
+function toTitleCase(str) {
+  return str.replace(/\w\S*/g, function (txt) {
+    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+  });
+}
+
+export default prettifyStatisticName;

spa/src/Search.js

@@ -5,6 +5,7 @@ import { Button, Center, Heading, Icon, Input } 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 prettifyStatisticName from "./PrettifyStatisticName";
 
 const Search = ({ statistics, players }) => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -15,7 +16,7 @@ const Search = ({ statistics, players }) => {
         return {
           type: "statistic",
           value: s,
-          searchTerm: `${s.type} ${s.name}`,
+          searchTerm: prettifyStatisticName(s.type, s.name),
         };
       })
       .concat(

spa/src/Statistic.js

@@ -12,6 +12,7 @@ import {
   Td,
 } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
+import prettifyStatisticName from "./PrettifyStatisticName";
 
 const Statistic = ({ type, name, players }) => {
   const ranking = useQuery(
@@ -40,7 +41,7 @@ const Statistic = ({ type, name, players }) => {
         Stonks for
       </Heading>
       <Heading as="h1" size="xl" mb="8">
-        {type} {name}
+        {prettifyStatisticName(type, name)}
       </Heading>
       <Table size="sm" variant="striped">
         <Thead>