Actually add user on click

components/GameModManagementModal.tsx

@@ -22,6 +22,7 @@ import { useEffect, useState } from "react";
 
 export default function (props: { isOpen: boolean; onClose: () => void }) {
   const [mods, setMods] = useState([]);
+  const [userToAdd, setUserToAdd] = useState("");
   const toast = useToast();
 
   useEffect(() => {
@@ -45,6 +46,16 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
   }, [props.isOpen]);
 
   async function addUser(user: string) {
+    if (!user || !user.match(/^\d{17,19}$/)) {
+      toast({
+        description: "Please check your input and try again",
+        status: "error",
+        title: "Invalid user",
+      });
+
+      return;
+    }
+
     const addResp = await fetch("/api/gme/add", {
       body: JSON.stringify({ user }),
       headers: {
@@ -133,7 +144,9 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
           </TableContainer>
           <HStack mt="8px">
             <Input maxLength={19} placeholder="1234567890987654321" />
-            <Button ml="8px">Add</Button>
+            <Button ml="8px" onClick={async () => await addUser(userToAdd)}>
+              Add
+            </Button>
           </HStack>
         </ModalBody>
       </ModalContent>