Skip to content

Commit

Permalink
Update P1 Optional Questions section
Browse files Browse the repository at this point in the history
  • Loading branch information
@meleongg
meleongg committed Feb 9, 2024
1 parent 63e9606 commit a17e831
Show file tree
Hide file tree
Showing 5 changed files with 237 additions and 61 deletions.
188 changes: 171 additions & 17 deletions src/components/ApplicationForm/BasicInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import styled from 'styled-components'
import majors from '../../containers/Application/data/majors.json'
import schools from '../../containers/Application/data/schools.json'
import {
CULTURAL_BG_OPTIONS,
DIETARY_RESTRICTION_OPTIONS,
ETHNICITY_OPTIONS,
PRONOUN_OPTIONS,
RACE_OPTIONS,
} from '../../utility/Constants'
import { applyCustomSort, creatableDropdownValue, findElement } from '../../utility/utilities'
import { TextArea } from '../Input'
import Dropdown from '../Input/Dropdown'
import Select from '../Input/Select'
import { TextInput } from '../Input/TextInput'
Expand All @@ -29,6 +31,18 @@ const genderOptions = [
{ value: 'prefer not to answer', label: 'Prefer not to answer' },
]

const indigenousIdentificationOptions = [
{ value: 'yes', label: 'Yes' },
{ value: 'no', label: 'No' },
{ value: 'prefer not to answer', label: 'Prefer not to answer' },
]

const canadianStatusOptions = [
{ value: 'international student', label: 'International Student' },
{ value: 'canadian student', label: 'Canadian Student' },
{ value: 'other', label: 'Other (Please Describe)' },
]

const educationOptions = [
{ value: 'less than high school', label: 'Less than Secondary / High School' },
{ value: 'high school', label: 'Secondary/High school' },
Expand Down Expand Up @@ -361,6 +375,10 @@ const StyledTextInput = styled(TextInput)`
margin: 0.5em 1em 1em 0;
`

const StyledTextArea = styled(TextArea)`
margin: 1em 0;
`

// form part 1
export default ({ refs, errors, formInputs, onChange }) => (
<>
Expand Down Expand Up @@ -720,7 +738,7 @@ export default ({ refs, errors, formInputs, onChange }) => (
</FormSpacing>

<FormSpacing>
<QuestionHeading>question 13</QuestionHeading>
<QuestionHeading>question 12</QuestionHeading>
<SubHeading>What are your pronouns?</SubHeading>
{/* {errors?.pronouns && <ErrorMessage>{errors?.pronouns}</ErrorMessage>} */}
{formInputs &&
Expand Down Expand Up @@ -757,8 +775,8 @@ export default ({ refs, errors, formInputs, onChange }) => (
</FormSpacing>

<FormSpacing>
<QuestionHeading>question 14</QuestionHeading>
<SubHeading>What gender do you identify as?</SubHeading>
<QuestionHeading>question 13</QuestionHeading>
<SubHeading>What is your gender identity?</SubHeading>
{/* {errors?.gender && <ErrorMessage>{errors?.gender}</ErrorMessage>} */}
<Dropdown
options={genderOptions}
Expand Down Expand Up @@ -789,12 +807,11 @@ export default ({ refs, errors, formInputs, onChange }) => (
</FormSpacing>

<FormSpacing>
<QuestionHeading>question 06</QuestionHeading>
<QuestionHeading>question 14</QuestionHeading>
<SubHeading>
{formInputs.educationLevel === 'high school'
? 'What do you plan on studying?'
: 'What is your current or intended major?'}
<Required />
</SubHeading>
<P>Enter your intended/current major, or unknown</P>
{/* {errors?.major && <ErrorMessage>{errors?.major}</ErrorMessage>} */}
Expand All @@ -812,50 +829,133 @@ export default ({ refs, errors, formInputs, onChange }) => (
}
emptySearchDefaultOption="Start typing to search"
canCreateNewOption
// isValid={!errors?.major}
isValid={true}
customRef={refs['majorRef']}
/>
</FormSpacing>

<FormSpacing>
<QuestionHeading>question 15</QuestionHeading>
<SubHeading>What is your race/ethnicity?</SubHeading>
{/* {errors?.ethnicity && <ErrorMessage>{errors?.ethnicity}</ErrorMessage>} */}
<SubHeading>Which race(s) best describes you?</SubHeading>
{formInputs &&
applyCustomSort(Object.entries(formInputs?.ethnicity), Object.keys(ETHNICITY_OPTIONS)).map(
applyCustomSort(Object.entries(formInputs?.race), Object.keys(RACE_OPTIONS)).map(
([key, val]) => (
<Select
key={key}
type="checkbox"
label={ETHNICITY_OPTIONS[key]}
label={RACE_OPTIONS[key]}
checked={val}
onChange={() =>
onChange({
ethnicity: { ...formInputs.ethnicity, [key]: !val },
race: { ...formInputs.race, [key]: !val },
})
}
customRef={refs['ethnicityRef']}
customRef={refs['raceRef']}
/>
)
)}
<br />
{formInputs?.ethnicity?.other && (
{formInputs?.race?.other && (
<TextInput
placeholder="Please Specify"
size="small"
noOutline
value={formInputs?.otherRace}
onChange={e =>
onChange({
otherRace: e.target.value,
})
}
/>
)}
</FormSpacing>

<FormSpacing>
<QuestionHeading>question 16</QuestionHeading>
<SubHeading>Do you identify as Indigenous/First Nations?</SubHeading>
<Dropdown
options={indigenousIdentificationOptions}
placeholder="Identification"
isSearchable={false}
value={findElement(
indigenousIdentificationOptions,
'value',
formInputs.indigenousIdentification
)}
onChange={e =>
onChange({
indigenousIdentification: e.value,
})
}
isValid={true}
customRef={refs['indigenousIdentificationRef']}
/>
{formInputs.indigenousIdentification === 'yes' && (
<TextInput
placeholder="Please Specify"
size="small"
noOutline
value={formInputs?.otherEthnicity}
value={formInputs.specifiedIndigenousIdentification}
onChange={e =>
onChange({
otherEthnicity: e.target.value,
specifiedIndigenousIdentification: e.target.value,
})
}
/>
)}
</FormSpacing>

{/* ADD legally authorized to work in Canada */}
<FormSpacing>
<QuestionHeading>question 17</QuestionHeading>
<SubHeading>What is your cultural background?</SubHeading>
{formInputs &&
applyCustomSort(
Object.entries(formInputs?.culturalBackground),
Object.keys(CULTURAL_BG_OPTIONS)
).map(([key, val]) => (
<Select
key={key}
type="checkbox"
label={CULTURAL_BG_OPTIONS[key]}
checked={val}
onChange={() =>
onChange({
culturalBackground: { ...formInputs.culturalBackground, [key]: !val },
})
}
customRef={refs['culturalBackgroundRef']}
/>
))}
<br />
{formInputs?.culturalBackground?.other && (
<TextInput
placeholder="Please Specify Other Cultural Background"
size="small"
noLeftOutline
value={formInputs?.otherCulturalBackground}
onChange={e =>
onChange({
otherCulturalBackground: e.target.value,
})
}
/>
)}
{formInputs?.culturalBackground?.firstNationsOrIndigenous && (
<TextInput
placeholder="Please Specify First Nations/Indigenous Background"
size="small"
noLeftOutline
value={formInputs?.otherFirstNationsOrIndigenous}
onChange={e =>
onChange({
otherFirstNationsOrIndigenous: e.target.value,
})
}
/>
)}
</FormSpacing>

{/* <FormSpacing>
<QuestionHeading>question 16</QuestionHeading>
<SubHeading>Are you legally authorized to work in Canada?</SubHeading>
<Select
Expand All @@ -871,6 +971,60 @@ export default ({ refs, errors, formInputs, onChange }) => (
checked={formInputs.isAuthorizedToWorkInCanada === false}
onChange={() => onChange({ isAuthorizedToWorkInCanada: false })}
/>
</FormSpacing> */}

<FormSpacing>
<QuestionHeading>question 18</QuestionHeading>
<SubHeading>What is your Canadian status?</SubHeading>
<P>
Note: this does not affect your application and is only collected for potential employers at
the event.{' '}
</P>
<Dropdown
options={canadianStatusOptions}
placeholder="Canadian Status"
isSearchable={false}
value={findElement(canadianStatusOptions, 'value', formInputs.canadianStatus)}
onChange={inputValue =>
onChange({
canadianStatus: inputValue.value,
})
}
isValid={true}
customRef={refs['canadianStatusRef']}
/>
{formInputs.canadianStatus === 'other' && (
<TextInput
placeholder="Please Specify"
size="small"
noOutline
value={formInputs.canadianStatus}
errorMsg={errors?.canadianStatus}
invalid={!!errors?.canadianStatus}
onChange={e =>
onChange({
canadianStatus: e.target.value,
})
}
/>
)}
</FormSpacing>

<FormSpacing>
<QuestionHeading>question 19</QuestionHeading>
<SubHeading>Do you have any visible or invisible disabilities?</SubHeading>
<QuestionHeading>question 20</QuestionHeading>
<StyledTextArea
width="100%"
value={formInputs.disability}
invalid={!!errors.disability}
onChange={val =>
onChange({
disability: val,
})
}
customRef={refs['disabilityRef']}
/>
</FormSpacing>
</>
)
7 changes: 3 additions & 4 deletions src/components/Input/Dropdown.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from 'react'
import ReactSelect from 'react-select'
import CreatableSelect from 'react-select/creatable'
import ReactSelect, { components } from 'react-select'
import AsyncSelect from 'react-select/async'
import AsyncCreatableSelect from 'react-select/async-creatable'
import styled, { withTheme, css } from 'styled-components'
import { components } from 'react-select'
import CreatableSelect from 'react-select/creatable'
import styled, { css, withTheme } from 'styled-components'
import customCursor from '../../assets/custom-cursor.png'
import Icon from '../Icon'

Expand Down
13 changes: 10 additions & 3 deletions src/components/Input/TextInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ const TextInputContainer = styled.div`
${p =>
p.inline &&
`display: inline-block;
margin-left: 0;
margin-top: 0.5em;`}
margin-left: 0;
margin-top: 0.5em;`}
${p => p.noOutline && `margin: 0;`}
${p => p.noLeftOutline && `margin-left: 0;`}
`

const TextInputBox = styled.input.attrs({
Expand Down Expand Up @@ -55,12 +56,18 @@ export const TextInput = ({
invalid,
errorMsg,
noOutline,
noLeftOutline,
inline,
customRef,
...rest
}) => {
return (
<TextInputContainer className={className} inline={inline} noOutline={noOutline}>
<TextInputContainer
className={className}
inline={inline}
noLeftOutline={noLeftOutline}
noOutline={noOutline}
>
<TextInputBox invalid={invalid} noOutline={noOutline} ref={customRef} {...rest} />
{invalid && <StyledErrorMessage> {errorMsg} </StyledErrorMessage>}
</TextInputContainer>
Expand Down
18 changes: 13 additions & 5 deletions src/containers/Application/Part1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const questionsByOrder = [
'ageByHackathon',
'phoneNumber',
'school',
'major',
'educationLevel',
'graduation',
'academicYear',
Expand All @@ -23,8 +22,13 @@ const questionsByOrder = [
'identifyAsUnderrepresented',
'pronouns',
'gender',
'ethnicity',
'isAuthorizedToWorkInCanada',
'major',
'race',
'indigenousIdentification',
'culturalBackground',
// 'isAuthorizedToWorkInCanada',
'canadianStatus',
'disability',
]

export default () => {
Expand Down Expand Up @@ -62,20 +66,24 @@ export default () => {
pronounsRef: useRef(null),
dietaryRestrictionRef: useRef(null),
identifyAsUnderrepresentedRef: useRef(null),
indigenousIdentificationRef: useRef(null),
ageByHackathonRef: useRef(null),
phoneNumberRef: useRef(null),
schoolRef: useRef(null),
majorRef: useRef(null),
educationLevelRef: useRef(null),
graduationRef: useRef(null),
academicYearRef: useRef(null),
ethnicityRef: useRef(null),
raceRef: useRef(null),
// willBeAgeOfMajorityRef: useRef(null),
hackathonsAttendedRef: useRef(null),
contributionRoleRef: useRef(null),
countryOfResidenceRef: useRef(null),
locationRef: useRef(null),
isAuthorizedToWorkInCanadaRef: useRef(null),
culturalBackgroundRef: useRef(null),
// isAuthorizedToWorkInCanadaRef: useRef(null),
canadianStatusRef: useRef(null),
disabilityRef: useRef(null),
}

/**
Expand Down
Loading

0 comments on commit a17e831

Please sign in to comment.