Hammer work now?

app/routes/hammer.tsx

@@ -4,6 +4,7 @@ import {
   Card,
   CardBody,
   CardHeader,
+  Center,
   Container,
   Heading,
   HStack,
@@ -13,8 +14,9 @@ import {
   Stack,
   StackDivider,
   Text,
+  useToast,
 } from "@chakra-ui/react";
-import { type FormEvent, useState } from "react";
+import { type FormEvent, type ReactElement, useState } from "react";
 
 export async function loader({ context }: { context: RequestContext }) {
   const { current_user: currentUser } = context.data;
@@ -42,27 +44,56 @@ export default function () {
   const [status, setStatus] = useState("");
   const [visible, setVisible] = useState(false);
   const [avatarUrl, setAvatarUrl] = useState("");
-  const [history, setHistory] = useState([]);
+  const [history, setHistory] = useState([] as ReactElement[]);
+  const [hasResults, setHasResults] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
 
   async function getHistory() {
-    const username = (document.getElementById("username") as HTMLInputElement)
-      .value;
-
-    if (username.length < 4) return alert("Username is too short!");
+    setVisible(false);
+    setLoading(true);
+    setHistory([]);
+
+    if (username.length < 4) {
+      setLoading(false);
+      return toast({
+        title: "Validation Error",
+        description: `Username is too short`,
+        status: "error",
+      });
+    }
 
     const historyResp = await fetch(`/api/game-bans/${username}/history`);
 
-    if (!historyResp.ok)
-      return alert(
-        `ERROR: ${((await historyResp.json()) as { error: string }).error}`,
-      );
+    if (!historyResp.ok) {
+      setLoading(false);
+      return toast({
+        title: "Failed To Fetch User",
+        description: `${
+          ((await historyResp.json()) as { error: string }).error
+        }`,
+        status: "error",
+      });
+    }
 
     const history: { [k: string]: any }[] = await historyResp.json();
 
-    if (!history.length) return alert("No history for this user.");
+    if (!history.length) {
+      setLoading(false);
+      setHasResults(false);
+      return toast({
+        title: "Nothing Found",
+        description: "This user doesn't have any moderation history.",
+        status: "info",
+      });
+    }
 
+    setHasResults(true);
     const cardList = [];
 
+    setUid(history[history.length - 1].entity.properties.target.integerValue);
+    setStatus(history[history.length - 1].entity.properties.action.stringValue);
+
     for (const entry of history) {
       const url = entry.entity.properties.evidence.stringValue;
       const isUrl = () => {
@@ -75,51 +106,70 @@ export default function () {
       };
 
       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>,
+        <Container mb={3}>
+          <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>
+        </Container>,
       );
     }
+
+    setHistory(cardList);
+    setLoading(false);
+    setVisible(true);
   }
 
   return (
     <Container maxW="container.md">
       <Heading>User Lookup</Heading>
-      <HStack>
+      <Text>Look up a user's punishment history here.</Text>
+      {!hasResults ? (
+        <Alert status="warning" mt={2}>
+          <AlertIcon />
+          No information was found for this user. Perhaps you misspelt their
+          name?
+        </Alert>
+      ) : null}
+      <HStack mt={5}>
         <Input
           id="username"
           onBeforeInput={(e) => {
             const { data }: { data?: string } & FormEvent<HTMLInputElement> = e;
 
             if (data?.match(/\W/)) e.preventDefault();
           }}
+          onChange={(e) => setUsername(e.target.value)}
           placeholder="Roblox username"
         />
-        <Button ml="8px" onClick={async () => await getHistory()}>
+        <Button
+          ml="8px"
+          onClick={async () => await getHistory()}
+          isLoading={loading}
+        >
           Search
         </Button>
       </HStack>