From 4c9e819ef9883d0ac26bfb609f27f88d8d269005 Mon Sep 17 00:00:00 2001
From: Kevin Belisle <kev.belisle@gmail.com>
Date: Fri, 9 Jul 2021 01:01:42 -0400
Subject: [PATCH] Prettify stat names

---
 spa/src/Player.js                |  6 ++++--
 spa/src/PrettifyStatisticName.js | 16 ++++++++++++++++
 spa/src/Search.js                |  3 ++-
 spa/src/Statistic.js             |  3 ++-
 4 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 spa/src/PrettifyStatisticName.js

diff --git a/spa/src/Player.js b/spa/src/Player.js
index c973f42..067eed3 100644
--- a/spa/src/Player.js
+++ b/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>
diff --git a/spa/src/PrettifyStatisticName.js b/spa/src/PrettifyStatisticName.js
new file mode 100644
index 0000000..a3fbc38
--- /dev/null
+++ b/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;
diff --git a/spa/src/Search.js b/spa/src/Search.js
index 984e162..d9aa71b 100644
--- a/spa/src/Search.js
+++ b/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(
diff --git a/spa/src/Statistic.js b/spa/src/Statistic.js
index df0cedb..b8a5071 100644
--- a/spa/src/Statistic.js
+++ b/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>