From 645f71136915842b480080ce411f01a56f0b0e48 Mon Sep 17 00:00:00 2001 From: Lavan Sumanan Date: Sat, 6 Nov 2021 19:03:32 -0400 Subject: [PATCH 01/51] Created recruitment application form --- .../src/components/Postings/Postings.tsx | 14 +++++- waterloop-site/src/hooks/recruitment-form.js | 28 ++++++++++++ .../Recruitment/RecruitmentApplicantForm.tsx | 45 +++++++++++++++++++ .../pages/Recruitment/RecruitmentRouter.tsx | 6 ++- 4 files changed, 90 insertions(+), 3 deletions(-) create mode 100644 waterloop-site/src/hooks/recruitment-form.js create mode 100644 waterloop-site/src/pages/Recruitment/RecruitmentApplicantForm.tsx diff --git a/waterloop-site/src/components/Postings/Postings.tsx b/waterloop-site/src/components/Postings/Postings.tsx index 1290692c2c..f9b761f75e 100644 --- a/waterloop-site/src/components/Postings/Postings.tsx +++ b/waterloop-site/src/components/Postings/Postings.tsx @@ -9,13 +9,23 @@ const Postings: React.FC = () => { const { postings } = usePostings(); const { teams } = useTeams(); // Move the "Executive" subteam to the front of the array - const executiveIdx = teams.findIndex((teams) => teams.teamName === 'Executive'); + const executiveIdx = teams.findIndex( + (teams) => teams.teamName === 'Executive', + ); teams.push(...teams.splice(0, executiveIdx)); return (
{teams.map((team: Team, index: number) => { - return team.teamName === posting.team)} team={team.teamName} key={index} />; + return ( + team.teamName === posting.team, + )} + team={team.teamName} + key={index} + /> + ); })}
); diff --git a/waterloop-site/src/hooks/recruitment-form.js b/waterloop-site/src/hooks/recruitment-form.js new file mode 100644 index 0000000000..6940ebc1f4 --- /dev/null +++ b/waterloop-site/src/hooks/recruitment-form.js @@ -0,0 +1,28 @@ +import { useHistory } from 'react-router'; + +const useRecruitmentForm = (recruitmentFormId, input = {}) => { + const history = useHistory(); + + const exitForm = useCallback(() => { + history.push('/postings'); + }, [history]); + + return { + exitForm, + inputFirstName, + inputLastName, + inputEmail, + pickSchool, + pickYear, + inputProgram, + inputInPerson, + inputPosition, // might not be needed since this is auto-filled + inputOtherPositions, + inputWhyJoinTeam, + inputAdditionalInfo, + uploadDocuments, + submitForm, + }; +}; + +export default useRecruitmentForm; diff --git a/waterloop-site/src/pages/Recruitment/RecruitmentApplicantForm.tsx b/waterloop-site/src/pages/Recruitment/RecruitmentApplicantForm.tsx new file mode 100644 index 0000000000..641cd3f589 --- /dev/null +++ b/waterloop-site/src/pages/Recruitment/RecruitmentApplicantForm.tsx @@ -0,0 +1,45 @@ +import React, { useState, useEffect } from 'react'; +import styled from 'styled-components'; +import { useRouteMatch } from 'react-router-dom'; +import useRecruitmentForm from '../../hooks/recruitment-form'; +import { Button } from '../../components/Button'; +//import DropDownList from '../../../components/DropDownList'; +//import TextInput from '../../../components/TextInput'; + +//import * as R from 'ramda'; + +const Wrapper = styled.div` + margin: 3em 4em 3em 4em; +`; + +const SubmitButton = styled(Button)` + width: 100px; +`; + +const RecruitmentApplicantForm: React.FC = () => { + //const { params: { recruitmentFormId } } = useRouteMatch(); + //const { + + //} = useRecruitmentForm(recruitmentFormId) + return ( +
+

< Back

+ +

Contact Info

+

Full name

+ + +

Email

+ + + window.open('http://wloop.ca/subscribe')} + text="Submit" + backgroundColor="yellow" + textColor="black" + /> +
+ ); +}; + +export default RecruitmentApplicantForm; diff --git a/waterloop-site/src/pages/Recruitment/RecruitmentRouter.tsx b/waterloop-site/src/pages/Recruitment/RecruitmentRouter.tsx index b031edcd49..951e7479f6 100644 --- a/waterloop-site/src/pages/Recruitment/RecruitmentRouter.tsx +++ b/waterloop-site/src/pages/Recruitment/RecruitmentRouter.tsx @@ -2,17 +2,21 @@ import React from 'react'; import { Switch, useRouteMatch, Route } from 'react-router-dom'; import RecruitmentPage from './Recruitment'; import RecruitmentFaq from './RecruitmentFaq'; +import ApplicantForm from './RecruitmentApplicantForm'; const RecruitmentRouter = () => { const { path } = useRouteMatch(); return ( - + + + + ); }; From 53ff3c1ab998eb44573ae6cde6378e67b39c5e85 Mon Sep 17 00:00:00 2001 From: William Park Date: Sat, 6 Nov 2021 21:26:21 -0400 Subject: [PATCH 02/51] Started moving CMS components over --- .../src/components/DropDownList/ListItem.js | 50 ++++++ .../DropDownList/assets/list-closed.svg | 3 + .../DropDownList/assets/list-open.svg | 3 + .../components/DropDownList/assets/remove.svg | 4 + .../src/components/DropDownList/index.js | 134 ++++++++++++++++ .../src/components/TextInput/TextInput.tsx | 151 ++++++++++++++++++ .../src/components/TextInput/index.tsx | 3 + .../src/components/TextInput/interfaces.ts | 0 waterloop-site/src/hooks/postings.ts | 2 +- .../Recruitment/RecruitmentApplicantForm.tsx | 13 +- .../pages/Recruitment/RecruitmentRouter.tsx | 2 +- 11 files changed, 356 insertions(+), 9 deletions(-) create mode 100644 waterloop-site/src/components/DropDownList/ListItem.js create mode 100644 waterloop-site/src/components/DropDownList/assets/list-closed.svg create mode 100644 waterloop-site/src/components/DropDownList/assets/list-open.svg create mode 100644 waterloop-site/src/components/DropDownList/assets/remove.svg create mode 100644 waterloop-site/src/components/DropDownList/index.js create mode 100644 waterloop-site/src/components/TextInput/TextInput.tsx create mode 100644 waterloop-site/src/components/TextInput/index.tsx create mode 100644 waterloop-site/src/components/TextInput/interfaces.ts diff --git a/waterloop-site/src/components/DropDownList/ListItem.js b/waterloop-site/src/components/DropDownList/ListItem.js new file mode 100644 index 0000000000..501b82475d --- /dev/null +++ b/waterloop-site/src/components/DropDownList/ListItem.js @@ -0,0 +1,50 @@ +import React from 'react'; +import styled from 'styled-components'; +import RemoveSvg from './assets/remove.svg'; + +const RemoveIcon = styled.img.attrs({ + src: RemoveSvg, +})` + cursor: pointer; +`; + +const AddNewText = styled.div` + width: 100%; + text-align: center; + cursor: pointer; + font: ${({ theme }) => theme.fonts.medium12}; + color: ${({ theme }) => theme.colours.blacks.black2}; +`; + +const Container = styled.li` + list-style: none; + border-top: ${({ theme }) => theme.borders.solidGrey2}; + padding-left: 16px; + padding-right: 16px; + display: flex; + justify-content: space-between; + padding-top: 8px; +`; + +const Text = styled.div` + font: ${({ theme }) => theme.fonts.medium14}; +`; + +const ListItem = ({ + className, + onAddNew = undefined, + addNew = false, + text, + onRemove, +}) => (addNew ? ( + + + Add New + +) : ( + + {text} + + +)); + +export default ListItem; diff --git a/waterloop-site/src/components/DropDownList/assets/list-closed.svg b/waterloop-site/src/components/DropDownList/assets/list-closed.svg new file mode 100644 index 0000000000..6c1bbb2178 --- /dev/null +++ b/waterloop-site/src/components/DropDownList/assets/list-closed.svg @@ -0,0 +1,3 @@ + + + diff --git a/waterloop-site/src/components/DropDownList/assets/list-open.svg b/waterloop-site/src/components/DropDownList/assets/list-open.svg new file mode 100644 index 0000000000..b92d3c37a2 --- /dev/null +++ b/waterloop-site/src/components/DropDownList/assets/list-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/waterloop-site/src/components/DropDownList/assets/remove.svg b/waterloop-site/src/components/DropDownList/assets/remove.svg new file mode 100644 index 0000000000..6a58f675c2 --- /dev/null +++ b/waterloop-site/src/components/DropDownList/assets/remove.svg @@ -0,0 +1,4 @@ + + + + diff --git a/waterloop-site/src/components/DropDownList/index.js b/waterloop-site/src/components/DropDownList/index.js new file mode 100644 index 0000000000..44c2c17b76 --- /dev/null +++ b/waterloop-site/src/components/DropDownList/index.js @@ -0,0 +1,134 @@ +import React, { + useMemo, + useState, + useCallback, + Children, +} from 'react'; +import styled, { css } from 'styled-components'; +import PropTypes from 'prop-types'; +import ListOpenSvg from './assets/list-open.svg'; +import ListClosedSvg from './assets/list-closed.svg'; +import UnstyledListItem from './ListItem'; + +const ListItem = styled(UnstyledListItem)``; + +const ListOpenIcon = styled.img.attrs({ + src: ListOpenSvg, +})``; + +const ListClosedIcon = styled.img.attrs({ + src: ListClosedSvg, +})``; + +const Container = styled.div` + overflow: visible; + z-index: 10; ${''/** Hides the top of the list under the List name container */} + background-color: ${({ theme }) => theme.colours.white}; +`; + +const ListNameContainer = styled.div` + border: ${({ theme }) => theme.borders.solidGrey1}; + border-radius: 10px; + height: 47px; + background-color: ${({ theme }) => theme.colours.white}; + + display: flex; + align-items: center; + justify-content: space-between; + padding-left: 16px; + padding-right: 16px; + + cursor: pointer; +`; + +const TitleText = styled.div` + font: ${({ theme }) => theme.fonts.medium18}; + color: ${({ theme }) => theme.colours.greys.grey2}; +`; + +// Good practice to not pass props like "open" to a root element +const List = styled(({ open, ...props }) =>