Disable major select and create/edit plan button (#704)

* disable major select when year is unselected * disable submit button if form is invalid * !!! was unnecessary lol * fix ugly code, remove unused component
sandboxnu · Feb 14, 2024 · f97a100 · f97a100
1 parent 8f2c16a
commit f97a100
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 52 deletions.
diff --git a/packages/frontend/components/Form/Select.tsx b/packages/frontend/components/Form/Select.tsx
@@ -25,6 +25,7 @@ type PlanSelectProps = {
   /** Are the field values numbers. */
   isNumeric?: boolean;
   isSearchable?: boolean;
+  isDisabled?: boolean;
   /** The default text shown in the input box. */
   placeholder?: string;
   /** Fuzzy options to use */
@@ -41,6 +42,7 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
   rules,
   isNumeric,
   isSearchable,
+  isDisabled,
   placeholder,
   useFuzzySearch,
 }) => {
@@ -107,6 +109,7 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
         onChange={onChange}
         value={selectedOption}
         isSearchable={isSearchable}
+        isDisabled={isDisabled}
         placeholder={placeholder}
         filterOption={filterOptions}
         {...fieldRest}

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,30 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
     onCloseDisplay();
   };
 
+  const title = watch("name");
   const catalogYear = watch("catalogYear");
   const majorName = watch("major");
   const concentration = watch("concentration");
 
+  const yearSupportedMajors =
+    supportedMajorsData?.supportedMajors[catalogYear ?? 0];
+
+  const noConcentrations = { concentrations: [], minRequiredConcentrations: 0 };
+
+  const majorConcentrations =
+    yearSupportedMajors?.[majorName ?? ""] ?? noConcentrations;
+
+  const isConcentrationRequired =
+    majorConcentrations.minRequiredConcentrations > 0;
+
+  const majorHasConcentrations = majorConcentrations.concentrations.length > 0;
+
+  const isValidForm =
+    title &&
+    catalogYear &&
+    majorName &&
+    (!isConcentrationRequired || concentration);
+
   const noMajorHelperLabel = (
     <Stack>
       <Text>
@@ -243,16 +262,24 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                         setValue("concentration", "");
                       }}
                       rules={{ required: "Major is required." }}
-                      helperText='First select your catalog year. If you still cannot find your major, select "No Major" above.'
+                      isDisabled={!catalogYear}
                       isSearchable
                       useFuzzySearch
                     />
-                    <PlanConcentrationsSelect
-                      catalogYear={catalogYear}
-                      majorName={majorName}
-                      supportedMajorsData={supportedMajorsData}
-                      control={control}
-                    />
+                    {majorHasConcentrations && (
+                      <PlanSelect
+                        label="Concentrations"
+                        noValueOptionLabel="Select a Concentration"
+                        name="concentration"
+                        options={majorConcentrations.concentrations}
+                        control={control}
+                        rules={{
+                          required:
+                            isConcentrationRequired &&
+                            "Concentration is required",
+                        }}
+                      />
+                    )}
                   </>
                 )}
               </VStack>
@@ -270,6 +297,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,30 @@ 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 yearSupportedMajors =
+    supportedMajorsData?.supportedMajors[catalogYear ?? 0];
+
+  const noConcentrations = { concentrations: [], minRequiredConcentrations: 0 };
+
+  const majorConcentrations =
+    yearSupportedMajors?.[majorName ?? ""] ?? noConcentrations;
+
+  const isConcentrationRequired =
+    majorConcentrations.minRequiredConcentrations > 0;
+
+  const majorHasConcentrations = majorConcentrations.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) {
@@ -268,13 +287,22 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                       }}
                       rules={{ required: "Major is required." }}
                       isSearchable
+                      isDisabled={!catalogYear}
                     />
-                    <PlanConcentrationsSelect
-                      catalogYear={catalogYear}
-                      majorName={majorName}
-                      supportedMajorsData={supportedMajorsData}
-                      control={control}
-                    />
+                    {majorHasConcentrations && (
+                      <PlanSelect
+                        label="Concentrations"
+                        noValueOptionLabel="Select a Concentration"
+                        name="concentration"
+                        options={majorConcentrations.concentrations}
+                        control={control}
+                        rules={{
+                          required:
+                            isConcentrationRequired &&
+                            "Concentration is required",
+                        }}
+                      />
+                    )}
                   </>
                 )}
               </VStack>
@@ -293,6 +321,7 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                 <Button
                   variant="solid"
                   isLoading={isSubmitting}
+                  isDisabled={!isValidForm}
                   size="md"
                   borderRadius="lg"
                   type="submit"

diff --git a/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx b/packages/frontend/components/Plan/PlanConcentrationsSelect.tsx