diff --git a/frontend/src/components/ApplicationForm.jsx b/frontend/src/components/ApplicationForm.jsx index 92096be..9a6f92c 100644 --- a/frontend/src/components/ApplicationForm.jsx +++ b/frontend/src/components/ApplicationForm.jsx @@ -6,6 +6,18 @@ const SUBMIT_URL = "https://tse-fulcrum-2023-i83hg.ondigitalocean.app/api/application"; const PRESIDENT_EMAIL = "nboloori@ucsd.edu"; const DEADLINE = new Date("2023-10-15T23:59:59-07:00"); // PDT is UTC-7 +const HEAR_ABOUT_TSE_OPTIONS = [ + "Word of mouth", + "Tabling on Library Walk", + "Engineers on the Green", + "Flyers around campus", + "Postings in class forums", + "Presentation in lecture", + "Instagram", + "LinkedIn", + "UCSD website", + "Other" +]; const deadlineStr = DEADLINE.toLocaleString("en-US"); @@ -13,7 +25,7 @@ const ApplicationForm = (props) => { // initialize state below this line const [personalInfo, setPersonalInfo] = useState({}); - // keeps track of which checkboxes are clicked + // keeps track of which role checkboxes are clicked const [roles, setRoles] = useState({ test_developer: false, test_designer: false, @@ -21,6 +33,18 @@ const ApplicationForm = (props) => { designer: false }); + // Track which "How did you hear about TSE"? option(s) the user has selected. + // Initialize an object with each option intially mapping to false. + const [hearAboutTse, setHearAboutTse] = useState( + HEAR_ABOUT_TSE_OPTIONS.reduce( + (prevObj, curKey) => ({ + ...prevObj, + [curKey]: false + }), + {} + ) + ); + const [prompts, setPrompts] = useState({}); const [error, setError] = useState(""); @@ -32,10 +56,14 @@ const ApplicationForm = (props) => { setPersonalInfo({ ...personalInfo, [fieldName]: value }); }; - const updateCheckbox = (e) => { + const updateRoleCheckbox = (e) => { setRoles({ ...roles, [e.target.id]: e.target.checked }); }; + const updateHearAboutTSECheckbox = (e) => { + setHearAboutTse({ ...hearAboutTse, [e.target.id]: e.target.checked }); + }; + const updatePrompt = (e) => { setPrompts({ ...prompts, @@ -66,6 +94,12 @@ const ApplicationForm = (props) => { const gradQuarter = parseInt(personalInfo.gradQuarter) + 4 * parseInt(personalInfo.gradYear); + const selectedHearAboutTSE = Object.entries(hearAboutTse) + .filter(([role, selected]) => selected) + .map(([role, selected]) => + role === "Other" ? personalInfo.otherHearAboutTSE : role + ); + const application = { name: personalInfo.name, pronouns: personalInfo.pronouns, @@ -75,6 +109,7 @@ const ApplicationForm = (props) => { gradQuarter, major: personalInfo.major, majorDept: personalInfo.majorDept, + hearAboutTSE: selectedHearAboutTSE, prevTest: personalInfo.prevTest, resumeUrl: personalInfo.resumeUrl, aboutPrompt: prompts.about, @@ -301,6 +336,35 @@ const ApplicationForm = (props) => { + + + + How did you hear about TSE? + +

Feel free to select multiple options.

+
+ {HEAR_ABOUT_TSE_OPTIONS.map((option) => ( + + ))} +
+ {hearAboutTse.Other ? ( + { + updatePersonalInfo("otherHearAboutTSE", e.target.value); + }} + > + ) : null} + +
@@ -373,7 +437,7 @@ const ApplicationForm = (props) => { Role(s) you are applying for: { disabled={roles.test_developer || roles.test_designer} /> { disabled={roles.designer || roles.developer} />