Finish search method for hammer page

app/routes/hammer.tsx

@@ -3,11 +3,13 @@ import {
   Button,
   Card,
   CardBody,
+  CardHeader,
   Container,
   Heading,
   HStack,
   Image,
   Input,
+  Link,
   Stack,
   StackDivider,
   Text,
@@ -40,9 +42,72 @@ export default function () {
   const [status, setStatus] = useState("");
   const [visible, setVisible] = useState(false);
   const [avatarUrl, setAvatarUrl] = useState("");
+  const [history, setHistory] = useState([]);
+
+  async function getHistory() {
+    const username = (document.getElementById("username") as HTMLInputElement)
+      .value;
+
+    if (username.length < 4) return alert("Username is too short!");
+
+    const historyResp = await fetch(`/api/game-bans/${username}/history`);
+
+    if (!historyResp.ok)
+      return alert(
+        `ERROR: ${((await historyResp.json()) as { error: string }).error}`,
+      );
+
+    const history: { [k: string]: any }[] = await historyResp.json();
+
+    if (!history.length) return alert("No history for this user.");
+
+    const cardList = [];
+
+    for (const entry of history) {
+      const url = entry.entity.properties.evidence.stringValue;
+      const isUrl = () => {
+        try {
+          new URL(url).href;
+          return true;
+        } catch {
+          return false;
+        }
+      };
+
+      cardList.push(
+        <Card>
+          <CardHeader>
+            <Heading size="md">{new Date().toLocaleString()}</Heading>
+          </CardHeader>
+          <CardBody>
+            <Stack divider={<StackDivider />} spacing="4">
+              <Box>
+                <Heading size="xs">ACTION</Heading>
+                <Text pt="2" size="sm">
+                  {entry.entity.properties.action.stringValue}
+                </Text>
+              </Box>
+              <Box>
+                <Heading size="xs">EVIDENCE</Heading>
+                <Text pt="2" size="sm">
+                  {isUrl() ? (
+                    <Link color="#646cff" href={url}>
+                      {url}
+                    </Link>
+                  ) : (
+                    url
+                  )}
+                </Text>
+              </Box>
+            </Stack>
+          </CardBody>
+        </Card>,
+      );
+    }
+  }
 
   return (
-    <Container maxW="container.lg">
+    <Container maxW="container.md">
       <Heading>User Lookup</Heading>
       <HStack>
         <Input
@@ -54,7 +119,9 @@ export default function () {
           }}
           placeholder="Roblox username"
         />
-        <Button ml="8px">Search</Button>
+        <Button ml="8px" onClick={async () => await getHistory()}>
+          Search
+        </Button>
       </HStack>
       <Card maxW="sm" visibility={visible ? "visible" : "hidden"}>
         <CardBody>
@@ -81,6 +148,7 @@ export default function () {
           </Stack>
         </CardBody>
       </Card>
+      {history}
     </Container>
   );
 }