diff --git a/src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx b/src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx index fed0ac65..36f09dd2 100644 --- a/src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx +++ b/src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx @@ -1,14 +1,49 @@ import Link from '@views/components/common/Link'; import Text from '@views/components/common/Text/Text'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { createPortal } from 'react-dom'; import styles from './RecruitmentBanner.module.scss'; const DISCORD_URL = 'https://discord.gg/7pQDBGdmb7'; const GITHUB_URL = 'https://github.com/Longhorn-Developers/UT-Registration-Plus'; +const DESIGNER_APPLICATION_URL = + 'https://docs.google.com/forms/d/e/1FAIpQLSdX1Bb37tW6s1bkdIW3GJoTGcM_Uc-2DzFOFMXxGdn1jZ3K1A/viewform'; -const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD', 'DES']; +// The lists below _must_ be mutually exclusive +const DEVELOPER_RECRUIT_FROM_DEPARTMENTS = new Set(['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD']); +const DESIGNER_RECRUIT_FROM_DEPARTMENTS = new Set(['I', 'DES', 'AET']); + +type RecruitmentType = 'DEVELOPER' | 'DESIGNER' | 'NONE'; + +const DeveloperRecruitmentBanner = () => ( +
+ + Interested in helping us develop UT Registration Plus? Check out our{' '} + + Discord Server + {' '} + and{' '} + + GitHub + + ! + +
+); + +const DesignerRecruitmentBanner = () => ( +
+ + Design for thousands of UT students through Longhorn Developers on real-world projects like UT Reg. + Plus.—build your portfolio and collaborate in Figma. Apply{' '} + + here + + ! + +
+); /** * This adds a new column to the course catalog table header. @@ -17,47 +52,37 @@ const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD', 'DES' */ export default function RecruitmentBanner(): JSX.Element | null { const [container, setContainer] = useState(null); + const recruitmentType = useMemo(getRecruitmentType, []); useEffect(() => { - if (!canRecruitFrom()) { + if (recruitmentType === 'NONE') { return; } + const container = document.createElement('div'); container.setAttribute('id', 'ut-registration-plus-table-head'); const table = document.querySelector('table'); table!.before(container); setContainer(container); - }, []); + }, [recruitmentType]); - if (!container) { + if (!container || recruitmentType === 'NONE') { return null; } return createPortal( -
- - Interested in helping us develop UT Registration Plus? Check out our{' '} - - Discord Server - {' '} - and{' '} - - GitHub - - ! - -
, + recruitmentType === 'DEVELOPER' ? : , container ); } /** - * Determines if recruitment can be done from the current department. + * Determines what type of recruitment can be done from the current department. * - * @returns True if recruitment can be done from the current department, false otherwise. + * @returns 'DEVELOPER' or 'DESIGNER' if the current department recruits for that respective type, otherwise 'NONE' */ -export const canRecruitFrom = (): boolean => { +export const getRecruitmentType = (): RecruitmentType => { const params = ['fos_fl', 'fos_cn']; let department = ''; params.forEach(p => { @@ -66,8 +91,18 @@ export const canRecruitFrom = (): boolean => { department = param; } }); + if (!department) { - return false; + return 'NONE'; } - return RECRUIT_FROM_DEPARTMENTS.includes(department); + + if (DEVELOPER_RECRUIT_FROM_DEPARTMENTS.has(department)) { + return 'DEVELOPER'; + } + + if (DESIGNER_RECRUIT_FROM_DEPARTMENTS.has(department)) { + return 'DESIGNER'; + } + + return 'NONE'; };