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;
+    setVisible(false);
+    setLoading(true);
+    setHistory([]);
 
-    if (username.length < 4) return alert("Username is too short!");
+    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,6 +106,7 @@ export default function () {
       };
 
       cardList.push(
+        <Container mb={3}>
           <Card>
             <CardHeader>
               <Heading size="md">{new Date().toLocaleString()}</Heading>
@@ -101,15 +133,28 @@ export default function () {
                 </Box>
               </Stack>
             </CardBody>
-        </Card>,
+          </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) => {
@@ -117,9 +162,14 @@ export default function () {
 
             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>