Improve CreateTeamForm error handling

thunderstore-io · Nov 16, 2023 · a3c7a4f · a3c7a4f
1 parent d45762f
commit a3c7a4f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/packages/cyberstorm/src/components/Button/Button.tsx b/packages/cyberstorm/src/components/Button/Button.tsx
@@ -50,6 +50,7 @@ export interface ButtonProps {
   style?: { [key: string]: string };
   type?: "button" | "submit" | "reset";
   tooltipText?: string;
+  disabled?: boolean;
 }
 
 const TooltipWrapper = (props: TooltipWrapperProps) =>
@@ -82,6 +83,7 @@ const Button = React.forwardRef<
     paddingSize = "medium",
     iconAlignment = "default",
     tooltipText,
+    disabled = false,
     ...forwardedProps
   } = props;
 
@@ -90,6 +92,7 @@ const Button = React.forwardRef<
   if (plain) {
     const fRef = forwardedRef as React.ForwardedRef<HTMLDivElement>;
     const ref = fRef || fallbackRef;
+    // TODO: Add disabled mode
     return (
       <TooltipWrapper tooltipText={tooltipText}>
         <div
@@ -124,6 +127,7 @@ const Button = React.forwardRef<
             getPaddingSize(paddingSize)
           )}
           onClick={onClick}
+          disabled={disabled}
         >
           {children}
         </button>

diff --git a/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.tsx b/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.tsx
@@ -9,17 +9,22 @@ import styles from "./CreateTeamForm.module.css";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isErrorResponse } from "../../../utils/type_guards";
+import { useEffect } from "react";
 
 export function CreateTeamForm() {
   const toast = useToast();
 
+  // "Required field" error is different from value being too little
+  // Check that the value is "> 0"
   const schema = z.object({
-    teamName: z.string({ required_error: "Team name is required" }),
+    teamName: z
+      .string({ required_error: "Team name is required" })
+      .min(1, { message: "Team name is required" }),
   });
 
   const {
     control,
-    formState: { isSubmitting },
+    formState: { isSubmitting, errors },
   } = useForm<z.infer<typeof schema>>({
     mode: "onSubmit",
     resolver: zodResolver(schema),
@@ -30,6 +35,20 @@ export function CreateTeamForm() {
     name: "teamName",
   });
 
+  // We have to do this because the RHF Form component is in beta and it
+  // doesn't have a callback prop like "onValidation" that could take in
+  // the generalized addToast error informing block.
+  useEffect(() => {
+    if (errors.teamName) {
+      console.log(errors);
+      toast.addToast({
+        variant: "danger",
+        message: errors.teamName.message,
+        duration: 30000,
+      });
+    }
+  }, [errors]);
+
   return (
     <Form
       control={control}
@@ -78,10 +97,16 @@ export function CreateTeamForm() {
                 : "green"
               : undefined
           }
+          disabled={isSubmitting}
         />
       </div>
       <div className={styles.footer}>
-        <Button.Root type="submit" paddingSize="large" colorScheme="success">
+        <Button.Root
+          type="submit"
+          paddingSize="large"
+          colorScheme="success"
+          disabled={isSubmitting}
+        >
           {isSubmitting ? (
             <Button.ButtonIcon iconClasses={styles.spinningIcon}>
               <FontAwesomeIcon icon={faArrowsRotate} />