Add save data viewing to hammer page

app/routes/hammer.tsx

@@ -3,6 +3,7 @@ import {
   Button,
   Card,
   CardBody,
+  CardFooter,
   CardHeader,
   Container,
   Flex,
@@ -61,6 +62,7 @@ export default function () {
   const [avatarUrl, setAvatarUrl] = useState("");
   const [ticketLink, setTicketLink] = useState("");
   const [history, setHistory] = useState([] as ReactElement[]);
+  const [saveData, setSaveData] = useState({} as { [k: string]: any });
   const [loading, setLoading] = useState(false);
   const { isOpen, onClose, onOpen } = useDisclosure();
   const toast = useToast();
@@ -166,6 +168,28 @@ export default function () {
     setVisible(true);
   }
 
+  async function getSaveData() {
+    const dataResp = await fetch(`/api/game-bans/${uid}/save-data`);
+
+    if (!dataResp.ok) {
+      let msg = "Unknown error";
+
+      try {
+        msg = ((await dataResp.json()) as { error: string }).error;
+      } catch {}
+
+      toast({
+        description: msg,
+        status: "error",
+        title: "Failed to get save data",
+      });
+
+      return;
+    }
+
+    setSaveData(await dataResp.json());
+  }
+
   const invalidIcon = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -289,7 +313,7 @@ export default function () {
           Search
         </Button>
       </HStack>
-      <Container mb={3} mt={3}>
+      <Container my={3}>
         <Card visibility={visible ? "visible" : "hidden"}>
           <CardBody>
             <Flex flexWrap="wrap" justifyContent="center">
@@ -326,9 +350,43 @@ export default function () {
               </Box>
             </Stack>
           </CardBody>
+          <CardFooter alignItems="center">
+            <Link onClick={async () => await getSaveData()}>
+              Click to Display Save Data
+            </Link>
+          </CardFooter>
         </Card>
       </Container>
       {history}
+      <Container
+        display={Object.values(saveData).length ? undefined : "none"}
+        my="16px"
+      >
+        <Card>
+          <CardBody>
+            <Stack divider={<StackDivider />} mt="8px" spacing="6">
+              <Box>
+                <Heading size="xs">Money</Heading>
+                <Text pt="2" fontSize="sm">
+                  {saveData.Money}
+                </Text>
+              </Box>
+              <Box>
+                <Heading size="xs">Parts</Heading>
+                <Text pt="2" fontSize="sm">
+                  {saveData.Parts}
+                </Text>
+              </Box>
+              <Box>
+                <Heading size="xs">Wins</Heading>
+                <Text pt="2" fontSize="sm">
+                  {saveData.Wins}
+                </Text>
+              </Box>
+            </Stack>
+          </CardBody>
+        </Card>
+      </Container>
     </Container>
   );
 }