From b84e84f34795e682ee60a2424f96075a95d3b1f2 Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 17:21:11 -0800 Subject: [PATCH 01/20] Remove createRow from ApplyPage --- src/client/components/Fields.tsx | 8 +- .../ApplyPage/components/PersonalSection.tsx | 123 ++++++++--------- .../ApplyPage/components/ResponseSection.tsx | 124 ++++++++++-------- .../ApplyPage/components/UserSection.tsx | 61 +++++---- 4 files changed, 171 insertions(+), 145 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index a6c9a354..00b2d448 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -1,5 +1,5 @@ import { UserDiversityOptions, UserYearOptions, UserGenderOptions, UserShirtSizeOptions } from '@Shared/UserEnums'; -import React from 'react'; +import React, { FunctionComponent } from 'react'; import { Field, WrappedFieldProps } from 'redux-form'; import majors from '~/static/Majors.json'; @@ -26,6 +26,12 @@ export function createRow(...content: any[]) { ); } +export const ApplicationRow: FunctionComponent = (props) => ( +
+ {props.children} +
+) + export function createColumn(size: string, ...content: any[]) { return (
diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index 19e46afe..cf398cf3 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -7,6 +7,7 @@ import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; +import { ApplicationRow } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -127,8 +128,8 @@ class PersonalSection extends ApplyPageSection + {FormFields.createColumn('col-sm-12', FormFields.createLabel('University'), ( ) - ) - ) + )} + ); } else if (value === InstitutionType.HighSchool) { return ( - FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('High School'), FormFields.createInput('highSchool', 'High School') - ) - ) + )} + ); } @@ -167,12 +168,14 @@ class PersonalSection extends ApplyPageSection; } - return (FormFields.createRow( - FormFields.createColumn('col', - FormFields.createLabel('Student PID'), - FormFields.createInput('pid', 'AXXXXXXXX') - ) - )); + return ( + + {FormFields.createColumn('col', + FormFields.createLabel('Student PID'), + FormFields.createInput('pid', 'AXXXXXXXX') + )} + + ); } showMajorYearBoxes(info: any) { @@ -183,16 +186,16 @@ class PersonalSection extends ApplyPageSection + {[FormFields.createColumn('col-lg-6', FormFields.createLabel('Major'), FormFields.createMajorPicker() ), FormFields.createColumn('col-lg-6', FormFields.createLabel('Year in School'), FormFields.createYearPicker() - ) - ) + )]} + ); } @@ -213,7 +216,7 @@ class PersonalSection extends ApplyPageSection{[...gpaFields]}; } /** @@ -226,8 +229,8 @@ class PersonalSection extends ApplyPageSection - {FormFields.createRow( - FormFields.createColumn('col-sm-12 no-margin-bottom', + + {[FormFields.createColumn('col-sm-12 no-margin-bottom', FormFields.createLabel('Institution') ), FormFields.createColumn('col-md', @@ -247,9 +250,8 @@ class PersonalSection extends ApplyPageSection - ) - )} - + )]} + @@ -257,11 +259,13 @@ class PersonalSection extends ApplyPageSection + {FormFields.createColumn('col-md-6', FormFields.createLabel('What is your race / ethnicity?'), FormFields.createDiversityOptions() - ))); + )} + ); } render() { @@ -270,25 +274,24 @@ class PersonalSection extends ApplyPageSection - {FormFields.createRow( - FormFields.createColumn('col-md-6', + + {[FormFields.createColumn('col-md-6', FormFields.createLabel('First Name'), FormFields.createInput('firstName', 'First Name') ), FormFields.createColumn('col-md-6', FormFields.createLabel('Last Name'), FormFields.createInput('lastName', 'Last Name') - ) - )} - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + )]} + + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('Email'), this.createEmailField() - ) - )} - - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + )} + + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('Birthdate'),
{FormFields.createColumn('col-sm-4', @@ -303,11 +306,11 @@ class PersonalSection extends ApplyPageSection - ) - )} + )} + - {FormFields.createRow( - FormFields.createColumn('col-md-6', + + {[FormFields.createColumn('col-md-6', FormFields.createLabel('Gender'), FormFields.createGenderPicker() ), @@ -315,42 +318,42 @@ class PersonalSection extends ApplyPageSection {this.renderInstitutionOptions(options.allowHighSchool)} - {FormFields.createRow( - FormFields.createColumn('col-lg-6', + + {[FormFields.createColumn('col-lg-6', FormFields.createLabel('Github Username', false), FormFields.createInput('github', 'Github') ), FormFields.createColumn('col-lg-6', FormFields.createLabel('Personal Website', false), FormFields.createInput('website', 'http://example.com/') - ) - )} + )]} + {this.createGPAFields(options.enableGPA, options.requireGPA, options.requireMajorGPA)} {options.requireDiversityOption && this.createDiversityOptions()} - {FormFields.createRow( - FormFields.createColumn('col-md-4 col-md-offset-4', + + {FormFields.createColumn('col-md-4 col-md-offset-4', FormFields.createLabel('Resume (5MB Max)', options.requireResume), this.createResumeUpload() - ) - )} + )} + - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {FormFields.createColumn('col-sm-12', this.createShareCheckbox() - ) - )} + )} + - {FormFields.createRow( - FormFields.createColumn('col-sm-12 text-right', + + {FormFields.createColumn('col-sm-12 text-right', - ) - )} + )} + ); } diff --git a/src/client/pages/ApplyPage/components/ResponseSection.tsx b/src/client/pages/ApplyPage/components/ResponseSection.tsx index 556baf3c..3296c174 100644 --- a/src/client/pages/ApplyPage/components/ResponseSection.tsx +++ b/src/client/pages/ApplyPage/components/ResponseSection.tsx @@ -8,6 +8,7 @@ import { createTeamCode } from '~/data/UserApi'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import TeamRegister, { JoinCreateTeamState, TeamRegisterProps } from './TeamRegister'; +import { ApplicationRow } from '~/components/Fields'; interface ResponseSectionProps extends ApplyPageSectionProps { } @@ -35,12 +36,12 @@ class ResponseSection extends ApplyPageSection + {FormFields.createColumn('col-lg-6', FormFields.createLabel('If yes, from where?', false), FormFields.createInput('city', 'Which city?') - ) - ) + )} + ); } return ; @@ -127,8 +128,8 @@ class ResponseSection extends ApplyPageSection - {FormFields.createRow( - FormFields.createColumn('col-sm-12 no-margin-bottom', + + {[FormFields.createColumn('col-sm-12 no-margin-bottom', FormFields.createLabel('Create or Join a Team') ), FormFields.createColumn('col-md', @@ -153,7 +154,8 @@ class ResponseSection extends ApplyPageSection createTeamCode(event._id), } as TeamRegisterProps} /> - )} + ]} + ); } @@ -164,20 +166,21 @@ class ResponseSection extends ApplyPageSection - {options.foodOption && FormFields.createRow( - FormFields.createColumn('col-sm-12', - FormFields.createLabel('What kind of food would you like to see ' + - 'at the hackathon?', false), - FormFields.createTextArea('food', 'Healthy Snacks and Drinks') - ) - )} + {options.foodOption && + + {FormFields.createColumn('col-sm-12', + FormFields.createLabel('What kind of food would you like to see ' + + 'at the hackathon?', false), + FormFields.createTextArea('food', 'Healthy Snacks and Drinks') + )} + } - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('Dietary Restrictions', false), FormFields.createTextArea('diet', 'Dietary Restrictions') - ) - )} + )} + {options.requireWhyThisEvent && FormFields.createColumn('col-sm-12', @@ -186,58 +189,69 @@ class ResponseSection extends ApplyPageSection + {FormFields.createColumn('col-lg-12', + FormFields.createLabel('I will be travelling from outside the ' + + 'San Diego county'), + FormFields.createRadio('outOfState', true, 'Yes'), + FormFields.createRadio('outOfState', false, 'No') + )} + + } {options.allowOutOfState && } - {options.requireExtraCurriculars && FormFields.createRow( - FormFields.createColumn('col-sm-12', + {options.requireExtraCurriculars && + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('Please put down any extra curriculars or Student' + ' Organizations you are affiliated with', true), FormFields.createTextArea('extraCurriculars', 'Extra Curriculars') - ) - )} + )} + + } - {FormFields.createRow( - FormFields.createColumn('col-12', + + {FormFields.createColumn('col-12', FormFields.createLabel('T-Shirt Size (Unisex)'), FormFields.createTShirtSizePicker() - ) - )} + )} + - {customQuestions && FormFields.createRow( - this.renderCustomQuestions(customQuestions, - QuestionType.QUESTION_LONG))} + {customQuestions && + {this.renderCustomQuestions(customQuestions, + QuestionType.QUESTION_LONG)} + } - {options.requireClassRequirement && FormFields.createRow( - FormFields.createColumn('col-lg-12', - FormFields.createLabel('Have you taken an Advanced Data Structures ' + - '(CSE 100) or equivalent class?'), - FormFields.createRadio('classRequirement', true, 'Yes'), - FormFields.createRadio('classRequirement', false, 'No') - ) - )} + {options.requireClassRequirement && + + {FormFields.createColumn('col-lg-12', + FormFields.createLabel('Have you taken an Advanced Data Structures ' + + '(CSE 100) or equivalent class?'), + FormFields.createRadio('classRequirement', true, 'Yes'), + FormFields.createRadio('classRequirement', false, 'No') + )} + + } - {customQuestions && FormFields.createRow( - this.renderCustomQuestions(customQuestions, - QuestionType.QUESTION_SHORT))} + {customQuestions && + + {this.renderCustomQuestions(customQuestions, + QuestionType.QUESTION_SHORT)} + } - {customQuestions && FormFields.createRow( - this.renderCustomQuestions(customQuestions, - QuestionType.QUESTION_CHECKBOX))} + {customQuestions && + + {this.renderCustomQuestions(customQuestions, + QuestionType.QUESTION_CHECKBOX)} + } {options.allowTeammates && this.renderTeamOptions(this.state.teamState)} - {FormFields.createRow( - FormFields.createColumn('col-sm-12 col-md-4 text-center', + + {[FormFields.createColumn('col-sm-12 col-md-4 text-center', - ) - )} + )]} + ); } diff --git a/src/client/pages/ApplyPage/components/UserSection.tsx b/src/client/pages/ApplyPage/components/UserSection.tsx index 414710bb..c24d606b 100644 --- a/src/client/pages/ApplyPage/components/UserSection.tsx +++ b/src/client/pages/ApplyPage/components/UserSection.tsx @@ -3,6 +3,7 @@ import { Field, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; +import { ApplicationRow } from '~/components/Fields'; interface UserSectionProps extends ApplyPageSectionProps { emailExists: boolean; @@ -55,19 +56,19 @@ class UserSection extends ApplyPageSection - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {FormFields.createColumn('col-sm-12', FormFields.createLabel(`I authorize you to share my application/registration information for event administration, ranking, MLH administration, pre- and post-event informational e-mails, and occasional messages about hackathons in-line with the MLH Privacy Policy. I further I agree to the terms of both the MLH Contest Terms and Conditions and the MLH Privacy Policy.`) - ) - )} + )} + - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {[FormFields.createColumn('col-sm-12', this.createProvisionBox(), I agree to the  @@ -93,8 +94,8 @@ class UserSection extends ApplyPageSection - ) - )} + )]} + ); } @@ -105,19 +106,19 @@ class UserSection extends ApplyPageSection - {emailExists && FormFields.createRow( - FormFields.createColumn('col-sm-12 mt-4 text-center', + {emailExists && + {FormFields.createColumn('col-sm-12 mt-4 text-center',

You're Almost Done!

,
We see you already have a TESC Events account
We will link this application to that
- ) - )} + )} + } - {!emailExists && FormFields.createRow( - FormFields.createColumn('col-sm-12', + {!emailExists && + {[FormFields.createColumn('col-sm-12',

You're Almost Done!

,
To complete your application, please add a password @@ -130,13 +131,14 @@ class UserSection extends ApplyPageSection} {options.mlhProvisions && this.createMLHProvisions()} - {FormFields.createRow( - FormFields.createColumn('col-sm-12 col-md-4 text-center', + + {[ + FormFields.createColumn('col-sm-12 col-md-4 text-center', - ), - FormFields.createColumn('col-sm-12 col-md-8 text-right', + ), + FormFields.createColumn('col-sm-12 col-md-8 text-right', - ), - FormFields.createColumn('col-sm-12 col-md-4 text-center', + ), + FormFields.createColumn('col-sm-12 col-md-4 text-center', {isSubmitting && } - ) - )} - - {submitError && FormFields.createRow( - FormFields.createColumn('col-sm-12', + ) + ]} + + + {submitError && + {FormFields.createColumn('col-sm-12', // TODO: Handle special cases of submits - check to see if it actually is resume problems FormFields.createError(submitError.message) - ) - )} + )} + } ); } From b5f2773435019724525a9a05b6fee45408bea4ab Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 18:13:08 -0800 Subject: [PATCH 02/20] Remove createCol from ApplyPage --- src/client/components/Fields.tsx | 10 + .../ApplyPage/components/PersonalSection.tsx | 219 ++++++++++-------- .../ApplyPage/components/ResponseSection.tsx | 113 +++++---- .../ApplyPage/components/UserSection.tsx | 117 +++++----- 4 files changed, 241 insertions(+), 218 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index 00b2d448..76733e80 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -12,6 +12,10 @@ export type CustomFieldProps = WrappedFieldProps & { maxLength?: number; }; +type ApplicationColProps = { + className?: string +} + /** * Defines all of the custom fields for the application. * Anything beginning with "error" contains a label which renders the error, and @@ -32,6 +36,12 @@ export const ApplicationRow: FunctionComponent = (props) => (
) +export const ApplicationCol: FunctionComponent = (props) => ( +
+ {props.children} +
+) + export function createColumn(size: string, ...content: any[]) { return (
diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index cf398cf3..3db94383 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -7,7 +7,7 @@ import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; -import { ApplicationRow } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -129,8 +129,8 @@ class PersonalSection extends ApplyPageSection - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('University'), + + {[FormFields.createLabel('University'), ( - ) - )} + )]} + ); } else if (value === InstitutionType.HighSchool) { return ( - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('High School'), - FormFields.createInput('highSchool', 'High School') - )} + + {[FormFields.createLabel('High School'), + FormFields.createInput('highSchool', 'High School') + ]} + ); } @@ -170,10 +171,10 @@ class PersonalSection extends ApplyPageSection - {FormFields.createColumn('col', - FormFields.createLabel('Student PID'), - FormFields.createInput('pid', 'AXXXXXXXX') - )} + + {[FormFields.createLabel('Student PID'), + FormFields.createInput('pid', 'AXXXXXXXX')]} + ); } @@ -187,14 +188,14 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createColumn('col-lg-6', - FormFields.createLabel('Major'), - FormFields.createMajorPicker() - ), - FormFields.createColumn('col-lg-6', - FormFields.createLabel('Year in School'), - FormFields.createYearPicker() - )]} + + {[FormFields.createLabel('Major'), + FormFields.createMajorPicker()]} + + + {[FormFields.createLabel('Year in School'), + FormFields.createYearPicker()]} + ); } @@ -203,17 +204,21 @@ class PersonalSection extends ApplyPageSection + {[FormFields.createLabel('Grade Point Average (GPA)', requireGPA), + FormFields.createInput('gpa', '4.00')]} + + ); } if (requireMajorGPA) { - gpaFields.push(FormFields.createColumn('col-lg-6', - FormFields.createLabel('Major GPA', true), - FormFields.createInput('majorGPA', '4.00') - )); + gpaFields.push( + + {[FormFields.createLabel('Major GPA', true), + FormFields.createInput('majorGPA', '4.00')]} + + ); } return {[...gpaFields]}; @@ -230,27 +235,33 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createColumn('col-sm-12 no-margin-bottom', - FormFields.createLabel('Institution') - ), - FormFields.createColumn('col-md', - this.createInstitutionCard(InstitutionType.UCSD, 'institution-ucsd', - 'UCSD') - ), - FormFields.createColumn('col-md', - this.createInstitutionCard(InstitutionType.University, 'institution-uni', - 'Other University') - ), - allowHighSchool ? FormFields.createColumn('col-md', - this.createInstitutionCard(InstitutionType.HighSchool, - 'institution-hs', 'High School') - ) : '', - FormFields.createColumn('col-sm-12', + + {FormFields.createLabel('Institution')} + + + + {this.createInstitutionCard(InstitutionType.UCSD, 'institution-ucsd', + 'UCSD')} + + + + {this.createInstitutionCard(InstitutionType.University, 'institution-uni', + 'Other University')} + + + {allowHighSchool && + + {this.createInstitutionCard(InstitutionType.HighSchool, + 'institution-hs', 'High School')} + + } + + - )]} + @@ -261,10 +272,11 @@ class PersonalSection extends ApplyPageSection - {FormFields.createColumn('col-md-6', - FormFields.createLabel('What is your race / ethnicity?'), + + {[FormFields.createLabel('What is your race / ethnicity?'), FormFields.createDiversityOptions() - )} + ]} + ); } @@ -275,50 +287,54 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createColumn('col-md-6', - FormFields.createLabel('First Name'), - FormFields.createInput('firstName', 'First Name') - ), - FormFields.createColumn('col-md-6', - FormFields.createLabel('Last Name'), - FormFields.createInput('lastName', 'Last Name') - )]} + + {[FormFields.createLabel('First Name'), + FormFields.createInput('firstName', 'First Name')]} + + + {[FormFields.createLabel('Last Name'), + FormFields.createInput('lastName', 'Last Name') + ]} + - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('Email'), - this.createEmailField() - )} + + {[FormFields.createLabel('Email'), + this.createEmailField() + ]} + - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('Birthdate'), -
- {FormFields.createColumn('col-sm-4', - FormFields.createMonthPicker() - )} - {FormFields.createColumn('col-sm-4', - FormFields.createInput('birthdateDay', 'Day', 'number', - 'sd-form__input-text mb-1 mb-md-0') - )} - {FormFields.createColumn('col-sm-4', - FormFields.createInput('birthdateYear', 'Year', 'number', - 'sd-form__input-text') - )} -
- )} + + {[FormFields.createLabel('Birthdate'), +
+ + {FormFields.createMonthPicker()} + + + {FormFields.createInput('birthdateDay', 'Day', 'number', + 'sd-form__input-text mb-1 mb-md-0')} + + , + {FormFields.createInput('birthdateYear', 'Year', 'number', + 'sd-form__input-text')} + +
+ ]} + - {[FormFields.createColumn('col-md-6', - FormFields.createLabel('Gender'), + + {[FormFields.createLabel('Gender'), FormFields.createGenderPicker() - ), - FormFields.createColumn('col-md-6', - FormFields.createLabel('Phone Number'), + ]} + + + {[FormFields.createLabel('Phone Number'), FormFields.createInput('phone', '555-555-5555', 'text', - 'sd-form__input-text', this.normalizePhone) - )]} + 'sd-form__input-text', this.normalizePhone)]} + {this.renderInstitutionOptions(options.allowHighSchool)} @@ -326,42 +342,43 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createColumn('col-lg-6', - FormFields.createLabel('Github Username', false), - FormFields.createInput('github', 'Github') - ), - FormFields.createColumn('col-lg-6', - FormFields.createLabel('Personal Website', false), + + {[ FormFields.createLabel('Github Username', false), + FormFields.createInput('github', 'Github')]} + + + {[FormFields.createLabel('Personal Website', false), FormFields.createInput('website', 'http://example.com/') - )]} + ]} + {this.createGPAFields(options.enableGPA, options.requireGPA, options.requireMajorGPA)} {options.requireDiversityOption && this.createDiversityOptions()} - {FormFields.createColumn('col-md-4 col-md-offset-4', - FormFields.createLabel('Resume (5MB Max)', options.requireResume), + + {[FormFields.createLabel('Resume (5MB Max)', options.requireResume), this.createResumeUpload() - )} + ]} + - {FormFields.createColumn('col-sm-12', - this.createShareCheckbox() - )} + + {this.createShareCheckbox()} + - {FormFields.createColumn('col-sm-12 text-right', + - )} + ); diff --git a/src/client/pages/ApplyPage/components/ResponseSection.tsx b/src/client/pages/ApplyPage/components/ResponseSection.tsx index 3296c174..f83847b8 100644 --- a/src/client/pages/ApplyPage/components/ResponseSection.tsx +++ b/src/client/pages/ApplyPage/components/ResponseSection.tsx @@ -8,7 +8,7 @@ import { createTeamCode } from '~/data/UserApi'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import TeamRegister, { JoinCreateTeamState, TeamRegisterProps } from './TeamRegister'; -import { ApplicationRow } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol } from '~/components/Fields'; interface ResponseSectionProps extends ApplyPageSectionProps { } @@ -37,10 +37,10 @@ class ResponseSection extends ApplyPageSection - {FormFields.createColumn('col-lg-6', - FormFields.createLabel('If yes, from where?', false), - FormFields.createInput('city', 'Which city?') - )} + + {[FormFields.createLabel('If yes, from where?', false), + FormFields.createInput('city', 'Which city?')]} + ); } @@ -67,11 +67,11 @@ class ResponseSection extends ApplyPageSection ( - FormFields.createColumn('col-sm-12', - FormFields.createLabel(x.question, x.isRequired), + + {[FormFields.createLabel(x.question, x.isRequired), inputField(`customQuestionResponses.${x._id}`, - 'Your Response...') - ) + 'Your Response...')]} + )); } @@ -129,23 +129,23 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createColumn('col-sm-12 no-margin-bottom', - FormFields.createLabel('Create or Join a Team') - ), - FormFields.createColumn('col-md', - this.createTeamStateCard(JoinCreateTeamState.CREATE, 'create-team', - 'Create') - ), - FormFields.createColumn('col-md', - this.createTeamStateCard(JoinCreateTeamState.JOIN, 'join-team', - 'Join') - ), - FormFields.createColumn('col-sm-12', + + {FormFields.createLabel('Create or Join a Team')} + + + {this.createTeamStateCard(JoinCreateTeamState.CREATE, 'create-team', + 'Create')} + + + {this.createTeamStateCard(JoinCreateTeamState.JOIN, 'join-team', + 'Join')} + + - ), + {options.foodOption && - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('What kind of food would you like to see ' + - 'at the hackathon?', false), - FormFields.createTextArea('food', 'Healthy Snacks and Drinks') - )} + + {[FormFields.createLabel('What kind of food would you like to see ' + + 'at the event?', false), + FormFields.createTextArea('food', 'Healthy Snacks and Drinks')]} + } - - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('Dietary Restrictions', false), - FormFields.createTextArea('diet', 'Dietary Restrictions') - )} + + {[FormFields.createLabel('Dietary Restrictions', false), + FormFields.createTextArea('diet', 'Dietary Restrictions')]} + {options.requireWhyThisEvent && - FormFields.createColumn('col-sm-12', - FormFields.createLabel(`Why Do You Want To Attend ${event.name}?`, true), - FormFields.createTextArea('whyEventResponse', 'Your Response...') - ) + + {[FormFields.createLabel(`Why Do You Want To Attend ${event.name}?`, true), + FormFields.createTextArea('whyEventResponse', 'Your Response...')]} + } {options.allowOutOfState && - {FormFields.createColumn('col-lg-12', - FormFields.createLabel('I will be travelling from outside the ' + + + {[FormFields.createLabel('I will be travelling from outside the ' + 'San Diego county'), FormFields.createRadio('outOfState', true, 'Yes'), - FormFields.createRadio('outOfState', false, 'No') - )} + FormFields.createRadio('outOfState', false, 'No')]} + } @@ -205,19 +204,19 @@ class ResponseSection extends ApplyPageSection - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('Please put down any extra curriculars or Student' - + ' Organizations you are affiliated with', true), - FormFields.createTextArea('extraCurriculars', 'Extra Curriculars') - )} + + {[FormFields.createLabel('Please put down any extra curriculars or Student' + + ' Organizations you are affiliated with', true), + FormFields.createTextArea('extraCurriculars', 'Extra Curriculars')]} + } - {FormFields.createColumn('col-12', - FormFields.createLabel('T-Shirt Size (Unisex)'), - FormFields.createTShirtSizePicker() - )} + + {[FormFields.createLabel('T-Shirt Size (Unisex)'), + FormFields.createTShirtSizePicker()]} + {customQuestions && @@ -227,12 +226,12 @@ class ResponseSection extends ApplyPageSection - {FormFields.createColumn('col-lg-12', - FormFields.createLabel('Have you taken an Advanced Data Structures ' + + + {[FormFields.createLabel('Have you taken an Advanced Data Structures ' + '(CSE 100) or equivalent class?'), FormFields.createRadio('classRequirement', true, 'Yes'), - FormFields.createRadio('classRequirement', false, 'No') - )} + FormFields.createRadio('classRequirement', false, 'No')]} + } @@ -251,7 +250,7 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createColumn('col-sm-12 col-md-4 text-center', + - ), - FormFields.createColumn('col-sm-12 col-md-8 text-right', + + - )]} + ); diff --git a/src/client/pages/ApplyPage/components/UserSection.tsx b/src/client/pages/ApplyPage/components/UserSection.tsx index c24d606b..e966364d 100644 --- a/src/client/pages/ApplyPage/components/UserSection.tsx +++ b/src/client/pages/ApplyPage/components/UserSection.tsx @@ -3,7 +3,7 @@ import { Field, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; -import { ApplicationRow } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol } from '~/components/Fields'; interface UserSectionProps extends ApplyPageSectionProps { emailExists: boolean; @@ -57,19 +57,19 @@ class UserSection extends ApplyPageSection - {FormFields.createColumn('col-sm-12', - FormFields.createLabel(`I authorize you to share my + + {FormFields.createLabel(`I authorize you to share my application/registration information for event administration, ranking, MLH administration, pre- and post-event informational e-mails, and occasional messages about hackathons in-line with the MLH Privacy Policy. I further I agree to the terms of both the MLH - Contest Terms and Conditions and the MLH Privacy Policy.`) - )} + Contest Terms and Conditions and the MLH Privacy Policy.`)} + - {[FormFields.createColumn('col-sm-12', - this.createProvisionBox(), + + {[this.createProvisionBox(), I agree to the  MLH Data Sharing Policy . - - ), - FormFields.createColumn('col-sm-12', - this.createAcceptBox(), + ]} + + + {[this.createAcceptBox(), I have read and agree to the  MLH Code of Conduct - - )]} + ]} + ); @@ -107,72 +107,69 @@ class UserSection extends ApplyPageSection {emailExists && - {FormFields.createColumn('col-sm-12 mt-4 text-center', +

You're Almost Done!

,
We see you already have a TESC Events account
We will link this application to that -
- )} + + } {!emailExists && - {[FormFields.createColumn('col-sm-12', +

You're Almost Done!

,
To complete your application, please add a password -
- ), - FormFields.createColumn('col-md-6', - FormFields.createLabel('Password'), - FormFields.createInput('password', 'Password', 'password') - ), - FormFields.createColumn('col-md-6', - FormFields.createLabel('Confirm Password'), - FormFields.createInput('confirmPassword', 'Confirm Password', 'password') - )]} + + + + {[FormFields.createLabel('Password'), + FormFields.createInput('password', 'Password', 'password')]} + + + {[FormFields.createLabel('Confirm Password'), + FormFields.createInput('confirmPassword', 'Confirm Password', 'password')]} + } {options.mlhProvisions && this.createMLHProvisions()} - {[ - FormFields.createColumn('col-sm-12 col-md-4 text-center', - - ), - FormFields.createColumn('col-sm-12 col-md-8 text-right', - - ), - FormFields.createColumn('col-sm-12 col-md-4 text-center', - - {isSubmitting && } - - ) - ]} + + + + + + + + + {isSubmitting && } + + {submitError && - {FormFields.createColumn('col-sm-12', - // TODO: Handle special cases of submits - check to see if it actually is resume problems - FormFields.createError(submitError.message) - )} + + {FormFields.createError(submitError.message)} + } ); From 6903090a57e13fae66b55d4ffe3fc27f9ca47337 Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 19:35:46 -0800 Subject: [PATCH 03/20] Remove createLabel from ApplyPage --- src/client/components/Fields.tsx | 17 +++ .../ApplyPage/components/PersonalSection.tsx | 110 +++++++++--------- .../ApplyPage/components/ResponseSection.tsx | 62 +++++----- .../ApplyPage/components/UserSection.tsx | 17 +-- 4 files changed, 113 insertions(+), 93 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index 76733e80..8704f420 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -16,6 +16,13 @@ type ApplicationColProps = { className?: string } +type ApplicationLabelProps = { + required?: boolean; + className?: string; + forTag?: string; + children?: string | JSX.Element[] | JSX.Element +} + /** * Defines all of the custom fields for the application. * Anything beginning with "error" contains a label which renders the error, and @@ -235,6 +242,16 @@ export const errorMajorPicker: React.StatelessComponent = ({ i ); }; +export const ApplicationLabel: FunctionComponent = + ({required, className, forTag, children}) => ( + +) + export function createLabel(text: string, required: boolean = true, className: string = '', forTag: string = '') { return ( diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index 3db94383..1a0944d2 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -7,7 +7,7 @@ import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; -import { ApplicationRow, ApplicationCol } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -96,7 +96,9 @@ class PersonalSection extends ApplyPageSection - {FormFields.createLabel(label, false, 'sd-form__institution-label', id)} + + {label} +
); } @@ -130,7 +132,7 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('University'), + University ( - {[FormFields.createLabel('High School'), - FormFields.createInput('highSchool', 'High School') - ]} + High School + {FormFields.createInput('highSchool', 'High School')} ); @@ -172,8 +173,8 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Student PID'), - FormFields.createInput('pid', 'AXXXXXXXX')]} + Student PID + {FormFields.createInput('pid', 'AXXXXXXXX')} ); @@ -189,12 +190,12 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Major'), - FormFields.createMajorPicker()]} + Major + {FormFields.createMajorPicker()} - {[FormFields.createLabel('Year in School'), - FormFields.createYearPicker()]} + Year in School + {FormFields.createYearPicker()} ); @@ -206,7 +207,7 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Grade Point Average (GPA)', requireGPA), + Grade Point Average (GPA) FormFields.createInput('gpa', '4.00')]} ); @@ -215,8 +216,8 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Major GPA', true), - FormFields.createInput('majorGPA', '4.00')]} + Major GPA + {FormFields.createInput('majorGPA', '4.00')} ); } @@ -236,7 +237,7 @@ class PersonalSection extends ApplyPageSection - {FormFields.createLabel('Institution')} + Institution @@ -273,11 +274,12 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('What is your race / ethnicity?'), - FormFields.createDiversityOptions() - ]} + + What is your race / ethnicity? + + {FormFields.createDiversityOptions()} - ); + ); } render() { @@ -288,52 +290,48 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('First Name'), - FormFields.createInput('firstName', 'First Name')]} + First Name + {FormFields.createInput('firstName', 'First Name')} - {[FormFields.createLabel('Last Name'), - FormFields.createInput('lastName', 'Last Name') - ]} + Last Name + {FormFields.createInput('lastName', 'Last Name')} - {[FormFields.createLabel('Email'), - this.createEmailField() - ]} + Email + {this.createEmailField()} - {[FormFields.createLabel('Birthdate'), -
- - {FormFields.createMonthPicker()} - - - {FormFields.createInput('birthdateDay', 'Day', 'number', - 'sd-form__input-text mb-1 mb-md-0')} - - , - {FormFields.createInput('birthdateYear', 'Year', 'number', - 'sd-form__input-text')} - -
- ]} + Birthdate +
+ + {FormFields.createMonthPicker()} + + + {FormFields.createInput('birthdateDay', 'Day', 'number', + 'sd-form__input-text mb-1 mb-md-0')} + + , + {FormFields.createInput('birthdateYear', 'Year', 'number', + 'sd-form__input-text')} + +
- {[FormFields.createLabel('Gender'), - FormFields.createGenderPicker() - ]} + Gender + {FormFields.createGenderPicker()} - {[FormFields.createLabel('Phone Number'), - FormFields.createInput('phone', '555-555-5555', 'text', - 'sd-form__input-text', this.normalizePhone)]} + Phone Number + {FormFields.createInput('phone', '555-555-5555', 'text', + 'sd-form__input-text', this.normalizePhone)} @@ -343,13 +341,12 @@ class PersonalSection extends ApplyPageSection - {[ FormFields.createLabel('Github Username', false), - FormFields.createInput('github', 'Github')]} + Github Username' + {FormFields.createInput('github', 'Github')} - {[FormFields.createLabel('Personal Website', false), - FormFields.createInput('website', 'http://example.com/') - ]} + Personal Website' + {FormFields.createInput('website', 'http://example.com/')} @@ -358,9 +355,8 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Resume (5MB Max)', options.requireResume), - this.createResumeUpload() - ]} + Resume (5MB Max) + {this.createResumeUpload()} diff --git a/src/client/pages/ApplyPage/components/ResponseSection.tsx b/src/client/pages/ApplyPage/components/ResponseSection.tsx index f83847b8..627982f6 100644 --- a/src/client/pages/ApplyPage/components/ResponseSection.tsx +++ b/src/client/pages/ApplyPage/components/ResponseSection.tsx @@ -8,7 +8,7 @@ import { createTeamCode } from '~/data/UserApi'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import TeamRegister, { JoinCreateTeamState, TeamRegisterProps } from './TeamRegister'; -import { ApplicationRow, ApplicationCol } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; interface ResponseSectionProps extends ApplyPageSectionProps { } @@ -38,8 +38,8 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createLabel('If yes, from where?', false), - FormFields.createInput('city', 'Which city?')]} + If yes, from where? + {FormFields.createInput('city', 'Which city?')} ); @@ -68,9 +68,9 @@ class ResponseSection extends ApplyPageSection ( - {[FormFields.createLabel(x.question, x.isRequired), - inputField(`customQuestionResponses.${x._id}`, - 'Your Response...')]} + {x.question} + {inputField(`customQuestionResponses.${x._id}`, + 'Your Response...')} )); } @@ -100,7 +100,9 @@ class ResponseSection extends ApplyPageSection - {FormFields.createLabel(label, false, 'sd-form__team-label', id)} + + {label} +
); } @@ -130,7 +132,7 @@ class ResponseSection extends ApplyPageSection - {FormFields.createLabel('Create or Join a Team')} + Create or Join a Team {this.createTeamStateCard(JoinCreateTeamState.CREATE, 'create-team', @@ -169,32 +171,34 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createLabel('What kind of food would you like to see ' + - 'at the event?', false), - FormFields.createTextArea('food', 'Healthy Snacks and Drinks')]} + + What kind of food would you like to see at the event? + + {FormFields.createTextArea('food', 'Healthy Snacks and Drinks')} } - {[FormFields.createLabel('Dietary Restrictions', false), - FormFields.createTextArea('diet', 'Dietary Restrictions')]} + Dietary Restrictions + {FormFields.createTextArea('diet', 'Dietary Restrictions')} {options.requireWhyThisEvent && - {[FormFields.createLabel(`Why Do You Want To Attend ${event.name}?`, true), - FormFields.createTextArea('whyEventResponse', 'Your Response...')]} + + <>Why Do You Want To Attend {event.name}? + + {FormFields.createTextArea('whyEventResponse', 'Your Response...')} } {options.allowOutOfState && - {[FormFields.createLabel('I will be travelling from outside the ' + - 'San Diego county'), - FormFields.createRadio('outOfState', true, 'Yes'), - FormFields.createRadio('outOfState', false, 'No')]} + I will be travelling from outside the San Diego county + {FormFields.createRadio('outOfState', true, 'Yes')} + {FormFields.createRadio('outOfState', false, 'No')}} } @@ -205,17 +209,18 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createLabel('Please put down any extra curriculars or Student' - + ' Organizations you are affiliated with', true), - FormFields.createTextArea('extraCurriculars', 'Extra Curriculars')]} + + Please put down any extra curriculars or Student Organizations you are affiliated with + + {FormFields.createTextArea('extraCurriculars', 'Extra Curriculars')} } - {[FormFields.createLabel('T-Shirt Size (Unisex)'), - FormFields.createTShirtSizePicker()]} + T-Shirt Size (Unisex) + {FormFields.createTShirtSizePicker()} @@ -227,10 +232,11 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createLabel('Have you taken an Advanced Data Structures ' + - '(CSE 100) or equivalent class?'), - FormFields.createRadio('classRequirement', true, 'Yes'), - FormFields.createRadio('classRequirement', false, 'No')]} + + Have you taken an Advanced Data Structures (CSE 100) or equivalent class? + + {FormFields.createRadio('classRequirement', true, 'Yes')} + {FormFields.createRadio('classRequirement', false, 'No')} } diff --git a/src/client/pages/ApplyPage/components/UserSection.tsx b/src/client/pages/ApplyPage/components/UserSection.tsx index e966364d..b9602b7d 100644 --- a/src/client/pages/ApplyPage/components/UserSection.tsx +++ b/src/client/pages/ApplyPage/components/UserSection.tsx @@ -3,7 +3,7 @@ import { Field, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; -import { ApplicationRow, ApplicationCol } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; interface UserSectionProps extends ApplyPageSectionProps { emailExists: boolean; @@ -58,12 +58,13 @@ class UserSection extends ApplyPageSection - {FormFields.createLabel(`I authorize you to share my - application/registration information for event administration, + + I authorize you to share my application/registration information for event administration, ranking, MLH administration, pre- and post-event informational e-mails, and occasional messages about hackathons in-line with the MLH Privacy Policy. I further I agree to the terms of both the MLH - Contest Terms and Conditions and the MLH Privacy Policy.`)} + Contest Terms and Conditions and the MLH Privacy Policy. + @@ -125,12 +126,12 @@ class UserSection extends ApplyPageSection - {[FormFields.createLabel('Password'), - FormFields.createInput('password', 'Password', 'password')]} + Password + {FormFields.createInput('password', 'Password', 'password')} - {[FormFields.createLabel('Confirm Password'), - FormFields.createInput('confirmPassword', 'Confirm Password', 'password')]} + Confirm Password + {FormFields.createInput('confirmPassword', 'Confirm Password', 'password')} } From 66671a6b810e1ff8681dce6526d64a6360e0693c Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 20:09:39 -0800 Subject: [PATCH 04/20] Removed createInput from ApplyPage --- src/client/components/Fields.tsx | 26 ++++++++++++++++ .../ApplyPage/components/PersonalSection.tsx | 30 +++++++++---------- .../ApplyPage/components/ResponseSection.tsx | 5 ++-- .../ApplyPage/components/UserSection.tsx | 6 ++-- 4 files changed, 47 insertions(+), 20 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index 8704f420..ba4800b9 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -20,9 +20,18 @@ type ApplicationLabelProps = { required?: boolean; className?: string; forTag?: string; + //hack? children?: string | JSX.Element[] | JSX.Element } +type ApplicationInputProps = { + className?: string; + name?: string; + placeholder?: string; + type?: string; + normalize?: (value: any, previousValue: any) => void = null; +} + /** * Defines all of the custom fields for the application. * Anything beginning with "error" contains a label which renders the error, and @@ -264,6 +273,23 @@ export function createLabel(text: string, required: boolean = true, className: s ); } +export const ApplicationInput: React.StatelessComponent = ({ + className, + name, + type, + normalize, + placeholder +}) => ( + +) + export function createInput(name: string, placeholder: string, type: string = 'text', className: string = 'sd-form__input-text', normalize: (value: any, previousValue: any) => void = null) { diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index 1a0944d2..046f2e50 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -7,7 +7,7 @@ import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; -import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -149,7 +149,7 @@ class PersonalSection extends ApplyPageSection High School - {FormFields.createInput('highSchool', 'High School')} + ); @@ -174,7 +174,7 @@ class PersonalSection extends ApplyPageSection Student PID - {FormFields.createInput('pid', 'AXXXXXXXX')} + ); @@ -208,7 +208,7 @@ class PersonalSection extends ApplyPageSection Grade Point Average (GPA) - FormFields.createInput('gpa', '4.00')]} + ); } @@ -217,7 +217,7 @@ class PersonalSection extends ApplyPageSection Major GPA - {FormFields.createInput('majorGPA', '4.00')} + ); } @@ -291,11 +291,11 @@ class PersonalSection extends ApplyPageSection First Name - {FormFields.createInput('firstName', 'First Name')} + Last Name - {FormFields.createInput('lastName', 'Last Name')} + @@ -312,12 +312,12 @@ class PersonalSection extends ApplyPageSection - {FormFields.createInput('birthdateDay', 'Day', 'number', - 'sd-form__input-text mb-1 mb-md-0')} + , - {FormFields.createInput('birthdateYear', 'Year', 'number', - 'sd-form__input-text')} + @@ -330,8 +330,8 @@ class PersonalSection extends ApplyPageSection Phone Number - {FormFields.createInput('phone', '555-555-5555', 'text', - 'sd-form__input-text', this.normalizePhone)} + @@ -342,11 +342,11 @@ class PersonalSection extends ApplyPageSection Github Username' - {FormFields.createInput('github', 'Github')} + Personal Website' - {FormFields.createInput('website', 'http://example.com/')} + diff --git a/src/client/pages/ApplyPage/components/ResponseSection.tsx b/src/client/pages/ApplyPage/components/ResponseSection.tsx index 627982f6..0bbf0c0e 100644 --- a/src/client/pages/ApplyPage/components/ResponseSection.tsx +++ b/src/client/pages/ApplyPage/components/ResponseSection.tsx @@ -8,7 +8,7 @@ import { createTeamCode } from '~/data/UserApi'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import TeamRegister, { JoinCreateTeamState, TeamRegisterProps } from './TeamRegister'; -import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; interface ResponseSectionProps extends ApplyPageSectionProps { } @@ -39,7 +39,7 @@ class ResponseSection extends ApplyPageSection If yes, from where? - {FormFields.createInput('city', 'Which city?')} + ); @@ -56,6 +56,7 @@ class ResponseSection extends ApplyPageSection inputField = FormFields.createInput; break; case QuestionType.QUESTION_CHECKBOX: diff --git a/src/client/pages/ApplyPage/components/UserSection.tsx b/src/client/pages/ApplyPage/components/UserSection.tsx index b9602b7d..fe8d581a 100644 --- a/src/client/pages/ApplyPage/components/UserSection.tsx +++ b/src/client/pages/ApplyPage/components/UserSection.tsx @@ -3,7 +3,7 @@ import { Field, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; -import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; interface UserSectionProps extends ApplyPageSectionProps { emailExists: boolean; @@ -127,11 +127,11 @@ class UserSection extends ApplyPageSection Password - {FormFields.createInput('password', 'Password', 'password')} + Confirm Password - {FormFields.createInput('confirmPassword', 'Confirm Password', 'password')} + } From 8f0fca392213453c45c31b6817d97999215ee55b Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 21:30:00 -0800 Subject: [PATCH 05/20] removed createTextArea and linter --- src/client/components/Fields.tsx | 60 ++++++++----- src/client/components/User.tsx | 6 +- src/client/data/AdminApi.ts | 2 +- src/client/layouts/sponsor.tsx | 4 +- .../pages/AdminsPage/components/AdminList.tsx | 14 ++-- .../ApplyPage/components/PersonalSection.tsx | 84 +++++++++---------- .../ApplyPage/components/ResponseSection.tsx | 56 ++++++------- .../ApplyPage/components/UserSection.tsx | 30 +++---- .../pages/UsersPage/components/UserList.tsx | 2 +- src/shared/QRCodes.ts | 6 +- 10 files changed, 141 insertions(+), 123 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index ba4800b9..088e2988 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -13,16 +13,16 @@ export type CustomFieldProps = WrappedFieldProps & { }; type ApplicationColProps = { - className?: string -} + className?: string; +}; type ApplicationLabelProps = { required?: boolean; className?: string; forTag?: string; - //hack? - children?: string | JSX.Element[] | JSX.Element -} + // hack? + children?: string | JSX.Element[] | JSX.Element; +}; type ApplicationInputProps = { className?: string; @@ -30,7 +30,14 @@ type ApplicationInputProps = { placeholder?: string; type?: string; normalize?: (value: any, previousValue: any) => void = null; -} +}; + +type ApplicationTextAreaProps = { + name?: string; + placeholder?: string; + maxLength?: number; + className?: string; +}; /** * Defines all of the custom fields for the application. @@ -50,13 +57,13 @@ export const ApplicationRow: FunctionComponent = (props) => (
{props.children}
-) +); export const ApplicationCol: FunctionComponent = (props) => (
{props.children}
-) +); export function createColumn(size: string, ...content: any[]) { return ( @@ -80,7 +87,7 @@ export function errorClass(className: string, touched: boolean, error: boolean) } export const errorTextInput: React.StatelessComponent = ({ input, className, placeholder, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return (
@@ -113,7 +120,7 @@ export const errorRadio: React.StatelessComponent = ({ input, }; export const errorTextArea: React.StatelessComponent = ({ input, className, placeholder, maxLength, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return (
@@ -129,7 +136,7 @@ export const errorTextArea: React.StatelessComponent = ({ inpu }; export const errorMonthPicker: React.StatelessComponent = ({ input, className, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); const months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', @@ -155,7 +162,7 @@ export const errorMonthPicker: React.StatelessComponent = ({ i }; export const errorTShirtSizePicker: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); const sizes = Object.values(UserShirtSizeOptions); const values = Object.keys(UserShirtSizeOptions); @@ -176,7 +183,7 @@ export const errorTShirtSizePicker: React.StatelessComponent = }; export const errorGenderPicker: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return ( @@ -195,7 +202,7 @@ export const errorGenderPicker: React.StatelessComponent = ({ }; export const errorDiversityOptions: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return ( @@ -214,7 +221,7 @@ export const errorDiversityOptions: React.StatelessComponent = }; export const errorYearPicker: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return ( @@ -233,7 +240,7 @@ export const errorYearPicker: React.StatelessComponent = ({ in }; export const errorMajorPicker: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return ( @@ -251,7 +258,7 @@ export const errorMajorPicker: React.StatelessComponent = ({ i ); }; -export const ApplicationLabel: FunctionComponent = +export const ApplicationLabel: FunctionComponent = ({required, className, forTag, children}) => ( -) +); export function createLabel(text: string, required: boolean = true, className: string = '', forTag: string = '') { @@ -278,9 +285,9 @@ export const ApplicationInput: React.StatelessComponent = name, type, normalize, - placeholder + placeholder, }) => ( - = normalize={normalize} placeholder={placeholder} /> -) +); export function createInput(name: string, placeholder: string, type: string = 'text', className: string = 'sd-form__input-text', @@ -305,6 +312,17 @@ export function createInput(name: string, placeholder: string, type: string = 't ); } +export const ApplicationTextArea: React.FunctionComponent = + ({className, name, maxLength, placeholder}) => ( + +); + export function createTextArea(name: string, placeholder: string, maxLength: number = null, className: string = 'sd-form__input-textarea') { return ( diff --git a/src/client/components/User.tsx b/src/client/components/User.tsx index b1d4ffcb..87ce6bb0 100644 --- a/src/client/components/User.tsx +++ b/src/client/components/User.tsx @@ -1,4 +1,5 @@ import { TESCUser, TESCEvent, Question } from '@Shared/ModelTypes'; +import { generateQRCodeURL } from '@Shared/QRCodes'; import { QuestionType } from '@Shared/Questions'; import { getRoleRank, Role } from '@Shared/Roles'; import { isAcceptableStatus, isRejectableStatus, isWaitlistableStatus, UserStatus } from '@Shared/UserStatus'; @@ -9,7 +10,6 @@ import { connect } from 'react-redux'; import { Field, reduxForm, InjectedFormProps } from 'redux-form'; import { sendAcceptanceEmail, sendRejectionEmail, sendWaitlistEmail } from '~/data/AdminApi'; import { ApplicationState } from '~/reducers'; -import { generateQRCodeURL } from '@Shared/QRCodes' import { AlertType } from '../pages/AlertPage'; @@ -114,7 +114,7 @@ class User extends React.Component { className="form-control" component="select" type={fieldType}> - + )}
@@ -343,7 +343,7 @@ class User extends React.Component { {this.renderFormCheckbox('Bussing', 'bussing', 'col-sm-4')} {this.renderFormCheckbox('Sanitized', 'sanitized', 'col-sm-4')} - {this.renderFormDropdown('Status', 'status', + {this.renderFormDropdown('Status', 'status', Object.values(UserStatus), 'col-sm-4')}
diff --git a/src/client/data/AdminApi.ts b/src/client/data/AdminApi.ts index 8b9658b9..75d882fc 100644 --- a/src/client/data/AdminApi.ts +++ b/src/client/data/AdminApi.ts @@ -224,7 +224,7 @@ export const downloadResumes = (applicants: string[]): SuperAgentRequest => .post('/resumes') .send({ applicants } as DownloadResumesRequest) .set('Authorization', cookies.get(CookieTypes.admin.token)) - .use(adminApiPrefix) + .use(adminApiPrefix); /** * Requests the status of an ongoing download. diff --git a/src/client/layouts/sponsor.tsx b/src/client/layouts/sponsor.tsx index 85d51ca5..7d796eb3 100644 --- a/src/client/layouts/sponsor.tsx +++ b/src/client/layouts/sponsor.tsx @@ -90,7 +90,7 @@ class SponsorLayout extends React.Component { const blob = new Blob([res.text], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); - + link.href = url; link.setAttribute('download', `${this.props.user.username}-${Date.now()}.csv`); document.body.appendChild(link); @@ -98,7 +98,7 @@ class SponsorLayout extends React.Component { hideLoading(); this.setState({ - isDownloading: false + isDownloading: false, }); }) .catch(console.error); diff --git a/src/client/pages/AdminsPage/components/AdminList.tsx b/src/client/pages/AdminsPage/components/AdminList.tsx index 31370393..772b1c14 100644 --- a/src/client/pages/AdminsPage/components/AdminList.tsx +++ b/src/client/pages/AdminsPage/components/AdminList.tsx @@ -24,7 +24,7 @@ export default class AdminList extends React.Component { const {columns} = this.state; - const adminToBeRendered = {...admin, - lastAccessed: admin.lastAccessed - ? moment(admin.lastAccessed).fromNow() - : 'Never Logged In' - } + const adminToBeRendered = {...admin, + lastAccessed: admin.lastAccessed + ? moment(admin.lastAccessed).fromNow() + : 'Never Logged In', + }; return Object.keys(columns).map(column => ( {/* @@ -58,7 +58,7 @@ export default class AdminList extends React.Component) - ) + ); } render() { diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index 046f2e50..dbed1f92 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -3,11 +3,11 @@ import { RegisterUserPersonalSectionRequest } from '@Shared/api/Requests'; import React from 'react'; import { Field, Fields, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; -import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -96,7 +96,7 @@ class PersonalSection extends ApplyPageSection - + {label} @@ -131,7 +131,7 @@ class PersonalSection extends ApplyPageSection - + University ( High School - + ); @@ -172,9 +172,9 @@ class PersonalSection extends ApplyPageSection - + Student PID - + ); @@ -189,11 +189,11 @@ class PersonalSection extends ApplyPageSection - + Major {FormFields.createMajorPicker()} - + Year in School {FormFields.createYearPicker()} @@ -206,18 +206,18 @@ class PersonalSection extends ApplyPageSection + Grade Point Average (GPA) - + ); } if (requireMajorGPA) { gpaFields.push( - + Major GPA - + ); } @@ -236,28 +236,28 @@ class PersonalSection extends ApplyPageSection - + Institution - + {this.createInstitutionCard(InstitutionType.UCSD, 'institution-ucsd', 'UCSD')} - + {this.createInstitutionCard(InstitutionType.University, 'institution-uni', 'Other University')} - {allowHighSchool && - + {allowHighSchool && + {this.createInstitutionCard(InstitutionType.HighSchool, 'institution-hs', 'High School')} } - - + + - + What is your race / ethnicity? @@ -291,47 +291,47 @@ class PersonalSection extends ApplyPageSection First Name - + Last Name - + - + Email {this.createEmailField()} - + Birthdate
{FormFields.createMonthPicker()} - - + + + + , + - , - -
- + Gender {FormFields.createGenderPicker()} - + Phone Number - + @@ -340,13 +340,13 @@ class PersonalSection extends ApplyPageSection - + Github Username' - + - + Personal Website' - + @@ -354,20 +354,20 @@ class PersonalSection extends ApplyPageSection - + Resume (5MB Max) {this.createResumeUpload()} - + {this.createShareCheckbox()} - + diff --git a/src/client/pages/ApplyPage/index.tsx b/src/client/pages/ApplyPage/index.tsx index 7132c91a..18488f4e 100644 --- a/src/client/pages/ApplyPage/index.tsx +++ b/src/client/pages/ApplyPage/index.tsx @@ -146,11 +146,6 @@ class ApplyPage extends React.Component { const {previewMode} = this.props; - if (previewMode) { - // TODO: show some kind of error to user here? - return; - } - values = this.sanitiseValues(values); this.setState({ @@ -285,6 +280,7 @@ class ApplyPage extends React.Component { validate={validator} event={event} emailExists={emailExists} + previewMode={previewMode} />} {page === 4 && } diff --git a/src/client/pages/EventPage/components/ViewApplication.tsx b/src/client/pages/EventPage/components/ViewApplication.tsx index f69cc854..f1e04508 100644 --- a/src/client/pages/EventPage/components/ViewApplication.tsx +++ b/src/client/pages/EventPage/components/ViewApplication.tsx @@ -8,7 +8,6 @@ type ViewApplicationProps = { class ViewApplication extends React.Component { - render() { const {event} = this.props; const isEventClosed = new Date(event.closeTime) < new Date From ef266cf9f733b1fa992f96ea02c72d3809901356 Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Fri, 24 Jan 2020 14:39:45 -0800 Subject: [PATCH 09/20] Added Help Tooltip To Preview --- .../components/PreviewApplication.tsx | 2 +- .../EventPage/components/ViewApplication.tsx | 21 +++++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/client/pages/EventPage/components/PreviewApplication.tsx b/src/client/pages/EventPage/components/PreviewApplication.tsx index 0b651f33..e8b73df7 100644 --- a/src/client/pages/EventPage/components/PreviewApplication.tsx +++ b/src/client/pages/EventPage/components/PreviewApplication.tsx @@ -8,7 +8,7 @@ class PreviewApplication extends React.Component { return ( <> - You are in preview mode. You will not be able to create an application + You are in preview mode. diff --git a/src/client/pages/EventPage/components/ViewApplication.tsx b/src/client/pages/EventPage/components/ViewApplication.tsx index f1e04508..af971097 100644 --- a/src/client/pages/EventPage/components/ViewApplication.tsx +++ b/src/client/pages/EventPage/components/ViewApplication.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { TESCEvent } from '@Shared/ModelTypes'; +import { UncontrolledTooltip } from 'reactstrap/lib/Uncontrolled'; +import FA from 'react-fontawesome'; type ViewApplicationProps = { event: TESCEvent @@ -16,9 +18,24 @@ class ViewApplication extends React.Component { {isEventClosed && - Preview Dummy Application + Preview Application + + + + + + This event is currently not accepting applications. + You can preview the form before making it public. + + } {!isEventClosed && Date: Sun, 26 Jan 2020 23:14:54 -0800 Subject: [PATCH 10/20] added button to export only emails --- src/client/data/AdminApi.ts | 7 ++-- .../pages/EventPage/tabs/ActionsTab.tsx | 29 +++++++++++++- .../api/controllers/admin/ExportController.ts | 5 ++- src/server/models/User.ts | 39 +++++++++++-------- src/shared/api/Requests.ts | 3 +- 5 files changed, 59 insertions(+), 24 deletions(-) diff --git a/src/client/data/AdminApi.ts b/src/client/data/AdminApi.ts index 8b9658b9..c65640b0 100644 --- a/src/client/data/AdminApi.ts +++ b/src/client/data/AdminApi.ts @@ -243,12 +243,13 @@ export const pollDownload = (downloadId: string) => * Requests the download of all users as a CSV file. Returned as a request since * it downloads a CSV blob. * @param {String} eventAlias The alias associated with the event. + * @param {boolean} emailsOnly True if only want to export emails. * @returns {Request} A request object not wrapped in a promise. */ -export const exportUsers = (eventAlias: string): SuperAgentRequest => +export const exportUsers = (eventAlias: string, emailsOnly: boolean): SuperAgentRequest => request .post(`/export/`) - .send({alias: eventAlias} as ExportUsersRequest) + .send({alias: eventAlias, emailsOnly: emailsOnly} as ExportUsersRequest) .set('Authorization', cookies.get(CookieTypes.admin.token)) .use(adminApiPrefix); @@ -423,4 +424,4 @@ export const sendWaitlistEmail = (user: TESCUser) => .send({ user } as StatusEmailRequest) .use(adminApiPrefix) .use(nocache) - ); + ); \ No newline at end of file diff --git a/src/client/pages/EventPage/tabs/ActionsTab.tsx b/src/client/pages/EventPage/tabs/ActionsTab.tsx index edf20b7b..1243591a 100644 --- a/src/client/pages/EventPage/tabs/ActionsTab.tsx +++ b/src/client/pages/EventPage/tabs/ActionsTab.tsx @@ -11,7 +11,23 @@ interface ActionsTabProps { export default class ActionsTab extends EventPageTab { exportUsers = () => { const eventAlias = this.props.event.alias; - exportUsers(eventAlias) + exportUsers(eventAlias, false) + .end((err, res) => { + // Download as file + const blob = new Blob([res.text], { type: 'text/csv;charset=utf-8;' }); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = url; + link.setAttribute('download', `${eventAlias}-${Date.now()}.csv`); + document.body.appendChild(link); + + link.click(); + }); + } + + exportEmails = () => { + const eventAlias = this.props.event.alias; + exportUsers(eventAlias, true) .end((err, res) => { // Download as file const blob = new Blob([res.text], { type: 'text/csv;charset=utf-8;' }); @@ -55,6 +71,15 @@ export default class ActionsTab extends EventPageTab { > Export All Users + + + Export User Emails + +
@@ -64,4 +89,4 @@ export default class ActionsTab extends EventPageTab {
); } -} +} \ No newline at end of file diff --git a/src/server/api/controllers/admin/ExportController.ts b/src/server/api/controllers/admin/ExportController.ts index b45474f0..b822d905 100644 --- a/src/server/api/controllers/admin/ExportController.ts +++ b/src/server/api/controllers/admin/ExportController.ts @@ -32,11 +32,12 @@ export class ExportController { } const eventUsers = await this.UserService.getAllUsersByEvent(event); - const flattenedUsers = eventUsers.map(user => user.csvFlatten()); + + var flattenedUsers = eventUsers.map(user => user.csvFlatten(false, body.emailsOnly)); const fileName = `${event.alias}-${moment().format()}.csv`; const csv = this.CSVService.parseJSONToCSV(flattenedUsers); response = this.CSVService.setJSONReturnHeaders(response, fileName); return response.send(csv); } -} +} \ No newline at end of file diff --git a/src/server/models/User.ts b/src/server/models/User.ts index 33e50855..bbab0d06 100644 --- a/src/server/models/User.ts +++ b/src/server/models/User.ts @@ -11,7 +11,8 @@ import { print } from 'util'; import { generateQRCodeURL } from '@Shared/QRCodes'; export type UserDocument = TESCUser & Document & { - csvFlatten: (isSponsor? : boolean) => any; + csvFlatten: (isSponsor? : boolean, emailsOnly? : boolean) => any; + //csvFlattenForEmails: () => any; attach: (name: string, options: any) => Promise; }; export type UserModel = Model; @@ -273,7 +274,7 @@ UserSchema.plugin(crate, { }, }); -UserSchema.method('csvFlatten', function (isSponsor = false) { +UserSchema.method('csvFlatten', function (isSponsor = false, emailsOnly = false) { // tslint:disable-next-line:no-invalid-this no-this-assignment const user = this; let autoFill = ['_id', 'firstName', 'lastName', 'email', 'birthdate', @@ -286,26 +287,32 @@ UserSchema.method('csvFlatten', function (isSponsor = false) { 'university', 'major', 'year', 'github', 'website', 'gpa', 'majorGPA']; } + if (emailsOnly) { + autoFill = ['firstName', 'lastName', 'email']; + } + let autoFilled: any = autoFill.reduce((acc, val) => { return Object.assign(acc, { [val]: user[val] }); }, {}); - autoFilled.outOfState = user.travel.outOfState; - autoFilled.city = user.travel.city; - autoFilled.resume = user.resume ? user.resume.url : ''; - autoFilled.email = user.account ? user.account.email : ''; - if (!isSponsor) { - autoFilled.whyEvent = user.whyEventResponse ? user.whyEventResponse : ''; - - if (user.customQuestionResponses) { - autoFilled = {...autoFilled, ...user.customQuestionResponses.toJSON()}; + if (!emailsOnly) { + autoFilled.outOfState = user.travel.outOfState; + autoFilled.city = user.travel.city; + autoFilled.resume = user.resume ? user.resume.url : ''; + + if (!isSponsor) { + autoFilled.whyEvent = user.whyEventResponse ? user.whyEventResponse : ''; + + if (user.customQuestionResponses) { + autoFilled = {...autoFilled, ...user.customQuestionResponses.toJSON()}; + } + + autoFilled.team = user.team ? user.team.code : ''; + + autoFilled.qrCode = generateQRCodeURL(user); } - - autoFilled.team = user.team ? user.team.code : ''; - - autoFilled.qrCode = generateQRCodeURL(user); } return autoFilled; @@ -326,4 +333,4 @@ export const EDITABLE_USER_FIELDS: string[] = Object.entries((UserSchema as any) EDITABLE_USER_FIELDS.push('resume'); export const RegisterModel = () => - Container.set('UserModel', model('User', UserSchema)); + Container.set('UserModel', model('User', UserSchema)); \ No newline at end of file diff --git a/src/shared/api/Requests.ts b/src/shared/api/Requests.ts index fb76ba90..73d5c774 100644 --- a/src/shared/api/Requests.ts +++ b/src/shared/api/Requests.ts @@ -48,6 +48,7 @@ export interface DownloadResumesRequest { export interface ExportUsersRequest { alias: string; + emailsOnly: boolean; } export interface ForgotPasswordRequest { @@ -140,4 +141,4 @@ export interface RSVPUserRequest { export interface StatusEmailRequest { user: TESCUser; -} +} \ No newline at end of file From cbf5f122b92c92e27a193c622b765e72200d8623 Mon Sep 17 00:00:00 2001 From: Lisa Luo Date: Sun, 26 Jan 2020 23:25:24 -0800 Subject: [PATCH 11/20] small fixes --- src/client/pages/EventPage/tabs/ActionsTab.tsx | 2 +- src/server/models/User.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/client/pages/EventPage/tabs/ActionsTab.tsx b/src/client/pages/EventPage/tabs/ActionsTab.tsx index 1243591a..b1887184 100644 --- a/src/client/pages/EventPage/tabs/ActionsTab.tsx +++ b/src/client/pages/EventPage/tabs/ActionsTab.tsx @@ -73,7 +73,7 @@ export default class ActionsTab extends EventPageTab { diff --git a/src/server/models/User.ts b/src/server/models/User.ts index bbab0d06..de3c23b8 100644 --- a/src/server/models/User.ts +++ b/src/server/models/User.ts @@ -12,7 +12,6 @@ import { generateQRCodeURL } from '@Shared/QRCodes'; export type UserDocument = TESCUser & Document & { csvFlatten: (isSponsor? : boolean, emailsOnly? : boolean) => any; - //csvFlattenForEmails: () => any; attach: (name: string, options: any) => Promise; }; export type UserModel = Model; From e5e16901a4250eda8764334042ba3a7361a8d316 Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 17:21:11 -0800 Subject: [PATCH 12/20] Remove createRow from ApplyPage --- src/client/components/Fields.tsx | 8 +- .../ApplyPage/components/PersonalSection.tsx | 123 ++++++++--------- .../ApplyPage/components/ResponseSection.tsx | 124 ++++++++++-------- .../ApplyPage/components/UserSection.tsx | 61 +++++---- 4 files changed, 171 insertions(+), 145 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index a6c9a354..00b2d448 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -1,5 +1,5 @@ import { UserDiversityOptions, UserYearOptions, UserGenderOptions, UserShirtSizeOptions } from '@Shared/UserEnums'; -import React from 'react'; +import React, { FunctionComponent } from 'react'; import { Field, WrappedFieldProps } from 'redux-form'; import majors from '~/static/Majors.json'; @@ -26,6 +26,12 @@ export function createRow(...content: any[]) { ); } +export const ApplicationRow: FunctionComponent = (props) => ( +
+ {props.children} +
+) + export function createColumn(size: string, ...content: any[]) { return (
diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index 19e46afe..cf398cf3 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -7,6 +7,7 @@ import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; +import { ApplicationRow } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -127,8 +128,8 @@ class PersonalSection extends ApplyPageSection + {FormFields.createColumn('col-sm-12', FormFields.createLabel('University'), ( ) - ) - ) + )} + ); } else if (value === InstitutionType.HighSchool) { return ( - FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('High School'), FormFields.createInput('highSchool', 'High School') - ) - ) + )} + ); } @@ -167,12 +168,14 @@ class PersonalSection extends ApplyPageSection; } - return (FormFields.createRow( - FormFields.createColumn('col', - FormFields.createLabel('Student PID'), - FormFields.createInput('pid', 'AXXXXXXXX') - ) - )); + return ( + + {FormFields.createColumn('col', + FormFields.createLabel('Student PID'), + FormFields.createInput('pid', 'AXXXXXXXX') + )} + + ); } showMajorYearBoxes(info: any) { @@ -183,16 +186,16 @@ class PersonalSection extends ApplyPageSection + {[FormFields.createColumn('col-lg-6', FormFields.createLabel('Major'), FormFields.createMajorPicker() ), FormFields.createColumn('col-lg-6', FormFields.createLabel('Year in School'), FormFields.createYearPicker() - ) - ) + )]} + ); } @@ -213,7 +216,7 @@ class PersonalSection extends ApplyPageSection{[...gpaFields]}; } /** @@ -226,8 +229,8 @@ class PersonalSection extends ApplyPageSection - {FormFields.createRow( - FormFields.createColumn('col-sm-12 no-margin-bottom', + + {[FormFields.createColumn('col-sm-12 no-margin-bottom', FormFields.createLabel('Institution') ), FormFields.createColumn('col-md', @@ -247,9 +250,8 @@ class PersonalSection extends ApplyPageSection - ) - )} - + )]} + @@ -257,11 +259,13 @@ class PersonalSection extends ApplyPageSection + {FormFields.createColumn('col-md-6', FormFields.createLabel('What is your race / ethnicity?'), FormFields.createDiversityOptions() - ))); + )} + ); } render() { @@ -270,25 +274,24 @@ class PersonalSection extends ApplyPageSection - {FormFields.createRow( - FormFields.createColumn('col-md-6', + + {[FormFields.createColumn('col-md-6', FormFields.createLabel('First Name'), FormFields.createInput('firstName', 'First Name') ), FormFields.createColumn('col-md-6', FormFields.createLabel('Last Name'), FormFields.createInput('lastName', 'Last Name') - ) - )} - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + )]} + + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('Email'), this.createEmailField() - ) - )} - - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + )} + + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('Birthdate'),
{FormFields.createColumn('col-sm-4', @@ -303,11 +306,11 @@ class PersonalSection extends ApplyPageSection - ) - )} + )} + - {FormFields.createRow( - FormFields.createColumn('col-md-6', + + {[FormFields.createColumn('col-md-6', FormFields.createLabel('Gender'), FormFields.createGenderPicker() ), @@ -315,42 +318,42 @@ class PersonalSection extends ApplyPageSection {this.renderInstitutionOptions(options.allowHighSchool)} - {FormFields.createRow( - FormFields.createColumn('col-lg-6', + + {[FormFields.createColumn('col-lg-6', FormFields.createLabel('Github Username', false), FormFields.createInput('github', 'Github') ), FormFields.createColumn('col-lg-6', FormFields.createLabel('Personal Website', false), FormFields.createInput('website', 'http://example.com/') - ) - )} + )]} + {this.createGPAFields(options.enableGPA, options.requireGPA, options.requireMajorGPA)} {options.requireDiversityOption && this.createDiversityOptions()} - {FormFields.createRow( - FormFields.createColumn('col-md-4 col-md-offset-4', + + {FormFields.createColumn('col-md-4 col-md-offset-4', FormFields.createLabel('Resume (5MB Max)', options.requireResume), this.createResumeUpload() - ) - )} + )} + - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {FormFields.createColumn('col-sm-12', this.createShareCheckbox() - ) - )} + )} + - {FormFields.createRow( - FormFields.createColumn('col-sm-12 text-right', + + {FormFields.createColumn('col-sm-12 text-right', - ) - )} + )} + ); } diff --git a/src/client/pages/ApplyPage/components/ResponseSection.tsx b/src/client/pages/ApplyPage/components/ResponseSection.tsx index 556baf3c..3296c174 100644 --- a/src/client/pages/ApplyPage/components/ResponseSection.tsx +++ b/src/client/pages/ApplyPage/components/ResponseSection.tsx @@ -8,6 +8,7 @@ import { createTeamCode } from '~/data/UserApi'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import TeamRegister, { JoinCreateTeamState, TeamRegisterProps } from './TeamRegister'; +import { ApplicationRow } from '~/components/Fields'; interface ResponseSectionProps extends ApplyPageSectionProps { } @@ -35,12 +36,12 @@ class ResponseSection extends ApplyPageSection + {FormFields.createColumn('col-lg-6', FormFields.createLabel('If yes, from where?', false), FormFields.createInput('city', 'Which city?') - ) - ) + )} + ); } return ; @@ -127,8 +128,8 @@ class ResponseSection extends ApplyPageSection - {FormFields.createRow( - FormFields.createColumn('col-sm-12 no-margin-bottom', + + {[FormFields.createColumn('col-sm-12 no-margin-bottom', FormFields.createLabel('Create or Join a Team') ), FormFields.createColumn('col-md', @@ -153,7 +154,8 @@ class ResponseSection extends ApplyPageSection createTeamCode(event._id), } as TeamRegisterProps} /> - )} + ]} + ); } @@ -164,20 +166,21 @@ class ResponseSection extends ApplyPageSection - {options.foodOption && FormFields.createRow( - FormFields.createColumn('col-sm-12', - FormFields.createLabel('What kind of food would you like to see ' + - 'at the hackathon?', false), - FormFields.createTextArea('food', 'Healthy Snacks and Drinks') - ) - )} + {options.foodOption && + + {FormFields.createColumn('col-sm-12', + FormFields.createLabel('What kind of food would you like to see ' + + 'at the hackathon?', false), + FormFields.createTextArea('food', 'Healthy Snacks and Drinks') + )} + } - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('Dietary Restrictions', false), FormFields.createTextArea('diet', 'Dietary Restrictions') - ) - )} + )} + {options.requireWhyThisEvent && FormFields.createColumn('col-sm-12', @@ -186,58 +189,69 @@ class ResponseSection extends ApplyPageSection + {FormFields.createColumn('col-lg-12', + FormFields.createLabel('I will be travelling from outside the ' + + 'San Diego county'), + FormFields.createRadio('outOfState', true, 'Yes'), + FormFields.createRadio('outOfState', false, 'No') + )} + + } {options.allowOutOfState && } - {options.requireExtraCurriculars && FormFields.createRow( - FormFields.createColumn('col-sm-12', + {options.requireExtraCurriculars && + + {FormFields.createColumn('col-sm-12', FormFields.createLabel('Please put down any extra curriculars or Student' + ' Organizations you are affiliated with', true), FormFields.createTextArea('extraCurriculars', 'Extra Curriculars') - ) - )} + )} + + } - {FormFields.createRow( - FormFields.createColumn('col-12', + + {FormFields.createColumn('col-12', FormFields.createLabel('T-Shirt Size (Unisex)'), FormFields.createTShirtSizePicker() - ) - )} + )} + - {customQuestions && FormFields.createRow( - this.renderCustomQuestions(customQuestions, - QuestionType.QUESTION_LONG))} + {customQuestions && + {this.renderCustomQuestions(customQuestions, + QuestionType.QUESTION_LONG)} + } - {options.requireClassRequirement && FormFields.createRow( - FormFields.createColumn('col-lg-12', - FormFields.createLabel('Have you taken an Advanced Data Structures ' + - '(CSE 100) or equivalent class?'), - FormFields.createRadio('classRequirement', true, 'Yes'), - FormFields.createRadio('classRequirement', false, 'No') - ) - )} + {options.requireClassRequirement && + + {FormFields.createColumn('col-lg-12', + FormFields.createLabel('Have you taken an Advanced Data Structures ' + + '(CSE 100) or equivalent class?'), + FormFields.createRadio('classRequirement', true, 'Yes'), + FormFields.createRadio('classRequirement', false, 'No') + )} + + } - {customQuestions && FormFields.createRow( - this.renderCustomQuestions(customQuestions, - QuestionType.QUESTION_SHORT))} + {customQuestions && + + {this.renderCustomQuestions(customQuestions, + QuestionType.QUESTION_SHORT)} + } - {customQuestions && FormFields.createRow( - this.renderCustomQuestions(customQuestions, - QuestionType.QUESTION_CHECKBOX))} + {customQuestions && + + {this.renderCustomQuestions(customQuestions, + QuestionType.QUESTION_CHECKBOX)} + } {options.allowTeammates && this.renderTeamOptions(this.state.teamState)} - {FormFields.createRow( - FormFields.createColumn('col-sm-12 col-md-4 text-center', + + {[FormFields.createColumn('col-sm-12 col-md-4 text-center', - ) - )} + )]} + ); } diff --git a/src/client/pages/ApplyPage/components/UserSection.tsx b/src/client/pages/ApplyPage/components/UserSection.tsx index 0c8d75de..c674dcc8 100644 --- a/src/client/pages/ApplyPage/components/UserSection.tsx +++ b/src/client/pages/ApplyPage/components/UserSection.tsx @@ -3,6 +3,7 @@ import { Field, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; +import { ApplicationRow } from '~/components/Fields'; interface UserSectionProps extends ApplyPageSectionProps { emailExists: boolean; @@ -56,19 +57,19 @@ class UserSection extends ApplyPageSection - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {FormFields.createColumn('col-sm-12', FormFields.createLabel(`I authorize you to share my application/registration information for event administration, ranking, MLH administration, pre- and post-event informational e-mails, and occasional messages about hackathons in-line with the MLH Privacy Policy. I further I agree to the terms of both the MLH Contest Terms and Conditions and the MLH Privacy Policy.`) - ) - )} + )} + - {FormFields.createRow( - FormFields.createColumn('col-sm-12', + + {[FormFields.createColumn('col-sm-12', this.createProvisionBox(), I agree to the  @@ -94,8 +95,8 @@ class UserSection extends ApplyPageSection - ) - )} + )]} + ); } @@ -106,19 +107,19 @@ class UserSection extends ApplyPageSection - {emailExists && FormFields.createRow( - FormFields.createColumn('col-sm-12 mt-4 text-center', + {emailExists && + {FormFields.createColumn('col-sm-12 mt-4 text-center',

You're Almost Done!

,
We see you already have a TESC Events account
We will link this application to that
- ) - )} + )} + } - {!emailExists && FormFields.createRow( - FormFields.createColumn('col-sm-12', + {!emailExists && + {[FormFields.createColumn('col-sm-12',

You're Almost Done!

,
To complete your application, please add a password @@ -131,13 +132,14 @@ class UserSection extends ApplyPageSection} {options.mlhProvisions && this.createMLHProvisions()} - {FormFields.createRow( - FormFields.createColumn('col-sm-12 col-md-4 text-center', + + {[ + FormFields.createColumn('col-sm-12 col-md-4 text-center', - ), - FormFields.createColumn('col-sm-12 col-md-8 text-right', + ), + FormFields.createColumn('col-sm-12 col-md-8 text-right', - ), - FormFields.createColumn('col-sm-12 col-md-4 text-center', + ), + FormFields.createColumn('col-sm-12 col-md-4 text-center', {isSubmitting && } - ) - )} - - {submitError && FormFields.createRow( - FormFields.createColumn('col-sm-12', + ) + ]} + + + {submitError && + {FormFields.createColumn('col-sm-12', // TODO: Handle special cases of submits - check to see if it actually is resume problems FormFields.createError(submitError.message) - ) - )} + )} + } ); } From 9eeed7f7055a3344730e9428b690f192a20829fe Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 18:13:08 -0800 Subject: [PATCH 13/20] Remove createCol from ApplyPage --- src/client/components/Fields.tsx | 10 + .../ApplyPage/components/PersonalSection.tsx | 219 ++++++++++-------- .../ApplyPage/components/ResponseSection.tsx | 113 +++++---- .../ApplyPage/components/UserSection.tsx | 117 +++++----- 4 files changed, 241 insertions(+), 218 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index 00b2d448..76733e80 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -12,6 +12,10 @@ export type CustomFieldProps = WrappedFieldProps & { maxLength?: number; }; +type ApplicationColProps = { + className?: string +} + /** * Defines all of the custom fields for the application. * Anything beginning with "error" contains a label which renders the error, and @@ -32,6 +36,12 @@ export const ApplicationRow: FunctionComponent = (props) => (
) +export const ApplicationCol: FunctionComponent = (props) => ( +
+ {props.children} +
+) + export function createColumn(size: string, ...content: any[]) { return (
diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index cf398cf3..3db94383 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -7,7 +7,7 @@ import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; -import { ApplicationRow } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -129,8 +129,8 @@ class PersonalSection extends ApplyPageSection - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('University'), + + {[FormFields.createLabel('University'), ( - ) - )} + )]} + ); } else if (value === InstitutionType.HighSchool) { return ( - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('High School'), - FormFields.createInput('highSchool', 'High School') - )} + + {[FormFields.createLabel('High School'), + FormFields.createInput('highSchool', 'High School') + ]} + ); } @@ -170,10 +171,10 @@ class PersonalSection extends ApplyPageSection - {FormFields.createColumn('col', - FormFields.createLabel('Student PID'), - FormFields.createInput('pid', 'AXXXXXXXX') - )} + + {[FormFields.createLabel('Student PID'), + FormFields.createInput('pid', 'AXXXXXXXX')]} + ); } @@ -187,14 +188,14 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createColumn('col-lg-6', - FormFields.createLabel('Major'), - FormFields.createMajorPicker() - ), - FormFields.createColumn('col-lg-6', - FormFields.createLabel('Year in School'), - FormFields.createYearPicker() - )]} + + {[FormFields.createLabel('Major'), + FormFields.createMajorPicker()]} + + + {[FormFields.createLabel('Year in School'), + FormFields.createYearPicker()]} + ); } @@ -203,17 +204,21 @@ class PersonalSection extends ApplyPageSection + {[FormFields.createLabel('Grade Point Average (GPA)', requireGPA), + FormFields.createInput('gpa', '4.00')]} + + ); } if (requireMajorGPA) { - gpaFields.push(FormFields.createColumn('col-lg-6', - FormFields.createLabel('Major GPA', true), - FormFields.createInput('majorGPA', '4.00') - )); + gpaFields.push( + + {[FormFields.createLabel('Major GPA', true), + FormFields.createInput('majorGPA', '4.00')]} + + ); } return {[...gpaFields]}; @@ -230,27 +235,33 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createColumn('col-sm-12 no-margin-bottom', - FormFields.createLabel('Institution') - ), - FormFields.createColumn('col-md', - this.createInstitutionCard(InstitutionType.UCSD, 'institution-ucsd', - 'UCSD') - ), - FormFields.createColumn('col-md', - this.createInstitutionCard(InstitutionType.University, 'institution-uni', - 'Other University') - ), - allowHighSchool ? FormFields.createColumn('col-md', - this.createInstitutionCard(InstitutionType.HighSchool, - 'institution-hs', 'High School') - ) : '', - FormFields.createColumn('col-sm-12', + + {FormFields.createLabel('Institution')} + + + + {this.createInstitutionCard(InstitutionType.UCSD, 'institution-ucsd', + 'UCSD')} + + + + {this.createInstitutionCard(InstitutionType.University, 'institution-uni', + 'Other University')} + + + {allowHighSchool && + + {this.createInstitutionCard(InstitutionType.HighSchool, + 'institution-hs', 'High School')} + + } + + - )]} + @@ -261,10 +272,11 @@ class PersonalSection extends ApplyPageSection - {FormFields.createColumn('col-md-6', - FormFields.createLabel('What is your race / ethnicity?'), + + {[FormFields.createLabel('What is your race / ethnicity?'), FormFields.createDiversityOptions() - )} + ]} + ); } @@ -275,50 +287,54 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createColumn('col-md-6', - FormFields.createLabel('First Name'), - FormFields.createInput('firstName', 'First Name') - ), - FormFields.createColumn('col-md-6', - FormFields.createLabel('Last Name'), - FormFields.createInput('lastName', 'Last Name') - )]} + + {[FormFields.createLabel('First Name'), + FormFields.createInput('firstName', 'First Name')]} + + + {[FormFields.createLabel('Last Name'), + FormFields.createInput('lastName', 'Last Name') + ]} + - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('Email'), - this.createEmailField() - )} + + {[FormFields.createLabel('Email'), + this.createEmailField() + ]} + - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('Birthdate'), -
- {FormFields.createColumn('col-sm-4', - FormFields.createMonthPicker() - )} - {FormFields.createColumn('col-sm-4', - FormFields.createInput('birthdateDay', 'Day', 'number', - 'sd-form__input-text mb-1 mb-md-0') - )} - {FormFields.createColumn('col-sm-4', - FormFields.createInput('birthdateYear', 'Year', 'number', - 'sd-form__input-text') - )} -
- )} + + {[FormFields.createLabel('Birthdate'), +
+ + {FormFields.createMonthPicker()} + + + {FormFields.createInput('birthdateDay', 'Day', 'number', + 'sd-form__input-text mb-1 mb-md-0')} + + , + {FormFields.createInput('birthdateYear', 'Year', 'number', + 'sd-form__input-text')} + +
+ ]} + - {[FormFields.createColumn('col-md-6', - FormFields.createLabel('Gender'), + + {[FormFields.createLabel('Gender'), FormFields.createGenderPicker() - ), - FormFields.createColumn('col-md-6', - FormFields.createLabel('Phone Number'), + ]} + + + {[FormFields.createLabel('Phone Number'), FormFields.createInput('phone', '555-555-5555', 'text', - 'sd-form__input-text', this.normalizePhone) - )]} + 'sd-form__input-text', this.normalizePhone)]} + {this.renderInstitutionOptions(options.allowHighSchool)} @@ -326,42 +342,43 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createColumn('col-lg-6', - FormFields.createLabel('Github Username', false), - FormFields.createInput('github', 'Github') - ), - FormFields.createColumn('col-lg-6', - FormFields.createLabel('Personal Website', false), + + {[ FormFields.createLabel('Github Username', false), + FormFields.createInput('github', 'Github')]} + + + {[FormFields.createLabel('Personal Website', false), FormFields.createInput('website', 'http://example.com/') - )]} + ]} + {this.createGPAFields(options.enableGPA, options.requireGPA, options.requireMajorGPA)} {options.requireDiversityOption && this.createDiversityOptions()} - {FormFields.createColumn('col-md-4 col-md-offset-4', - FormFields.createLabel('Resume (5MB Max)', options.requireResume), + + {[FormFields.createLabel('Resume (5MB Max)', options.requireResume), this.createResumeUpload() - )} + ]} + - {FormFields.createColumn('col-sm-12', - this.createShareCheckbox() - )} + + {this.createShareCheckbox()} + - {FormFields.createColumn('col-sm-12 text-right', + - )} + ); diff --git a/src/client/pages/ApplyPage/components/ResponseSection.tsx b/src/client/pages/ApplyPage/components/ResponseSection.tsx index 3296c174..f83847b8 100644 --- a/src/client/pages/ApplyPage/components/ResponseSection.tsx +++ b/src/client/pages/ApplyPage/components/ResponseSection.tsx @@ -8,7 +8,7 @@ import { createTeamCode } from '~/data/UserApi'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import TeamRegister, { JoinCreateTeamState, TeamRegisterProps } from './TeamRegister'; -import { ApplicationRow } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol } from '~/components/Fields'; interface ResponseSectionProps extends ApplyPageSectionProps { } @@ -37,10 +37,10 @@ class ResponseSection extends ApplyPageSection - {FormFields.createColumn('col-lg-6', - FormFields.createLabel('If yes, from where?', false), - FormFields.createInput('city', 'Which city?') - )} + + {[FormFields.createLabel('If yes, from where?', false), + FormFields.createInput('city', 'Which city?')]} + ); } @@ -67,11 +67,11 @@ class ResponseSection extends ApplyPageSection ( - FormFields.createColumn('col-sm-12', - FormFields.createLabel(x.question, x.isRequired), + + {[FormFields.createLabel(x.question, x.isRequired), inputField(`customQuestionResponses.${x._id}`, - 'Your Response...') - ) + 'Your Response...')]} + )); } @@ -129,23 +129,23 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createColumn('col-sm-12 no-margin-bottom', - FormFields.createLabel('Create or Join a Team') - ), - FormFields.createColumn('col-md', - this.createTeamStateCard(JoinCreateTeamState.CREATE, 'create-team', - 'Create') - ), - FormFields.createColumn('col-md', - this.createTeamStateCard(JoinCreateTeamState.JOIN, 'join-team', - 'Join') - ), - FormFields.createColumn('col-sm-12', + + {FormFields.createLabel('Create or Join a Team')} + + + {this.createTeamStateCard(JoinCreateTeamState.CREATE, 'create-team', + 'Create')} + + + {this.createTeamStateCard(JoinCreateTeamState.JOIN, 'join-team', + 'Join')} + + - ), + {options.foodOption && - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('What kind of food would you like to see ' + - 'at the hackathon?', false), - FormFields.createTextArea('food', 'Healthy Snacks and Drinks') - )} + + {[FormFields.createLabel('What kind of food would you like to see ' + + 'at the event?', false), + FormFields.createTextArea('food', 'Healthy Snacks and Drinks')]} + } - - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('Dietary Restrictions', false), - FormFields.createTextArea('diet', 'Dietary Restrictions') - )} + + {[FormFields.createLabel('Dietary Restrictions', false), + FormFields.createTextArea('diet', 'Dietary Restrictions')]} + {options.requireWhyThisEvent && - FormFields.createColumn('col-sm-12', - FormFields.createLabel(`Why Do You Want To Attend ${event.name}?`, true), - FormFields.createTextArea('whyEventResponse', 'Your Response...') - ) + + {[FormFields.createLabel(`Why Do You Want To Attend ${event.name}?`, true), + FormFields.createTextArea('whyEventResponse', 'Your Response...')]} + } {options.allowOutOfState && - {FormFields.createColumn('col-lg-12', - FormFields.createLabel('I will be travelling from outside the ' + + + {[FormFields.createLabel('I will be travelling from outside the ' + 'San Diego county'), FormFields.createRadio('outOfState', true, 'Yes'), - FormFields.createRadio('outOfState', false, 'No') - )} + FormFields.createRadio('outOfState', false, 'No')]} + } @@ -205,19 +204,19 @@ class ResponseSection extends ApplyPageSection - {FormFields.createColumn('col-sm-12', - FormFields.createLabel('Please put down any extra curriculars or Student' - + ' Organizations you are affiliated with', true), - FormFields.createTextArea('extraCurriculars', 'Extra Curriculars') - )} + + {[FormFields.createLabel('Please put down any extra curriculars or Student' + + ' Organizations you are affiliated with', true), + FormFields.createTextArea('extraCurriculars', 'Extra Curriculars')]} + } - {FormFields.createColumn('col-12', - FormFields.createLabel('T-Shirt Size (Unisex)'), - FormFields.createTShirtSizePicker() - )} + + {[FormFields.createLabel('T-Shirt Size (Unisex)'), + FormFields.createTShirtSizePicker()]} + {customQuestions && @@ -227,12 +226,12 @@ class ResponseSection extends ApplyPageSection - {FormFields.createColumn('col-lg-12', - FormFields.createLabel('Have you taken an Advanced Data Structures ' + + + {[FormFields.createLabel('Have you taken an Advanced Data Structures ' + '(CSE 100) or equivalent class?'), FormFields.createRadio('classRequirement', true, 'Yes'), - FormFields.createRadio('classRequirement', false, 'No') - )} + FormFields.createRadio('classRequirement', false, 'No')]} + } @@ -251,7 +250,7 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createColumn('col-sm-12 col-md-4 text-center', + - ), - FormFields.createColumn('col-sm-12 col-md-8 text-right', + + - )]} + ); diff --git a/src/client/pages/ApplyPage/components/UserSection.tsx b/src/client/pages/ApplyPage/components/UserSection.tsx index c674dcc8..66b0f457 100644 --- a/src/client/pages/ApplyPage/components/UserSection.tsx +++ b/src/client/pages/ApplyPage/components/UserSection.tsx @@ -3,7 +3,7 @@ import { Field, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; -import { ApplicationRow } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol } from '~/components/Fields'; interface UserSectionProps extends ApplyPageSectionProps { emailExists: boolean; @@ -58,19 +58,19 @@ class UserSection extends ApplyPageSection - {FormFields.createColumn('col-sm-12', - FormFields.createLabel(`I authorize you to share my + + {FormFields.createLabel(`I authorize you to share my application/registration information for event administration, ranking, MLH administration, pre- and post-event informational e-mails, and occasional messages about hackathons in-line with the MLH Privacy Policy. I further I agree to the terms of both the MLH - Contest Terms and Conditions and the MLH Privacy Policy.`) - )} + Contest Terms and Conditions and the MLH Privacy Policy.`)} + - {[FormFields.createColumn('col-sm-12', - this.createProvisionBox(), + + {[this.createProvisionBox(), I agree to the  MLH Data Sharing Policy . - - ), - FormFields.createColumn('col-sm-12', - this.createAcceptBox(), + ]} + + + {[this.createAcceptBox(), I have read and agree to the  MLH Code of Conduct - - )]} + ]} + ); @@ -108,72 +108,69 @@ class UserSection extends ApplyPageSection {emailExists && - {FormFields.createColumn('col-sm-12 mt-4 text-center', +

You're Almost Done!

,
We see you already have a TESC Events account
We will link this application to that -
- )} + + } {!emailExists && - {[FormFields.createColumn('col-sm-12', +

You're Almost Done!

,
To complete your application, please add a password -
- ), - FormFields.createColumn('col-md-6', - FormFields.createLabel('Password'), - FormFields.createInput('password', 'Password', 'password') - ), - FormFields.createColumn('col-md-6', - FormFields.createLabel('Confirm Password'), - FormFields.createInput('confirmPassword', 'Confirm Password', 'password') - )]} + + + + {[FormFields.createLabel('Password'), + FormFields.createInput('password', 'Password', 'password')]} + + + {[FormFields.createLabel('Confirm Password'), + FormFields.createInput('confirmPassword', 'Confirm Password', 'password')]} + } {options.mlhProvisions && this.createMLHProvisions()} - {[ - FormFields.createColumn('col-sm-12 col-md-4 text-center', - - ), - FormFields.createColumn('col-sm-12 col-md-8 text-right', - - ), - FormFields.createColumn('col-sm-12 col-md-4 text-center', - - {isSubmitting && } - - ) - ]} + + + + + + + + + {isSubmitting && } + + {submitError && - {FormFields.createColumn('col-sm-12', - // TODO: Handle special cases of submits - check to see if it actually is resume problems - FormFields.createError(submitError.message) - )} + + {FormFields.createError(submitError.message)} + } ); From 2e630f0ff227f15140c72fba224b23c989d4f174 Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 19:35:46 -0800 Subject: [PATCH 14/20] Remove createLabel from ApplyPage --- src/client/components/Fields.tsx | 17 +++ .../ApplyPage/components/PersonalSection.tsx | 110 +++++++++--------- .../ApplyPage/components/ResponseSection.tsx | 62 +++++----- .../ApplyPage/components/UserSection.tsx | 17 +-- 4 files changed, 113 insertions(+), 93 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index 76733e80..8704f420 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -16,6 +16,13 @@ type ApplicationColProps = { className?: string } +type ApplicationLabelProps = { + required?: boolean; + className?: string; + forTag?: string; + children?: string | JSX.Element[] | JSX.Element +} + /** * Defines all of the custom fields for the application. * Anything beginning with "error" contains a label which renders the error, and @@ -235,6 +242,16 @@ export const errorMajorPicker: React.StatelessComponent = ({ i ); }; +export const ApplicationLabel: FunctionComponent = + ({required, className, forTag, children}) => ( + +) + export function createLabel(text: string, required: boolean = true, className: string = '', forTag: string = '') { return ( diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index 3db94383..1a0944d2 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -7,7 +7,7 @@ import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; -import { ApplicationRow, ApplicationCol } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -96,7 +96,9 @@ class PersonalSection extends ApplyPageSection - {FormFields.createLabel(label, false, 'sd-form__institution-label', id)} + + {label} +
); } @@ -130,7 +132,7 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('University'), + University ( - {[FormFields.createLabel('High School'), - FormFields.createInput('highSchool', 'High School') - ]} + High School + {FormFields.createInput('highSchool', 'High School')} ); @@ -172,8 +173,8 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Student PID'), - FormFields.createInput('pid', 'AXXXXXXXX')]} + Student PID + {FormFields.createInput('pid', 'AXXXXXXXX')} ); @@ -189,12 +190,12 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Major'), - FormFields.createMajorPicker()]} + Major + {FormFields.createMajorPicker()} - {[FormFields.createLabel('Year in School'), - FormFields.createYearPicker()]} + Year in School + {FormFields.createYearPicker()} ); @@ -206,7 +207,7 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Grade Point Average (GPA)', requireGPA), + Grade Point Average (GPA) FormFields.createInput('gpa', '4.00')]} ); @@ -215,8 +216,8 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Major GPA', true), - FormFields.createInput('majorGPA', '4.00')]} + Major GPA + {FormFields.createInput('majorGPA', '4.00')} ); } @@ -236,7 +237,7 @@ class PersonalSection extends ApplyPageSection - {FormFields.createLabel('Institution')} + Institution @@ -273,11 +274,12 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('What is your race / ethnicity?'), - FormFields.createDiversityOptions() - ]} + + What is your race / ethnicity? + + {FormFields.createDiversityOptions()} - ); + ); } render() { @@ -288,52 +290,48 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('First Name'), - FormFields.createInput('firstName', 'First Name')]} + First Name + {FormFields.createInput('firstName', 'First Name')} - {[FormFields.createLabel('Last Name'), - FormFields.createInput('lastName', 'Last Name') - ]} + Last Name + {FormFields.createInput('lastName', 'Last Name')} - {[FormFields.createLabel('Email'), - this.createEmailField() - ]} + Email + {this.createEmailField()} - {[FormFields.createLabel('Birthdate'), -
- - {FormFields.createMonthPicker()} - - - {FormFields.createInput('birthdateDay', 'Day', 'number', - 'sd-form__input-text mb-1 mb-md-0')} - - , - {FormFields.createInput('birthdateYear', 'Year', 'number', - 'sd-form__input-text')} - -
- ]} + Birthdate +
+ + {FormFields.createMonthPicker()} + + + {FormFields.createInput('birthdateDay', 'Day', 'number', + 'sd-form__input-text mb-1 mb-md-0')} + + , + {FormFields.createInput('birthdateYear', 'Year', 'number', + 'sd-form__input-text')} + +
- {[FormFields.createLabel('Gender'), - FormFields.createGenderPicker() - ]} + Gender + {FormFields.createGenderPicker()} - {[FormFields.createLabel('Phone Number'), - FormFields.createInput('phone', '555-555-5555', 'text', - 'sd-form__input-text', this.normalizePhone)]} + Phone Number + {FormFields.createInput('phone', '555-555-5555', 'text', + 'sd-form__input-text', this.normalizePhone)} @@ -343,13 +341,12 @@ class PersonalSection extends ApplyPageSection - {[ FormFields.createLabel('Github Username', false), - FormFields.createInput('github', 'Github')]} + Github Username' + {FormFields.createInput('github', 'Github')} - {[FormFields.createLabel('Personal Website', false), - FormFields.createInput('website', 'http://example.com/') - ]} + Personal Website' + {FormFields.createInput('website', 'http://example.com/')} @@ -358,9 +355,8 @@ class PersonalSection extends ApplyPageSection - {[FormFields.createLabel('Resume (5MB Max)', options.requireResume), - this.createResumeUpload() - ]} + Resume (5MB Max) + {this.createResumeUpload()} diff --git a/src/client/pages/ApplyPage/components/ResponseSection.tsx b/src/client/pages/ApplyPage/components/ResponseSection.tsx index f83847b8..627982f6 100644 --- a/src/client/pages/ApplyPage/components/ResponseSection.tsx +++ b/src/client/pages/ApplyPage/components/ResponseSection.tsx @@ -8,7 +8,7 @@ import { createTeamCode } from '~/data/UserApi'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import TeamRegister, { JoinCreateTeamState, TeamRegisterProps } from './TeamRegister'; -import { ApplicationRow, ApplicationCol } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; interface ResponseSectionProps extends ApplyPageSectionProps { } @@ -38,8 +38,8 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createLabel('If yes, from where?', false), - FormFields.createInput('city', 'Which city?')]} + If yes, from where? + {FormFields.createInput('city', 'Which city?')} ); @@ -68,9 +68,9 @@ class ResponseSection extends ApplyPageSection ( - {[FormFields.createLabel(x.question, x.isRequired), - inputField(`customQuestionResponses.${x._id}`, - 'Your Response...')]} + {x.question} + {inputField(`customQuestionResponses.${x._id}`, + 'Your Response...')} )); } @@ -100,7 +100,9 @@ class ResponseSection extends ApplyPageSection - {FormFields.createLabel(label, false, 'sd-form__team-label', id)} + + {label} +
); } @@ -130,7 +132,7 @@ class ResponseSection extends ApplyPageSection - {FormFields.createLabel('Create or Join a Team')} + Create or Join a Team {this.createTeamStateCard(JoinCreateTeamState.CREATE, 'create-team', @@ -169,32 +171,34 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createLabel('What kind of food would you like to see ' + - 'at the event?', false), - FormFields.createTextArea('food', 'Healthy Snacks and Drinks')]} + + What kind of food would you like to see at the event? + + {FormFields.createTextArea('food', 'Healthy Snacks and Drinks')} } - {[FormFields.createLabel('Dietary Restrictions', false), - FormFields.createTextArea('diet', 'Dietary Restrictions')]} + Dietary Restrictions + {FormFields.createTextArea('diet', 'Dietary Restrictions')} {options.requireWhyThisEvent && - {[FormFields.createLabel(`Why Do You Want To Attend ${event.name}?`, true), - FormFields.createTextArea('whyEventResponse', 'Your Response...')]} + + <>Why Do You Want To Attend {event.name}? + + {FormFields.createTextArea('whyEventResponse', 'Your Response...')} } {options.allowOutOfState && - {[FormFields.createLabel('I will be travelling from outside the ' + - 'San Diego county'), - FormFields.createRadio('outOfState', true, 'Yes'), - FormFields.createRadio('outOfState', false, 'No')]} + I will be travelling from outside the San Diego county + {FormFields.createRadio('outOfState', true, 'Yes')} + {FormFields.createRadio('outOfState', false, 'No')}} } @@ -205,17 +209,18 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createLabel('Please put down any extra curriculars or Student' - + ' Organizations you are affiliated with', true), - FormFields.createTextArea('extraCurriculars', 'Extra Curriculars')]} + + Please put down any extra curriculars or Student Organizations you are affiliated with + + {FormFields.createTextArea('extraCurriculars', 'Extra Curriculars')} } - {[FormFields.createLabel('T-Shirt Size (Unisex)'), - FormFields.createTShirtSizePicker()]} + T-Shirt Size (Unisex) + {FormFields.createTShirtSizePicker()} @@ -227,10 +232,11 @@ class ResponseSection extends ApplyPageSection - {[FormFields.createLabel('Have you taken an Advanced Data Structures ' + - '(CSE 100) or equivalent class?'), - FormFields.createRadio('classRequirement', true, 'Yes'), - FormFields.createRadio('classRequirement', false, 'No')]} + + Have you taken an Advanced Data Structures (CSE 100) or equivalent class? + + {FormFields.createRadio('classRequirement', true, 'Yes')} + {FormFields.createRadio('classRequirement', false, 'No')} } diff --git a/src/client/pages/ApplyPage/components/UserSection.tsx b/src/client/pages/ApplyPage/components/UserSection.tsx index 66b0f457..512691dc 100644 --- a/src/client/pages/ApplyPage/components/UserSection.tsx +++ b/src/client/pages/ApplyPage/components/UserSection.tsx @@ -3,7 +3,7 @@ import { Field, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; -import { ApplicationRow, ApplicationCol } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; interface UserSectionProps extends ApplyPageSectionProps { emailExists: boolean; @@ -59,12 +59,13 @@ class UserSection extends ApplyPageSection - {FormFields.createLabel(`I authorize you to share my - application/registration information for event administration, + + I authorize you to share my application/registration information for event administration, ranking, MLH administration, pre- and post-event informational e-mails, and occasional messages about hackathons in-line with the MLH Privacy Policy. I further I agree to the terms of both the MLH - Contest Terms and Conditions and the MLH Privacy Policy.`)} + Contest Terms and Conditions and the MLH Privacy Policy. + @@ -126,12 +127,12 @@ class UserSection extends ApplyPageSection - {[FormFields.createLabel('Password'), - FormFields.createInput('password', 'Password', 'password')]} + Password + {FormFields.createInput('password', 'Password', 'password')} - {[FormFields.createLabel('Confirm Password'), - FormFields.createInput('confirmPassword', 'Confirm Password', 'password')]} + Confirm Password + {FormFields.createInput('confirmPassword', 'Confirm Password', 'password')} } From c23254791d6da73d7e94b8bea819607c80030242 Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 20:09:39 -0800 Subject: [PATCH 15/20] Removed createInput from ApplyPage --- src/client/components/Fields.tsx | 26 ++++++++++++++++ .../ApplyPage/components/PersonalSection.tsx | 30 +++++++++---------- .../ApplyPage/components/ResponseSection.tsx | 5 ++-- .../ApplyPage/components/UserSection.tsx | 6 ++-- 4 files changed, 47 insertions(+), 20 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index 8704f420..ba4800b9 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -20,9 +20,18 @@ type ApplicationLabelProps = { required?: boolean; className?: string; forTag?: string; + //hack? children?: string | JSX.Element[] | JSX.Element } +type ApplicationInputProps = { + className?: string; + name?: string; + placeholder?: string; + type?: string; + normalize?: (value: any, previousValue: any) => void = null; +} + /** * Defines all of the custom fields for the application. * Anything beginning with "error" contains a label which renders the error, and @@ -264,6 +273,23 @@ export function createLabel(text: string, required: boolean = true, className: s ); } +export const ApplicationInput: React.StatelessComponent = ({ + className, + name, + type, + normalize, + placeholder +}) => ( + +) + export function createInput(name: string, placeholder: string, type: string = 'text', className: string = 'sd-form__input-text', normalize: (value: any, previousValue: any) => void = null) { diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index 1a0944d2..046f2e50 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -7,7 +7,7 @@ import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; -import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -149,7 +149,7 @@ class PersonalSection extends ApplyPageSection High School - {FormFields.createInput('highSchool', 'High School')} + ); @@ -174,7 +174,7 @@ class PersonalSection extends ApplyPageSection Student PID - {FormFields.createInput('pid', 'AXXXXXXXX')} + ); @@ -208,7 +208,7 @@ class PersonalSection extends ApplyPageSection Grade Point Average (GPA) - FormFields.createInput('gpa', '4.00')]} + ); } @@ -217,7 +217,7 @@ class PersonalSection extends ApplyPageSection Major GPA - {FormFields.createInput('majorGPA', '4.00')} + ); } @@ -291,11 +291,11 @@ class PersonalSection extends ApplyPageSection First Name - {FormFields.createInput('firstName', 'First Name')} + Last Name - {FormFields.createInput('lastName', 'Last Name')} + @@ -312,12 +312,12 @@ class PersonalSection extends ApplyPageSection - {FormFields.createInput('birthdateDay', 'Day', 'number', - 'sd-form__input-text mb-1 mb-md-0')} + , - {FormFields.createInput('birthdateYear', 'Year', 'number', - 'sd-form__input-text')} + @@ -330,8 +330,8 @@ class PersonalSection extends ApplyPageSection Phone Number - {FormFields.createInput('phone', '555-555-5555', 'text', - 'sd-form__input-text', this.normalizePhone)} + @@ -342,11 +342,11 @@ class PersonalSection extends ApplyPageSection Github Username' - {FormFields.createInput('github', 'Github')} + Personal Website' - {FormFields.createInput('website', 'http://example.com/')} + diff --git a/src/client/pages/ApplyPage/components/ResponseSection.tsx b/src/client/pages/ApplyPage/components/ResponseSection.tsx index 627982f6..0bbf0c0e 100644 --- a/src/client/pages/ApplyPage/components/ResponseSection.tsx +++ b/src/client/pages/ApplyPage/components/ResponseSection.tsx @@ -8,7 +8,7 @@ import { createTeamCode } from '~/data/UserApi'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import TeamRegister, { JoinCreateTeamState, TeamRegisterProps } from './TeamRegister'; -import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; interface ResponseSectionProps extends ApplyPageSectionProps { } @@ -39,7 +39,7 @@ class ResponseSection extends ApplyPageSection If yes, from where? - {FormFields.createInput('city', 'Which city?')} + ); @@ -56,6 +56,7 @@ class ResponseSection extends ApplyPageSection inputField = FormFields.createInput; break; case QuestionType.QUESTION_CHECKBOX: diff --git a/src/client/pages/ApplyPage/components/UserSection.tsx b/src/client/pages/ApplyPage/components/UserSection.tsx index 512691dc..a12d456b 100644 --- a/src/client/pages/ApplyPage/components/UserSection.tsx +++ b/src/client/pages/ApplyPage/components/UserSection.tsx @@ -3,7 +3,7 @@ import { Field, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; -import { ApplicationRow, ApplicationCol, ApplicationLabel } from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; interface UserSectionProps extends ApplyPageSectionProps { emailExists: boolean; @@ -128,11 +128,11 @@ class UserSection extends ApplyPageSection Password - {FormFields.createInput('password', 'Password', 'password')} + Confirm Password - {FormFields.createInput('confirmPassword', 'Confirm Password', 'password')} + } From 1a9fb464f543e4b8589ca6f13998c5b80393710c Mon Sep 17 00:00:00 2001 From: Subhankar Panda Date: Tue, 21 Jan 2020 21:30:00 -0800 Subject: [PATCH 16/20] removed createTextArea and linter --- src/client/components/Fields.tsx | 60 ++++++++----- src/client/components/User.tsx | 6 +- src/client/data/AdminApi.ts | 2 +- src/client/layouts/sponsor.tsx | 4 +- .../pages/AdminsPage/components/AdminList.tsx | 14 ++-- .../ApplyPage/components/PersonalSection.tsx | 84 +++++++++---------- .../ApplyPage/components/ResponseSection.tsx | 56 ++++++------- .../ApplyPage/components/UserSection.tsx | 30 +++---- .../pages/UsersPage/components/UserList.tsx | 2 +- src/shared/QRCodes.ts | 6 +- 10 files changed, 141 insertions(+), 123 deletions(-) diff --git a/src/client/components/Fields.tsx b/src/client/components/Fields.tsx index ba4800b9..088e2988 100644 --- a/src/client/components/Fields.tsx +++ b/src/client/components/Fields.tsx @@ -13,16 +13,16 @@ export type CustomFieldProps = WrappedFieldProps & { }; type ApplicationColProps = { - className?: string -} + className?: string; +}; type ApplicationLabelProps = { required?: boolean; className?: string; forTag?: string; - //hack? - children?: string | JSX.Element[] | JSX.Element -} + // hack? + children?: string | JSX.Element[] | JSX.Element; +}; type ApplicationInputProps = { className?: string; @@ -30,7 +30,14 @@ type ApplicationInputProps = { placeholder?: string; type?: string; normalize?: (value: any, previousValue: any) => void = null; -} +}; + +type ApplicationTextAreaProps = { + name?: string; + placeholder?: string; + maxLength?: number; + className?: string; +}; /** * Defines all of the custom fields for the application. @@ -50,13 +57,13 @@ export const ApplicationRow: FunctionComponent = (props) => (
{props.children}
-) +); export const ApplicationCol: FunctionComponent = (props) => (
{props.children}
-) +); export function createColumn(size: string, ...content: any[]) { return ( @@ -80,7 +87,7 @@ export function errorClass(className: string, touched: boolean, error: boolean) } export const errorTextInput: React.StatelessComponent = ({ input, className, placeholder, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return (
@@ -113,7 +120,7 @@ export const errorRadio: React.StatelessComponent = ({ input, }; export const errorTextArea: React.StatelessComponent = ({ input, className, placeholder, maxLength, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return (
@@ -129,7 +136,7 @@ export const errorTextArea: React.StatelessComponent = ({ inpu }; export const errorMonthPicker: React.StatelessComponent = ({ input, className, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); const months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', @@ -155,7 +162,7 @@ export const errorMonthPicker: React.StatelessComponent = ({ i }; export const errorTShirtSizePicker: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); const sizes = Object.values(UserShirtSizeOptions); const values = Object.keys(UserShirtSizeOptions); @@ -176,7 +183,7 @@ export const errorTShirtSizePicker: React.StatelessComponent = }; export const errorGenderPicker: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return ( @@ -195,7 +202,7 @@ export const errorGenderPicker: React.StatelessComponent = ({ }; export const errorDiversityOptions: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return ( @@ -214,7 +221,7 @@ export const errorDiversityOptions: React.StatelessComponent = }; export const errorYearPicker: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return ( @@ -233,7 +240,7 @@ export const errorYearPicker: React.StatelessComponent = ({ in }; export const errorMajorPicker: React.StatelessComponent = ({ input, className, type, - meta: { touched, error } }) => { + meta: { touched, error } }) => { const errorClassName = errorClass(className, touched, error); return ( @@ -251,7 +258,7 @@ export const errorMajorPicker: React.StatelessComponent = ({ i ); }; -export const ApplicationLabel: FunctionComponent = +export const ApplicationLabel: FunctionComponent = ({required, className, forTag, children}) => ( -) +); export function createLabel(text: string, required: boolean = true, className: string = '', forTag: string = '') { @@ -278,9 +285,9 @@ export const ApplicationInput: React.StatelessComponent = name, type, normalize, - placeholder + placeholder, }) => ( - = normalize={normalize} placeholder={placeholder} /> -) +); export function createInput(name: string, placeholder: string, type: string = 'text', className: string = 'sd-form__input-text', @@ -305,6 +312,17 @@ export function createInput(name: string, placeholder: string, type: string = 't ); } +export const ApplicationTextArea: React.FunctionComponent = + ({className, name, maxLength, placeholder}) => ( + +); + export function createTextArea(name: string, placeholder: string, maxLength: number = null, className: string = 'sd-form__input-textarea') { return ( diff --git a/src/client/components/User.tsx b/src/client/components/User.tsx index b1d4ffcb..87ce6bb0 100644 --- a/src/client/components/User.tsx +++ b/src/client/components/User.tsx @@ -1,4 +1,5 @@ import { TESCUser, TESCEvent, Question } from '@Shared/ModelTypes'; +import { generateQRCodeURL } from '@Shared/QRCodes'; import { QuestionType } from '@Shared/Questions'; import { getRoleRank, Role } from '@Shared/Roles'; import { isAcceptableStatus, isRejectableStatus, isWaitlistableStatus, UserStatus } from '@Shared/UserStatus'; @@ -9,7 +10,6 @@ import { connect } from 'react-redux'; import { Field, reduxForm, InjectedFormProps } from 'redux-form'; import { sendAcceptanceEmail, sendRejectionEmail, sendWaitlistEmail } from '~/data/AdminApi'; import { ApplicationState } from '~/reducers'; -import { generateQRCodeURL } from '@Shared/QRCodes' import { AlertType } from '../pages/AlertPage'; @@ -114,7 +114,7 @@ class User extends React.Component { className="form-control" component="select" type={fieldType}> - + )}
@@ -343,7 +343,7 @@ class User extends React.Component { {this.renderFormCheckbox('Bussing', 'bussing', 'col-sm-4')} {this.renderFormCheckbox('Sanitized', 'sanitized', 'col-sm-4')} - {this.renderFormDropdown('Status', 'status', + {this.renderFormDropdown('Status', 'status', Object.values(UserStatus), 'col-sm-4')}
diff --git a/src/client/data/AdminApi.ts b/src/client/data/AdminApi.ts index c65640b0..bc9e6a19 100644 --- a/src/client/data/AdminApi.ts +++ b/src/client/data/AdminApi.ts @@ -224,7 +224,7 @@ export const downloadResumes = (applicants: string[]): SuperAgentRequest => .post('/resumes') .send({ applicants } as DownloadResumesRequest) .set('Authorization', cookies.get(CookieTypes.admin.token)) - .use(adminApiPrefix) + .use(adminApiPrefix); /** * Requests the status of an ongoing download. diff --git a/src/client/layouts/sponsor.tsx b/src/client/layouts/sponsor.tsx index 85d51ca5..7d796eb3 100644 --- a/src/client/layouts/sponsor.tsx +++ b/src/client/layouts/sponsor.tsx @@ -90,7 +90,7 @@ class SponsorLayout extends React.Component { const blob = new Blob([res.text], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); - + link.href = url; link.setAttribute('download', `${this.props.user.username}-${Date.now()}.csv`); document.body.appendChild(link); @@ -98,7 +98,7 @@ class SponsorLayout extends React.Component { hideLoading(); this.setState({ - isDownloading: false + isDownloading: false, }); }) .catch(console.error); diff --git a/src/client/pages/AdminsPage/components/AdminList.tsx b/src/client/pages/AdminsPage/components/AdminList.tsx index 31370393..772b1c14 100644 --- a/src/client/pages/AdminsPage/components/AdminList.tsx +++ b/src/client/pages/AdminsPage/components/AdminList.tsx @@ -24,7 +24,7 @@ export default class AdminList extends React.Component { const {columns} = this.state; - const adminToBeRendered = {...admin, - lastAccessed: admin.lastAccessed - ? moment(admin.lastAccessed).fromNow() - : 'Never Logged In' - } + const adminToBeRendered = {...admin, + lastAccessed: admin.lastAccessed + ? moment(admin.lastAccessed).fromNow() + : 'Never Logged In', + }; return Object.keys(columns).map(column => ( {/* @@ -58,7 +58,7 @@ export default class AdminList extends React.Component) - ) + ); } render() { diff --git a/src/client/pages/ApplyPage/components/PersonalSection.tsx b/src/client/pages/ApplyPage/components/PersonalSection.tsx index 046f2e50..dbed1f92 100644 --- a/src/client/pages/ApplyPage/components/PersonalSection.tsx +++ b/src/client/pages/ApplyPage/components/PersonalSection.tsx @@ -3,11 +3,11 @@ import { RegisterUserPersonalSectionRequest } from '@Shared/api/Requests'; import React from 'react'; import { Field, Fields, reduxForm } from 'redux-form'; import * as FormFields from '~/components/Fields'; +import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; import FileField from '~/components/FileField'; import ApplyPageSection, { ApplyPageSectionProps } from './ApplyPageSection'; import UniversityField from './UniversityField'; -import { ApplicationRow, ApplicationCol, ApplicationLabel, ApplicationInput } from '~/components/Fields'; interface PersonalSectionProps extends ApplyPageSectionProps { onEmailChange: (newEmail: string) => void; @@ -96,7 +96,7 @@ class PersonalSection extends ApplyPageSection - + {label} @@ -131,7 +131,7 @@ class PersonalSection extends ApplyPageSection - + University ( High School - + ); @@ -172,9 +172,9 @@ class PersonalSection extends ApplyPageSection - + Student PID - + ); @@ -189,11 +189,11 @@ class PersonalSection extends ApplyPageSection - + Major {FormFields.createMajorPicker()} - + Year in School {FormFields.createYearPicker()} @@ -206,18 +206,18 @@ class PersonalSection extends ApplyPageSection + Grade Point Average (GPA) - + ); } if (requireMajorGPA) { gpaFields.push( - + Major GPA - + ); } @@ -236,28 +236,28 @@ class PersonalSection extends ApplyPageSection - + Institution - + {this.createInstitutionCard(InstitutionType.UCSD, 'institution-ucsd', 'UCSD')} - + {this.createInstitutionCard(InstitutionType.University, 'institution-uni', 'Other University')} - {allowHighSchool && - + {allowHighSchool && + {this.createInstitutionCard(InstitutionType.HighSchool, 'institution-hs', 'High School')} } - - + + - + What is your race / ethnicity? @@ -291,47 +291,47 @@ class PersonalSection extends ApplyPageSection First Name - + Last Name - + - + Email {this.createEmailField()} - + Birthdate
{FormFields.createMonthPicker()} - - + + + + , + - , - -
- + Gender {FormFields.createGenderPicker()} - + Phone Number - + @@ -340,13 +340,13 @@ class PersonalSection extends ApplyPageSection - + Github Username' - + - + Personal Website' - + @@ -354,20 +354,20 @@ class PersonalSection extends ApplyPageSection - + Resume (5MB Max) {this.createResumeUpload()} - + {this.createShareCheckbox()} - +