disable submit button if form is invalid

sandboxnu · Feb 7, 2024 · 5a470b1 · 5a470b1
1 parent a7353b9
commit 5a470b1
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 14 deletions.
diff --git a/packages/frontend/components/Plan/AddPlanModal.tsx b/packages/frontend/components/Plan/AddPlanModal.tsx
@@ -41,7 +41,6 @@ import {
 import { BlueButton } from "../Button";
 import { PlanInput, PlanSelect } from "../Form";
 import { HelperToolTip } from "../Help";
-import { PlanConcentrationsSelect } from "./PlanConcentrationsSelect";
 import { IsGuestContext } from "../../pages/_app";
 
 interface AddPlanModalProps {
@@ -133,10 +132,28 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
     onCloseDisplay();
   };
 
+  const title = watch("name");
   const catalogYear = watch("catalogYear");
   const majorName = watch("major");
   const concentration = watch("concentration");
 
+  const selectedMajorConcentrations = supportedMajorsData?.supportedMajors[
+    catalogYear ?? 0
+  ]?.[majorName ?? ""] ?? { concentrations: [], minRequiredConcentrations: 0 };
+  console.log(selectedMajorConcentrations);
+
+  const isConcentrationRequired =
+    selectedMajorConcentrations.minRequiredConcentrations > 0;
+
+  const majorHasConcentrations =
+    selectedMajorConcentrations.concentrations.length > 0;
+
+  const isValidForm =
+    title &&
+    catalogYear &&
+    majorName &&
+    (!isConcentrationRequired || concentration);
+
   const noMajorHelperLabel = (
     <Stack>
       <Text>
@@ -247,12 +264,20 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                       isSearchable
                       useFuzzySearch
                     />
-                    <PlanConcentrationsSelect
-                      catalogYear={catalogYear}
-                      majorName={majorName}
-                      supportedMajorsData={supportedMajorsData}
-                      control={control}
-                    />
+                    {majorHasConcentrations && (
+                      <PlanSelect
+                        label="Concentrations"
+                        noValueOptionLabel="Select a Concentration"
+                        name="concentration"
+                        options={selectedMajorConcentrations.concentrations}
+                        control={control}
+                        rules={{
+                          required:
+                            isConcentrationRequired &&
+                            "Concentration is required",
+                        }}
+                      />
+                    )}
                   </>
                 )}
               </VStack>
@@ -270,6 +295,7 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                 <Button
                   variant="solid"
                   isLoading={isSubmitting}
+                  isDisabled={!isValidForm}
                   size="md"
                   borderRadius="lg"
                   type="submit"

diff --git a/packages/frontend/components/Plan/EditPlanModal.tsx b/packages/frontend/components/Plan/EditPlanModal.tsx
@@ -36,7 +36,6 @@ import { toast } from "../../utils";
 import { BlueButton } from "../Button";
 import { PlanInput, PlanSelect } from "../Form";
 import { HelperToolTip } from "../Help";
-import { PlanConcentrationsSelect } from "./PlanConcentrationsSelect";
 import { IsGuestContext } from "../../pages/_app";
 
 type EditPlanModalProps = {
@@ -104,10 +103,28 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
     return <></>;
   }
 
+  const title = watch("name");
   const catalogYear = watch("catalogYear");
   const majorName = watch("major");
   const concentration = watch("concentration");
 
+  const selectedMajorConcentrations = supportedMajorsData?.supportedMajors[
+    catalogYear ?? 0
+  ]?.[majorName ?? ""] ?? { concentrations: [], minRequiredConcentrations: 0 };
+  console.log(selectedMajorConcentrations);
+
+  const isConcentrationRequired =
+    selectedMajorConcentrations.minRequiredConcentrations > 0;
+
+  const majorHasConcentrations =
+    selectedMajorConcentrations.concentrations.length > 0;
+
+  const isValidForm =
+    title &&
+    catalogYear &&
+    majorName &&
+    (!isConcentrationRequired || concentration);
+
   const onSubmitHandler = async (payload: UpdatePlanDto) => {
     // no submitting till the curr plan has been fetched
     if (!plan) {
@@ -270,12 +287,20 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                       isSearchable
                       isDisabled={!!!catalogYear}
                     />
-                    <PlanConcentrationsSelect
-                      catalogYear={catalogYear}
-                      majorName={majorName}
-                      supportedMajorsData={supportedMajorsData}
-                      control={control}
-                    />
+                    {majorHasConcentrations && (
+                      <PlanSelect
+                        label="Concentrations"
+                        noValueOptionLabel="Select a Concentration"
+                        name="concentration"
+                        options={selectedMajorConcentrations.concentrations}
+                        control={control}
+                        rules={{
+                          required:
+                            isConcentrationRequired &&
+                            "Concentration is required",
+                        }}
+                      />
+                    )}
                   </>
                 )}
               </VStack>
@@ -294,6 +319,7 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                 <Button
                   variant="solid"
                   isLoading={isSubmitting}
+                  isDisabled={!isValidForm}
                   size="md"
                   borderRadius="lg"
                   type="submit"