Merge pull request #1651 from thunderstore-io/12-03-add_validator_option_for_usestrongfrom_and_use_it_in_few_places

Add validator option for useStrongFrom and use it in few places

Author: Oksamies

apps/cyberstorm-remix/app/settings/teams/Teams.tsx

@@ -163,6 +163,7 @@ function CreateTeamForm(props: { config: () => RequestConfig }) {
     InputErrors
   >({
     inputs: formInputs,
+    validators: { name: { required: true } },
     submitor,
     onSubmitSuccess: (fi) => {
       createTeamRevalidate();
@@ -223,10 +224,11 @@ function CreateTeamForm(props: { config: () => RequestConfig }) {
       </Modal.Body>
       <Modal.Footer>
         <NewButton
+          disabled={!strongForm.isReady}
+          csVariant="accent"
           onClick={() => {
             strongForm.submit().then(() => setOpen(false));
           }}
-          csVariant="accent"
         >
           Create
         </NewButton>

apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/MemberAddForm.tsx

@@ -74,6 +74,7 @@ export function MemberAddForm(props: {
     InputErrors
   >({
     inputs: formInputs,
+    validators: { username: { required: true } },
     submitor,
     onSubmitSuccess: () => {
       props.updateTrigger();
@@ -151,7 +152,11 @@ export function MemberAddForm(props: {
         </div>
       </Modal.Body>
       <Modal.Footer>
-        <NewButton csVariant="accent" onClick={strongForm.submit}>
+        <NewButton
+          csVariant="accent"
+          disabled={!strongForm.isReady}
+          onClick={strongForm.submit}
+        >
           Add member
         </NewButton>
       </Modal.Footer>

apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.tsx

@@ -114,8 +114,6 @@ function AddServiceAccountForm(props: {
     nickname: "",
   });
 
-  const isValid = formInputs.nickname.trim().length > 0;
-
   type SubmitorOutput = Awaited<ReturnType<typeof teamAddServiceAccount>>;
 
   async function submitor(data: typeof formInputs): Promise<SubmitorOutput> {
@@ -140,6 +138,7 @@ function AddServiceAccountForm(props: {
     InputErrors
   >({
     inputs: formInputs,
+    validators: { nickname: { required: true } },
     submitor,
     onSubmitSuccess: (result) => {
       onSuccess(result);
@@ -203,7 +202,7 @@ function AddServiceAccountForm(props: {
             className="service-accounts__form"
             onSubmit={(e) => {
               e.preventDefault();
-              if (isValid) {
+              if (strongForm.isReady) {
                 strongForm.submit();
               }
             }}
@@ -234,7 +233,7 @@ function AddServiceAccountForm(props: {
       )}
       {serviceAccountAdded ? null : (
         <Modal.Footer>
-          <NewButton onClick={strongForm.submit} disabled={!isValid}>
+          <NewButton onClick={strongForm.submit} disabled={!strongForm.isReady}>
             Add Service Account
           </NewButton>
         </Modal.Footer>

apps/cyberstorm-remix/cyberstorm/utils/StrongForm/useStrongForm.ts

@@ -1,10 +1,14 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   ParseError,
   RequestBodyParseError,
   RequestQueryParamsParseError,
 } from "../../../../../packages/thunderstore-api/src";
 
+type Validator = {
+  required?: boolean;
+};
+
 interface UseStrongFormProps<
   Inputs,
   SubmissionDataShape,
@@ -13,6 +17,15 @@ interface UseStrongFormProps<
   SubmissionError,
 > {
   inputs: Inputs;
+  /**
+   * Validators for the form inputs.
+   *
+   * NOTE: If you add new validator types here, make sure to implement the
+   * validation logic in the `isReady` memo inside `useStrongForm`.
+   */
+  validators?: {
+    [K in keyof Inputs]?: Validator;
+  };
   refiner?: (inputs: Inputs) => Promise<SubmissionDataShape>;
   onRefineSuccess?: (output: SubmissionDataShape) => void;
   onRefineError?: (error: RefinerError) => void;
@@ -45,6 +58,20 @@ export function useStrongForm<
   const [submitError, setSubmitError] = useState<SubmissionError>();
   const [inputErrors, setInputErrors] = useState<InputErrors>();
 
+  const isReady = useMemo(() => {
+    if (!props.validators) return true;
+    for (const key in props.validators) {
+      const validator = props.validators[key];
+      const value = props.inputs[key];
+      // NOTE: Expand the checks as more validators are added
+      if (validator?.required) {
+        if (typeof value === "string" && value.trim() === "") return false;
+        if (value === undefined || value === null) return false;
+      }
+    }
+    return true;
+  }, [props.inputs]);
+
   useEffect(() => {
     if (refining || submitting) {
       return;
@@ -165,5 +192,6 @@ export function useStrongForm<
     refining,
     refineError,
     inputErrors,
+    isReady,
   };
 }