Merge branch 'main' into vsr_individual

TritonSE · Feb 25, 2024 · 5321b1d · 5321b1d
2 parents af07992 + 3750b82
commit 5321b1d
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 59 deletions.
diff --git a/backend/src/models/vsr.ts b/backend/src/models/vsr.ts
@@ -6,8 +6,6 @@ const vsrSchema = new Schema({
   age: { type: Number, require: true },
   maritalStatus: { type: String, required: true },
   spouseName: { type: String },
-  numOfBoys: { type: Number, required: true },
-  numOfGirls: { type: Number, required: true },
   agesOfBoys: { type: [Number] },
   agesOfGirls: { type: [Number] },
   ethnicity: { type: [String], require: true },

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,7 @@
     "@emotion/styled": "^11.11.0",
     "@material/textfield": "^14.0.0",
     "@mui/material": "^5.15.5",
+    "@mui/material": "^5.15.6",
     "@mui/styled-engine-sc": "^6.0.0-alpha.13",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",

diff --git a/frontend/src/api/requests.ts b/frontend/src/api/requests.ts
@@ -22,6 +22,7 @@ async function fetchRequest(
   headers: Record<string, string>,
 ): Promise<Response> {
   const hasBody = body !== undefined;
+
   const newHeaders = { ...headers };
   if (hasBody) {
     newHeaders["Content-Type"] = "application/json";
@@ -55,13 +56,12 @@ async function assertOk(response: Response): Promise<void> {
     const text = await response.text();
     if (text) {
       message += ": " + text;
-      console.log(message);
     }
   } catch (e) {
     // skip errors
   }
 
-  // throw new Error(message);
+  throw new Error(message);
 }
 
 /**

diff --git a/frontend/src/app/vsr/page.module.css b/frontend/src/app/vsr/page.module.css
@@ -109,6 +109,17 @@
   border-radius: 4px;
 }
 
+.sectionHeader {
+  gap: 4px;
+  font-size: 16px;
+  color: black;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin: 16px 0 -8px;
+}
+
 .longText {
   flex: 1;
 }

diff --git a/frontend/src/app/vsr/page.tsx b/frontend/src/app/vsr/page.tsx
@@ -87,8 +87,14 @@ const VeteranServiceRequest: React.FC = () => {
       age: data.age,
       maritalStatus: data.marital_status,
       spouseName: data.spouse,
-      agesOfBoys: data.ages_of_boys?.slice(0, data.num_boys) ?? [],
-      agesOfGirls: data.ages_of_girls?.slice(0, data.num_girls) ?? [],
+      agesOfBoys:
+        data.ages_of_boys
+          ?.slice(0, data.num_boys)
+          .map((age) => (typeof age === "number" ? age : parseInt(age))) ?? [],
+      agesOfGirls:
+        data.ages_of_girls
+          ?.slice(0, data.num_girls)
+          .map((age) => (typeof age === "number" ? age : parseInt(age))) ?? [],
       ethnicity: selectedEthnicities.concat(otherEthnicity === "" ? [] : [otherEthnicity]),
       employmentStatus: data.employment_status,
       incomeLevel: data.income_level,
@@ -126,7 +132,7 @@ const VeteranServiceRequest: React.FC = () => {
               pattern: {
                 // Only allow up to 2 digits
                 value: /^[0-9][0-9]?$/,
-                message: "This field must be a number no greater than 100",
+                message: "This field must be a number less than 100",
               },
             })}
             required
@@ -136,7 +142,8 @@ const VeteranServiceRequest: React.FC = () => {
         </div>
 
         <div className={styles.numChildren}>
-          {Array.from({ length: numChildrenThisGender }, (_, index) => (
+          {/* Cap it at 99 children per gender to avoid freezing web browser */}
+          {Array.from({ length: Math.min(numChildrenThisGender, 99) }, (_, index) => (
             <div key={index} className={styles.childInputWrapper}>
               <TextField
                 label={`Age`}
@@ -148,6 +155,10 @@ const VeteranServiceRequest: React.FC = () => {
                     value: /^[0-9]+$/,
                     message: "This field must be a number",
                   },
+                  max: {
+                    value: 17,
+                    message: "Only enter children under 18",
+                  },
                 })}
                 error={!!errors[`ages_of_${gender}s`]?.[index]}
                 helperText={errors[`ages_of_${gender}s`]?.[index]?.message}
@@ -231,9 +242,17 @@ const VeteranServiceRequest: React.FC = () => {
                   <div className={styles.longText}>
                     <TextField
                       label="Age"
+                      type="number"
                       variant="outlined"
                       placeholder="Enter your age"
-                      {...register("age", { required: "Age is required" })}
+                      {...register("age", {
+                        required: "Age is required",
+                        pattern: {
+                          // Only allow up to 2 digits
+                          value: /^[0-9]+$/,
+                          message: "This field must be a number",
+                        },
+                      })}
                       required
                       error={!!errors.age}
                       helperText={errors.age?.message}
@@ -259,26 +278,28 @@ const VeteranServiceRequest: React.FC = () => {
                     />
                   )}
                 />
-                <div className={styles.formRow}>
-                  <div className={styles.longText}>
-                    <TextField
-                      label="Spouse's Name"
-                      variant="outlined"
-                      placeholder="e.g. Jane Timberlake"
-                      {...register("spouse", {
-                        required:
-                          ["Married", "Widowed/Widower"].includes(watch().marital_status) &&
-                          "Spouse's Name is required",
-                      })}
-                      required={["Married", "Widowed/Widower"].includes(watch().marital_status)}
-                      error={!!errors.spouse}
-                      helperText={errors.spouse?.message}
-                    />
+                {watch().marital_status === "Married" ? (
+                  <div className={styles.formRow}>
+                    <div className={styles.longText}>
+                      <TextField
+                        label="Spouse's Name"
+                        variant="outlined"
+                        placeholder="e.g. Jane Timberlake"
+                        {...register("spouse", {
+                          required: "Spouse's Name is required",
+                        })}
+                        required
+                        error={!!errors.spouse}
+                        helperText={errors.spouse?.message}
+                      />
+                    </div>
+                    {/* Add an empty div here with flex: 1 to take up the right half of the row */}
+                    <div style={{ flex: 1 }} />
                   </div>
-                  {/* Add an empty div here with flex: 1 to take up the right half of the row */}
-                  <div style={{ flex: 1 }} />
-                </div>
+                ) : null}
 
+                <p className={styles.sectionHeader}>Children (under 18)</p>
+
                 <div className={styles.formRow}>
                   {renderChildInput("boy")}
                   {renderChildInput("girl")}