From 40f0fa07253bffb71eb15e0c0c3b9b165909c65b Mon Sep 17 00:00:00 2001 From: benjaminjohnson2204 Date: Thu, 22 Feb 2024 17:00:06 -0800 Subject: [PATCH] Fix CSS styles & clean up code --- backend/src/controllers/vsr.ts | 8 +- backend/src/routes/vsr.ts | 7 - backend/src/validators/vsr.ts | 40 +- frontend/__tests__/exampleTest.test.ts | 107 +---- frontend/public/logo.svg | 9 + frontend/src/api/VSRs.ts | 15 - frontend/src/app/vsr/page.module.css | 19 +- frontend/src/app/vsr/page.tsx | 421 ++++++++---------- frontend/src/components/Dropdown.module.css | 7 + frontend/src/components/Dropdown.tsx | 12 +- frontend/src/components/HeaderBar.tsx | 3 +- .../src/components/MultipleChoice.module.css | 3 +- frontend/src/components/MultipleChoice.tsx | 4 +- frontend/src/components/TextField.module.css | 7 + frontend/src/components/TextField.tsx | 10 +- frontend/src/util/validateResponses.ts | 30 -- 16 files changed, 253 insertions(+), 449 deletions(-) create mode 100644 frontend/public/logo.svg delete mode 100644 frontend/src/util/validateResponses.ts diff --git a/backend/src/controllers/vsr.ts b/backend/src/controllers/vsr.ts index f67eda8..838d5be 100644 --- a/backend/src/controllers/vsr.ts +++ b/backend/src/controllers/vsr.ts @@ -9,7 +9,6 @@ export const createVSR: RequestHandler = async (req, res, next) => { const errors = validationResult(req); const { name, - date, gender, age, maritalStatus, @@ -22,12 +21,13 @@ export const createVSR: RequestHandler = async (req, res, next) => { sizeOfHome, } = req.body; - console.log(req.body); - try { // if there are errors, then this function throws an exception validationErrorParser(errors); + // Get the current date as a timestamp for when VSR was submitted + const date = new Date(); + const vsr = await VSRModel.create({ name, date, @@ -44,7 +44,7 @@ export const createVSR: RequestHandler = async (req, res, next) => { }); // 201 means a new resource has been created successfully - // the newly created task is sent back to the user + // the newly created VSR is sent back to the user res.status(201).json(vsr); } catch (error) { next(error); diff --git a/backend/src/routes/vsr.ts b/backend/src/routes/vsr.ts index 0f584d3..4a81cd4 100644 --- a/backend/src/routes/vsr.ts +++ b/backend/src/routes/vsr.ts @@ -4,13 +4,6 @@ import * as VSRValidator from "src/validators/vsr"; const router = express.Router(); -/** - * TaskValidator.createTask serves as middleware for this route. This means - * that instead of immediately serving up the route when the request is made, - * Express firsts passes the request to TaskValidator.createTask. - * TaskValidator.createTask processes the request and determines whether the - * request should be sent through or an error should be thrown. - */ router.post("/", VSRValidator.createVSR, VSRController.createVSR); export default router; diff --git a/backend/src/validators/vsr.ts b/backend/src/validators/vsr.ts index 48b46d3..c296e33 100644 --- a/backend/src/validators/vsr.ts +++ b/backend/src/validators/vsr.ts @@ -1,20 +1,5 @@ import { body } from "express-validator"; -// name: {type: String, required: true }, -// date: {type: Date, required: true}, -// gender: {type: String, require: true}, -// age: {type: Number, require: true}, -// martialStatus: {type: String, required: true }, -// spouseName: {type: String}, -// numOfBoys: {type: Number}, -// numOfGirls: {type: Number}, -// agesOfBoys: {type: [Number] }, -// agesOfGirls: {type: [Number] }, -// ethnicity: {type: String, require: true}, -// employmentStatus: {type: String, require: true}, -// incomeLevel: {type: String, require: true}, -// sizeOfHome: {type: String, require: true} - const makeNameValidator = () => body("name") .exists({ checkFalsy: true }) @@ -22,13 +7,6 @@ const makeNameValidator = () => .isString() .withMessage("Name must be a string"); -const makeDateValidator = () => - body("date") - .exists({ checkFalsy: true }) - .withMessage("Date is required") - .isISO8601() - .withMessage("Date must be in ISO 8601 format"); - const makeGenderValidator = () => body("gender") .exists({ checkFalsy: true }) @@ -56,14 +34,17 @@ const makeSpouseNameValidator = () => .isString() .withMessage("Spouse Name must be a string"); -const makeNumOfBoysValidator = () => - body("numOfBoys") - .optional({ checkFalsy: true }) - .isInt({ min: 0 }) - .withMessage("Number of Boys must be a positive integer"); +const makeAgesOfBoysValidator = () => + body("agesOfBoys") + .exists({ checkFalsy: true }) + .isArray() + .withMessage("Ages of Boys must be an array of numbers") + .custom((ages: number[]) => ages.every((age) => Number.isInteger(age) && age >= 0)) + .withMessage("Each age in Ages of Boys must be a positive integer"); + const makeAgesOfGirlsValidator = () => body("agesOfGirls") - .optional({ checkFalsy: true }) + .exists({ checkFalsy: true }) .isArray() .withMessage("Ages of Girls must be an array of numbers") .custom((ages: number[]) => ages.every((age) => Number.isInteger(age) && age >= 0)) @@ -99,12 +80,11 @@ const makeSizeOfHomeValidator = () => export const createVSR = [ makeNameValidator(), - makeDateValidator(), makeGenderValidator(), makeAgeValidator(), makeMaritalStatusValidator(), makeSpouseNameValidator(), - makeNumOfBoysValidator(), + makeAgesOfBoysValidator(), makeAgesOfGirlsValidator(), makeEthnicityValidator(), makeEmploymentStatusValidator(), diff --git a/frontend/__tests__/exampleTest.test.ts b/frontend/__tests__/exampleTest.test.ts index 71edd7a..3f99694 100644 --- a/frontend/__tests__/exampleTest.test.ts +++ b/frontend/__tests__/exampleTest.test.ts @@ -1,108 +1,7 @@ import "@testing-library/jest-dom"; -import { - isnum, - validateAge, - validateEthnicityOther, - validateSpouseName, -} from "../src/util/validateResponses"; - -describe("Frontend Validator Tests", () => { - describe("IsNum", () => { - it("Correctly classifies '0' as a number", () => { - expect(isnum("0")).toEqual(true); - }); - - it("Correctly classifies various numbers as numbers", () => { - expect(isnum("1")).toEqual(true); - expect(isnum("2")).toEqual(true); - expect(isnum("3")).toEqual(true); - expect(isnum("23948")).toEqual(true); - expect(isnum("56")).toEqual(true); - }); - - it("Correctly classifies various non-numbers as non-numbers", () => { - expect(isnum("")).toEqual(false); - expect(isnum(" ")).toEqual(false); - expect(isnum("abc")).toEqual(false); - expect(isnum("a")).toEqual(false); - expect(isnum("32 049")).toEqual(false); - expect(isnum("32,049")).toEqual(false); - expect(isnum("32.049")).toEqual(false); - expect(isnum("32-049")).toEqual(false); - expect(isnum("32/049")).toEqual(false); - expect(isnum("-5")).toEqual(false); - }); - }); - - describe("ValidateAge", () => { - it("Correctly classifies valid ages", () => { - expect(validateAge("0")).toEqual("Success"); - expect(validateAge("1")).toEqual("Success"); - expect(validateAge("2")).toEqual("Success"); - expect(validateAge("50")).toEqual("Success"); - }); - - it("Correctly classifies invalid ages", () => { - expect(validateAge("")).toEqual("Age is not a number"); - expect(validateAge("five years old")).toEqual("Age is not a number"); - expect(validateAge("abc")).toEqual("Age is not a number"); - expect(validateAge("a")).toEqual("Age is not a number"); - expect(validateAge("-5")).toEqual("Age is not a number"); - }); - }); - - describe("ValidateSpouseName", () => { - it("Correctly classifies married and has spouse name", () => { - expect(validateSpouseName("Married", "Bob")).toEqual("Success"); - expect(validateSpouseName("Married", "Bob Smith")).toEqual("Success"); - expect(validateSpouseName("Married", "Bob Smith Jr.")).toEqual("Success"); - }); - - it("Correctly classifies married and has no spouse name", () => { - expect(validateSpouseName("Married", "")).toEqual("Spouse name is required"); - }); - - it("Correctly classifies single and has spouse name", () => { - expect(validateSpouseName("Single", "Bob")).toEqual("Spouse name is not required"); - expect(validateSpouseName("Single", "Bob Smith")).toEqual("Spouse name is not required"); - expect(validateSpouseName("Single", "Bob Smith Jr.")).toEqual("Spouse name is not required"); - }); - - it("Correctly classifies single and has no spouse name", () => { - expect(validateSpouseName("Single", "")).toEqual("Success"); - }); - - it("Correctly classifies is complicated", () => { - expect(validateSpouseName("It's Complicated", "")).toEqual("Success"); - expect(validateSpouseName("It's Complicated", "Bob")).toEqual("Success"); - expect(validateSpouseName("It's Complicated", "Bob Smith")).toEqual("Success"); - }); - }); - - describe("ValidateEthnicityOther", () => { - it("Correctly classifies no ethnicity and no other", () => { - expect(validateEthnicityOther("", "")).toEqual("Please fill out the other field"); - }); - - it("Correctly classifies no ethnicity and other", () => { - expect(validateEthnicityOther("", "Other")).toEqual("Success"); - expect(validateEthnicityOther("", "Polynesian")).toEqual("Success"); - }); - - it("Correctly classifies has ethnicity and has other", () => { - expect(validateEthnicityOther("Asian", "Other")).toEqual( - "Please leave the other field empty", - ); - expect(validateEthnicityOther("Asian", "Polynesian")).toEqual( - "Please leave the other field empty", - ); - }); - - it("Correctly classifies ethnicity, no other", () => { - expect(validateEthnicityOther("Asian", "")).toEqual("Success"); - expect(validateEthnicityOther("Hispanic", "")).toEqual("Success"); - expect(validateEthnicityOther("Not Given", "")).toEqual("Success"); - }); +describe("ExampleTests", () => { + it("Passes example test", () => { + expect(1 + 1).toEqual(2); }); }); diff --git a/frontend/public/logo.svg b/frontend/public/logo.svg new file mode 100644 index 0000000..433e0ee --- /dev/null +++ b/frontend/public/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/api/VSRs.ts b/frontend/src/api/VSRs.ts index 3222d05..c3cd35e 100644 --- a/frontend/src/api/VSRs.ts +++ b/frontend/src/api/VSRs.ts @@ -1,19 +1,5 @@ import { APIResult, handleAPIError, post } from "@/api/requests"; -/* - - name: { type: String, required: true }, - date: { type: Date, required: true }, - gender: { type: String, require: true }, - age: { type: Number, require: true }, - maritalStatus: { type: String, required: true }, - spouseName: { type: String }, - agesOfBoys: { type: [Number] }, - agesOfGirls: { type: [Number] }, - ethnicity: { type: String, require: true }, - employmentStatus: { type: String, require: true }, - incomeLevel: { type: String, require: true }, - sizeOfHome: { type: String, require: true },*/ export interface VSRJson { _id: string; name: string; @@ -48,7 +34,6 @@ export interface VSR { export interface CreateVSRRequest { name: string; - date: string; gender: string; age: number; maritalStatus: string; diff --git a/frontend/src/app/vsr/page.module.css b/frontend/src/app/vsr/page.module.css index e3f72ae..9b2f10e 100644 --- a/frontend/src/app/vsr/page.module.css +++ b/frontend/src/app/vsr/page.module.css @@ -1,12 +1,12 @@ .main { padding: 64px; padding-top: 128px; - background-color: #d8d8d8; + background-color: #eceff3; display: flex; flex-direction: column; color: var(--Accent-Blue-1, #102d5f); text-align: left; - gap: 64px; + gap: 32px; /* Desktop/H1 */ font-family: Lora; font-size: 20px; @@ -47,6 +47,7 @@ background-color: white; border-radius: 20px; padding: 64px; + margin-top: 32px; gap: 10px; align-items: flex-start; width: 100%; @@ -74,14 +75,15 @@ display: flex; flex-direction: row; gap: 64px; - align-items: center; + align-items: start; } .numChildren { display: flex; - flex-direction: row; + flex-direction: column; gap: 20px; align-items: center; + flex: 1; } .asterisk { @@ -96,14 +98,21 @@ width: 306px; height: 64px; background-color: #102d5f; + color: white; + cursor: pointer; font-family: Lora; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; + border: none; + border-radius: 4px; } .longText { flex: 1; - height: 56px; +} + +.childInputWrapper { + width: 100%; } diff --git a/frontend/src/app/vsr/page.tsx b/frontend/src/app/vsr/page.tsx index ee19f78..49ae66e 100644 --- a/frontend/src/app/vsr/page.tsx +++ b/frontend/src/app/vsr/page.tsx @@ -11,7 +11,6 @@ import { createVSR, CreateVSRRequest } from "@/api/VSRs"; interface IFormInput { name: string; - date: string; marital_status: string; gender: string; spouse: string; @@ -36,16 +35,13 @@ const VeteranServiceRequest: React.FC = () => { watch, } = useForm(); const [selectedEthnicity, setSelectedEthnicity] = useState(""); - const [otherEthnicity, setOtherEthnicity] = useState(""); - const [finalEthnicity, setFinalEthnicity] = useState(""); - const [numBoys, setNumBoys] = useState(0); - const [numGirls, setNumGirls] = useState(0); + const numBoys = watch("num_boys"); + const numGirls = watch("num_girls"); - console.log("selected", selectedEthnicity); - const maritalOptions = ["Married", "Single", "Widow/Widower", "It's Complicated"]; - const genderOptions = ["", "Male", "Female", "Other"]; + const maritalOptions = ["Married", "Single", "It's Complicated", "Widowed/Widower"]; + const genderOptions = ["Male", "Female", "Other"]; const employmentOptions = [ "Employed", "Unemployed", @@ -53,7 +49,6 @@ const VeteranServiceRequest: React.FC = () => { "Retired", "In School", "Unable to work", - "Other", ]; const incomeOptions = [ @@ -85,19 +80,16 @@ const VeteranServiceRequest: React.FC = () => { ]; const onSubmit: SubmitHandler = async (data) => { - console.log(data); - // Construct the request object const createVSRRequest: CreateVSRRequest = { name: data.name, - date: new Date().toISOString().slice(0, 10), gender: data.gender, age: data.age, maritalStatus: data.marital_status, spouseName: data.spouse, - agesOfBoys: data.ages_of_boys.slice(0, numBoys), - agesOfGirls: data.ages_of_girls.slice(0, numGirls), - ethnicity: finalEthnicity, + agesOfBoys: data.ages_of_boys?.slice(0, data.num_boys) ?? [], + agesOfGirls: data.ages_of_girls?.slice(0, data.num_girls) ?? [], + ethnicity: selectedEthnicity === "" ? otherEthnicity : selectedEthnicity, employmentStatus: data.employment_status, incomeLevel: data.income_level, sizeOfHome: data.size_of_home, @@ -107,16 +99,67 @@ const VeteranServiceRequest: React.FC = () => { const response = await createVSR(createVSRRequest); if (!response.success) { + // TODO: better way of displaying error throw new Error(`HTTP error! status: ${response.error}`); } - const responseJson = await response.data; - console.log(responseJson); + // TODO: better way of displaying successful submission (popup/modal) + alert("VSR submitted successfully!"); } catch (error) { console.error("There was a problem with the fetch operation:", error); } }; + const renderChildInput = (gender: "boy" | "girl") => { + const numChildrenThisGender = gender === "boy" ? numBoys : numGirls; + + return ( + <> +
+ +
+ +
+ {Array.from({ length: numChildrenThisGender }, (_, index) => ( +
+ +
+ ))} +
+ + ); + }; + return (
@@ -147,17 +190,21 @@ const VeteranServiceRequest: React.FC = () => {

Personal Information

-
- console.log("Errors and watch", errors, watch())} - required={true} - error={!!errors.name} - helperText={errors.name?.message} - /> + +
+
+ +
+ {/* Add an empty div here with flex: 1 to take up the right half of the row */} +
@@ -176,6 +223,7 @@ const VeteranServiceRequest: React.FC = () => { required={true} error={!!errors.gender} helperText={errors.gender?.message} + placeholder="Select your gender" /> )} /> @@ -186,258 +234,141 @@ const VeteranServiceRequest: React.FC = () => { variant="outlined" placeholder="Enter your age" {...register("age", { required: "Age is required" })} - onChange={(e) => console.log("Errors and watch", errors, watch())} required={true} error={!!errors.age} helperText={errors.age?.message} />
+
-
- ( - field.onChange(newValue)} - required={true} - error={!!errors.marital_status} - helperText={errors.marital_status?.message} - /> - )} - /> +
+ ( + field.onChange(newValue)} + required={true} + error={!!errors.marital_status} + helperText={errors.marital_status?.message} + /> + )} + /> +
console.log("Errors and watch", errors, watch())} - required={false} + required={["Married", "Widowed/Widower"].includes(watch().marital_status)} error={!!errors.spouse} helperText={errors.spouse?.message} />
+ {/* Add an empty div here with flex: 1 to take up the right half of the row */} +
-
- { - //Need to fix (make OnChange function?)? Issue: If I input 5 then 3 for num boys, - //the data will make an array with 3 values then two null like: - //[2, 4, 6, null, null] rather than just [2, 4, 6] - // Convert the input value to a number and check if it exceeds 20 - const intValue = parseInt(value); - if (intValue > 20) { - return 20; // Return 20 if the input value exceeds 20 - } - return intValue > 0 ? intValue : 0; // Ensure negative values are not accepted, return 0 as a fallback - }, - })} - {...register("num_boys", { required: "Number of boys is required" })} - onChange={(e) => { - console.log("Errors and watch", errors, watch()); - //if number is greater than 20, set it to 20, and set form value to 20 - if (parseInt(e.target.value) > 20) { - setNumBoys(20); - } else { - setNumBoys(parseInt(e.target.value)); - } - }} - required={true} - error={!!errors.num_boys} - helperText={errors.num_boys?.message} - /> -
-
-
- {Array.from({ length: numBoys }, (_, index) => ( -
- -
- ))} -
- -
-
- { - //Need to fix (make OnChange function?)? Issue: If I input 5 then 3 for num boys, - //the data will make an array with 3 values then two null like: - //[2, 4, 6, null, null] rather than just [2, 4, 6] - // Convert the input value to a number and check if it exceeds 20 - const intValue = parseInt(value); - if (intValue > 20) { - return 20; // Return 20 if the input value exceeds 20 - } - return intValue > 0 ? intValue : 0; // Ensure negative values are not accepted, return 0 as a fallback - }, - })} - {...register("num_girls", { required: "Number of girls is required" })} - onChange={(e) => { - console.log("Errors and watch", errors, watch()); - //if number is greater than 20, set it to 20, and set form value to 20 - if (parseInt(e.target.value) > 20) { - setNumGirls(20); - } else { - setNumGirls(parseInt(e.target.value)); - } - }} - required={true} - error={!!errors.num_girls} - helperText={errors.num_girls?.message} - /> -
-
- -
- {Array.from({ length: numGirls }, (_, index) => ( -
- -
- ))} + {renderChildInput("boy")} + {renderChildInput("girl")}
+
-
-
- - ( + ( + <> { field.onChange(newValue); - setOtherEthnicity(""); setSelectedEthnicity(newValue); - - if (newValue === "") { - setFinalEthnicity(otherEthnicity); - } else { - setFinalEthnicity(newValue); - } }} - required={false} + required={true} error={!!errors.ethnicity} helperText={errors.ethnicity?.message} /> - )} - /> - - { - const value = e.target.value; - setOtherEthnicity(value); - if (selectedEthnicity === "") { - setFinalEthnicity(value); - } else { - setFinalEthnicity(selectedEthnicity); - } - }} - required={!selectedEthnicity || selectedEthnicity.length === 0} - label={""} - variant={"outlined"} - /> - - {errors.ethnicity &&

{errors.ethnicity.message}

} +
+ { + const value = e.target.value; + field.onChange(value); + setOtherEthnicity(value); + }} + variant={"outlined"} + required={false} + /> +
+ + )} + /> - ( - field.onChange(newValue)} - required={true} - error={!!errors.employment_status} - helperText={errors.employment_status?.message} - /> - )} - /> + ( + field.onChange(newValue)} + required={true} + error={!!errors.employment_status} + helperText={errors.employment_status?.message} + /> + )} + /> - ( - field.onChange(newValue)} - required={true} - error={!!errors.income_level} - helperText={errors.income_level?.message} - /> - )} - /> + ( + field.onChange(newValue)} + required={true} + error={!!errors.income_level} + helperText={errors.income_level?.message} + /> + )} + /> - ( - field.onChange(newValue)} - required={true} - error={!!errors.size_of_home} - helperText={errors.size_of_home?.message} - /> - )} - /> -
+ ( + field.onChange(newValue)} + required={true} + error={!!errors.size_of_home} + helperText={errors.size_of_home?.message} + /> + )} + />
diff --git a/frontend/src/components/Dropdown.module.css b/frontend/src/components/Dropdown.module.css index 6154523..dfd998b 100644 --- a/frontend/src/components/Dropdown.module.css +++ b/frontend/src/components/Dropdown.module.css @@ -38,3 +38,10 @@ color: var(--Secondary-2, #be2d46); font-size: 12px; } + +.placeholder { + font-size: 16px; + font-style: italic; + font-weight: 300; + color: var(--Dark-Gray, #484848); +} diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx index 176ca53..9cf8841 100644 --- a/frontend/src/components/Dropdown.tsx +++ b/frontend/src/components/Dropdown.tsx @@ -10,6 +10,7 @@ export interface DropDownProps { required: boolean; error?: boolean; helperText?: string; + placeholder?: string; } const Dropdown = ({ @@ -20,11 +21,12 @@ const Dropdown = ({ required, error, helperText, + placeholder, }: DropDownProps) => { return (

- {required && * } + {required ? * : null} {label}

@@ -35,7 +37,13 @@ const Dropdown = ({ error={error} displayEmpty fullWidth={true} + renderValue={(value) => + value === "" ?

{placeholder}

: value + } > + +

{placeholder}

+ {options.map((option) => ( {option} @@ -43,7 +51,7 @@ const Dropdown = ({ ))} -
{helperText}
+ {helperText ?
{helperText}
: null}
); }; diff --git a/frontend/src/components/HeaderBar.tsx b/frontend/src/components/HeaderBar.tsx index c178f7d..843f93d 100644 --- a/frontend/src/components/HeaderBar.tsx +++ b/frontend/src/components/HeaderBar.tsx @@ -1,10 +1,11 @@ +import Image from "next/image"; import React from "react"; import styles from "src/components/HeaderBar.module.css"; const HeaderBar = () => { return (
- + logo
); }; diff --git a/frontend/src/components/MultipleChoice.module.css b/frontend/src/components/MultipleChoice.module.css index 588b1f3..b3a1f93 100644 --- a/frontend/src/components/MultipleChoice.module.css +++ b/frontend/src/components/MultipleChoice.module.css @@ -4,7 +4,7 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: 4px; + gap: 16px; flex: 1 0 0; font-size: 16px; color: var(--Light-Gray, #818181); @@ -40,6 +40,7 @@ display: flex; flex-direction: row; gap: 16px; + flex-wrap: wrap; } .chipUnselected { diff --git a/frontend/src/components/MultipleChoice.tsx b/frontend/src/components/MultipleChoice.tsx index 0d48848..bd62206 100644 --- a/frontend/src/components/MultipleChoice.tsx +++ b/frontend/src/components/MultipleChoice.tsx @@ -22,7 +22,7 @@ const MultipleChoice = ({ return (

- {required && * } + {required ? * : null} {label}

@@ -44,7 +44,7 @@ const MultipleChoice = ({ /> ))}
-
{helperText}
+ {helperText ?
{helperText}
: null}
); }; diff --git a/frontend/src/components/TextField.module.css b/frontend/src/components/TextField.module.css index 84825f0..971ff18 100644 --- a/frontend/src/components/TextField.module.css +++ b/frontend/src/components/TextField.module.css @@ -32,3 +32,10 @@ color: var(--Secondary-2, #be2d46); font-size: 12px; } + +.input::placeholder { + font-size: 16px; + font-style: italic; + font-weight: 300; + color: var(--Dark-Gray, #484848); +} diff --git a/frontend/src/components/TextField.tsx b/frontend/src/components/TextField.tsx index 92fed03..47e08b2 100644 --- a/frontend/src/components/TextField.tsx +++ b/frontend/src/components/TextField.tsx @@ -14,11 +14,10 @@ const TextField = forwardRef( { label, error, required, helperText, ...props }: TextFieldProps, ref: ForwardedRef, ) => { - console.log(props); return (

- {required && * } + {required ? * : null} {label}

-
{helperText}
+ {helperText ?
{helperText}
: null}
); }, diff --git a/frontend/src/util/validateResponses.ts b/frontend/src/util/validateResponses.ts deleted file mode 100644 index 9d66c1f..0000000 --- a/frontend/src/util/validateResponses.ts +++ /dev/null @@ -1,30 +0,0 @@ -export function isnum(num: string): boolean { - return /^\d+$/.test(num); -} - -export function validateAge(age: string): string { - if (!isnum(age)) { - return "Age is not a number"; - } else { - return "Success"; - } -} - -export function validateSpouseName(maritalStatus: string, spouseName: string): string { - if (maritalStatus === "Married") { - return spouseName === "" ? "Spouse name is required" : "Success"; - } else if (maritalStatus === "Single") { - return spouseName === "" ? "Success" : "Spouse name is not required"; - } - return "Success"; -} - -export function validateEthnicityOther(ethnicities: string, other: string) { - if ((ethnicities === "" && other !== "") || (ethnicities !== "" && other === "")) { - return "Success"; - } else if (ethnicities === "" && other === "") { - return "Please fill out the other field"; - } else { - return "Please leave the other field empty"; - } -}