diff --git a/components/Assessment/Button.js b/components/Assessment/Button.js deleted file mode 100644 index bc451442..00000000 --- a/components/Assessment/Button.js +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { hexToRgba } from '../../utility/utilities'; -import { ASSESSMENT_COLOR } from '../../constants'; - -const buttonWidth = { - small: '40px', - default: '60px', - large: '300px', - flex: '', -}; - -const buttonHeightPadding = { - short: '0.25em', - default: '0.5em', - tall: '1em', -}; - -const StyledButton = styled.a` - vertical-align: middle; - display: inline-block; - text-decoration: none; - border: transparent; - transition: all 250ms; - max-width: 100%; - width: ${(p) => (p.width ? buttonWidth[p.width] : buttonWidth.default)}; - text-align: center; - padding: ${(p) => - p.height ? buttonHeightPadding[p.height] : buttonHeightPadding.default} - 0.75em; - border-radius: 3px; - margin: 1em ${(p) => (p.no_margin ? '0px' : '0.75em')}; - :hover { - cursor: pointer; - } - :focus { - outline: 0; - } - ${(p) => - p.disabled && - ` - cursor: not-allowed; - opacity: 0.5; - `} - color: white; - background: ${(p) => p.bColor}; - :hover { - ${(p) => - p.disabled - ? ` - cursor: not-allowed; - ` - : ` - box-shadow: 0 0 0 .2rem ${hexToRgba(ASSESSMENT_COLOR.BLUE_TEXT, 0.5)}; - `} - } - :focus { - box-shadow: 0 0 0 0.2rem ${hexToRgba(ASSESSMENT_COLOR.BLUE_TEXT, 0.5)}; - } - height: 25px; -`; - -export const Button = (props) => { - return ( - - {props.children} - - ); -}; - -export default Button; diff --git a/components/Assessment/CSVButton.js b/components/Assessment/CSVButton.js deleted file mode 100644 index 0275aae6..00000000 --- a/components/Assessment/CSVButton.js +++ /dev/null @@ -1,48 +0,0 @@ -import React, { useState, useRef } from 'react'; -import { CSVLink } from 'react-csv'; -import { Button } from './Button'; -import { getCSVData } from '../../utility/firebase'; -import Spinner from '../../assets/spinner.svg'; - -export default function CSVButton() { - const [csvData, setCSVData] = useState(''); - const downloadLink = useRef(); - const [loading, setLoading] = useState(false); - return ( - <> - - - - ); -} diff --git a/components/Assessment/ExportModal.js b/components/Assessment/ExportModal.js deleted file mode 100644 index ed894cac..00000000 --- a/components/Assessment/ExportModal.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import CSVButton from './CSVButton'; -import Modal from './Modal'; -import ResumeExportButton from './ResumeExportButton'; - -export default function ExportModal({ setShowing }) { - return ( - -

Export applicant data

- - - - ); -} diff --git a/components/Assessment/Modal.js b/components/Assessment/Modal.js deleted file mode 100644 index 318cad80..00000000 --- a/components/Assessment/Modal.js +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useRef, useEffect } from 'react'; -import styled from 'styled-components'; - -const GreyDiv = styled.div` - height: 100vh; - width: 100vw; - background: rgba(0, 0, 0, 0.4); - position: absolute; - z-index: 99; -`; - -const ModalDiv = styled.div` - width: 400px; - height: auto; - position: absolute; - left: 50%; - top: 25%; - background-color: white; - transform: translate(-50%, -25%); - opacity: 100%; - padding: 20px; - display: flex; - flex-direction: column; - align-items: center; -`; - -export default function Modal({ children, setShowing }) { - const backgroundRef = useRef(); - useEffect(() => { - const escFunction = ({ keyCode }) => { - if (keyCode === 27) { - setShowing(false); - } - }; - document.addEventListener('keyup', escFunction, false); - return () => { - document.removeEventListener('keyup', escFunction, false); - }; - }); - return ( - { - if (backgroundRef.current && backgroundRef.current === e.target) { - setShowing(false); - } - }} - > - {children} - - ); -} diff --git a/components/Assessment/PopoutWindow.js b/components/Assessment/PopoutWindow.js deleted file mode 100644 index ae98010b..00000000 --- a/components/Assessment/PopoutWindow.js +++ /dev/null @@ -1,30 +0,0 @@ -import { useEffect, useState } from 'react'; -import ReactDOM from 'react-dom'; - -export default function PopoutWindow({ children, setWindowClosed, title }) { - const [containerElement, setContainerElement] = useState(); - useEffect(() => { - const features = 'width=800, height=500, left=300, top=200'; - const extWindow = window.open('', '', features); - let containerEle = null; - if (extWindow) { - containerEle = extWindow.document.createElement('div'); - extWindow.document.body.appendChild(containerEle); - extWindow.document.title = title; - extWindow.addEventListener('beforeunload', () => { - setWindowClosed(); - }); - } else { - setWindowClosed(); - } - setContainerElement(containerEle); - return () => { - if (extWindow) { - extWindow.close(); - } - }; - }, [title, setWindowClosed]); - return containerElement - ? ReactDOM.createPortal(children, containerElement) - : null; -} diff --git a/components/Assessment/ResumeExportButton.js b/components/Assessment/ResumeExportButton.js deleted file mode 100644 index e0378050..00000000 --- a/components/Assessment/ResumeExportButton.js +++ /dev/null @@ -1,37 +0,0 @@ -import React, { useState } from 'react'; -import { Button } from './Button'; -import { getAllResumes } from '../../utility/firebase'; -import Spinner from '../../assets/spinner.svg'; - -export default function ResumeExportButton() { - const [loading, setLoading] = useState(false); - return ( - <> - - - ); -} diff --git a/components/Assessment/Table.js b/components/Assessment/Table.js deleted file mode 100644 index 645f52a2..00000000 --- a/components/Assessment/Table.js +++ /dev/null @@ -1,167 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { - APPLICATION_STATUS, - ASSESSMENT_COLOR, - MAX_SCORE, -} from '../../constants'; -import ApplicantResponse from './applicantResponse'; -import ApplicantScore from './applicantScore'; -import Tag from './Tag'; - -const styles = { - nameEmailContainer: { - flex: 3, - textAlign: 'left', - }, - indexScoreContainer: { - flex: 1, - textAlign: 'right', - }, - unselectedHackerContainer: {}, - selectedHackerContainer: {}, -}; - -const HackerName = styled.p` - font-size: 16px; - color: ${ASSESSMENT_COLOR.DARK_GRAY}; - margin: 0px; - font-weight: bold; -`; - -const LightGrayText = styled.p` - font-size: 16px; - color: ${ASSESSMENT_COLOR.LIGHT_GRAY}; - margin: 0px; -`; - -const UnselectedRowDiv = styled.div` - display: flex; - padding: 10px 16px 6px 16px; - cursor: pointer; -`; -const SelectedRowDiv = styled.div` - display: flex; - padding: 10px 16px 6px 16px; - cursor: pointer; - background: ${ASSESSMENT_COLOR.LIGHT_BLUE}; -`; - -const Scored = styled.p` - color: ${ASSESSMENT_COLOR.LIGHT_GRAY}; - font-size: 16px; - margin: 0px; -`; - -const Unscored = styled.p` - color: ${ASSESSMENT_COLOR.UNSCORED_GRAY}; - font-size: 16px; - margin: 0px; -`; - -export default function Table(props) { - const { selectedHacker } = props; - - const selectHacker = (hacker) => { - props.setSelectedHacker(hacker); - }; - - function Row(rowProp) { - const appStatus = rowProp.hacker.status.applicationStatus; - return selectedHacker.basicInfo === rowProp.hacker.basicInfo ? ( - selectHacker(rowProp.hacker)}> -
- - {rowProp.hacker.basicInfo.firstName}{' '} - {rowProp.hacker.basicInfo.lastName}{' '} - - - {rowProp.hacker.basicInfo.email} -
-
- {rowProp.index} - {rowProp.hacker.score ? ( - - {rowProp.hacker.score.totalScore ?? '?'}/{MAX_SCORE} - - ) : ( - /{MAX_SCORE} - )} -
- - ) : ( - selectHacker(rowProp.hacker)}> -
- - {rowProp.hacker.basicInfo.firstName}{' '} - {rowProp.hacker.basicInfo.lastName}{' '} - - - {rowProp.hacker.basicInfo.email} -
-
- {rowProp.index} - {rowProp.hacker.score ? ( - - {rowProp.hacker.score.totalScore ?? '?'}/{MAX_SCORE} - - ) : ( - /{MAX_SCORE} - )} -
- - ); - } - - const AllHackersRow = () => { - const graded = props.displayedHackers.filter( - (h) => h.status.applicationStatus === APPLICATION_STATUS.scored.text - ).length; - const accepted = props.displayedHackers.filter( - (h) => h.status.applicationStatus === APPLICATION_STATUS.accepted.text - ).length; - return ( - -
- - {graded}/{props.displayedHackers.length}{' '} - {props.displayedHackers.length === 1 - ? 'Hacker graded' - : 'Hackers graded'} - - - {accepted}/{props.displayedHackers.length}{' '} - {props.displayedHackers.length === 1 - ? 'Hacker accepted' - : 'Hackers accepted'} - -
- - ); - }; - - return ( -
-
- - {props.displayedHackers.map((hacker, index) => { - return ( - - ); - })} -
- {Object.keys(selectedHacker).length !== 0 ? ( - <> - - - - ) : ( -
- )} -
- ); -} diff --git a/components/Assessment/Tag.js b/components/Assessment/Tag.js deleted file mode 100644 index d9f9fd28..00000000 --- a/components/Assessment/Tag.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -const TagText = styled.span` - color: ${(p) => (p.color ? p.color : 'white')}; - height: 10px; - width: 30px; - background-color: ${(p) => p.bColor}; - padding: 3px; - font-size: 10px; - border-radius: 5px; -`; - -export default function Tag({ color, text, textColor }) { - return ( - - {text} - - ); -} diff --git a/components/Assessment/acceptingModal.js b/components/Assessment/acceptingModal.js deleted file mode 100644 index 559397f7..00000000 --- a/components/Assessment/acceptingModal.js +++ /dev/null @@ -1,91 +0,0 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; -import { APPLICATION_STATUS, ASSESSMENT_COLOR } from '../../constants'; -import { - getApplicantsToAccept, - updateApplicantStatus, -} from '../../utility/firebase'; -import { Button } from './Button'; -import Modal from './Modal'; - -const ScoreInput = styled.input` - font-size: 16px; - border: 1px solid ${ASSESSMENT_COLOR.BLACK}; - border-radius: 4px; - box-sizing: border-box; - margin: 8px 20px 8px 20px; - text-align: left; - padding: 0px 10px; - :focus { - color: ${ASSESSMENT_COLOR.BLACK}; - } -`; -const TotalApplicantsP = styled.p` - font-weight: bold; -`; - -const FlexDiv = styled.div` - display: flex; -`; - -const acceptApplicant = async (applicant) => { - return updateApplicantStatus(applicant._id, APPLICATION_STATUS.accepted.text); -}; - -export default function AcceptingModal({ setShowing }) { - const [totalApplicants, setTotalApplicants] = useState(0); - const [score, setScore] = useState(undefined); - const [applicantsToAccept, setApplicants] = useState([]); - - const getApplicants = async () => { - const apps = await getApplicantsToAccept(score); - setTotalApplicants(apps.length); - setApplicants(apps); - }; - - const acceptApplicants = async () => { - if (!applicantsToAccept) return; - await Promise.all(applicantsToAccept.map((app) => acceptApplicant(app))); - setShowing(false); - }; - - return ( - -

Accept applicants

- {/* */} - - { - // eslint-disable-next-line no-restricted-globals - if (!isNaN(e.target.value)) setScore(e.target.value); - }} - value={score ?? ''} - placeholder="minimum score" - /> - Total applicants: {totalApplicants} - - - - - - - ); -} diff --git a/components/Assessment/applicantResponse.js b/components/Assessment/applicantResponse.js deleted file mode 100644 index 2cc6b9e6..00000000 --- a/components/Assessment/applicantResponse.js +++ /dev/null @@ -1,189 +0,0 @@ -// this is the third sidebar for the scoring page - -import React, { useState, useEffect } from 'react'; -import moment from 'moment'; -import styled from 'styled-components'; -import ResponseInput from './responseInput'; -import { ASSESSMENT_COLOR, TABS } from '../../constants'; -import { getResumeFile } from '../../utility/firebase'; - -const Main = styled.div` - padding: 20px; - max-width: 33%; - border: 1px solid gray; - text-align: left; - overflow-y: scroll; - height: 85vh; -`; - -const TabContainer = styled.div` - display: flex; - flex-direction: row; - padding-bottom: 15px; - border-bottom: 1px gray solid; - width: 100%; -`; - -const Tab = styled.div` - margin-right: 20px; - :hover { - color: ${ASSESSMENT_COLOR.BLUE_TEXT}; - cursor: pointer; - } -`; -const ExitTab = styled.div` - color: grey; - margin-left: auto; - :hover { - color: ${ASSESSMENT_COLOR.BLUE_TEXT}; - cursor: pointer; - } -`; - -export default function ApplicantResponse(props) { - const { hacker } = props; - const [activeTab, setActiveTab] = useState(TABS.OVERVIEW); - - return ( -
- - setActiveTab(TABS.OVERVIEW)}> Basic Info - setActiveTab(TABS.RESUME)}> Skills - setActiveTab(TABS.COMMENTS)}> Comments(WIP) - props.setSelectedHacker({})}> X - - {activeTab === TABS.OVERVIEW ? ( - - ) : activeTab === TABS.RESUME ? ( - - ) : ( - - )} -
- ); - - function OverviewTab() { - return ( -
- - - - - - - - -
- ); - } - - function ResumeLink() { - const [file, setFile] = useState(null); - const [noResume, setNoResume] = useState(false); - useEffect(() => { - getResumeFile(hacker._id) - .then(async (url) => { - const data = await fetch(url); - setFile(await data.blob()); - const fileURL = URL.createObjectURL(file); - setFile(fileURL); - }) - .catch(() => setNoResume(true)); - }, []); - - return !file && noResume === false ? ( - <>Loading - ) : noResume ? ( -
No resume
- ) : ( - - View Resume - - ); - } - - function ResumeTab() { - return ( -
- - - - - - - Long answer question 1 -
- 1. What should technology be used for? -
- } - response={props.hacker.skills.longAnswers1} - /> - - Long answer 2 which is either -
- 1. How would you like to challenge yourself during this hackathon? -
- 2. Describe a time where you went above and beyond of your role to - demonstrate leadership in a project. -
- } - response={props.hacker.skills.longAnswers2} - /> - - ); - } - - function CommentTab() { - if (props.comments) { - return ( -
- {Object.entries(props.comments).map(([key]) => ( -
{key}
- ))} -
- ); - } - return
WIP
; - } -} diff --git a/components/Assessment/applicantScore.js b/components/Assessment/applicantScore.js deleted file mode 100644 index 183f8cd8..00000000 --- a/components/Assessment/applicantScore.js +++ /dev/null @@ -1,167 +0,0 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ -// this is the second side bar for the scoringPage -import React, { useState, useEffect, useContext } from 'react'; -import moment from 'moment'; -import styled from 'styled-components'; -import { - updateApplicantScore, - updateApplicantStatus, -} from '../../utility/firebase'; -import { Button } from './Button'; -import ScoreInput from './scoreInput'; -import { AuthContext } from '../../utility/auth'; -import { - ASSESSMENT_COLOR, - APPLICATION_STATUS, - MAX_SCORE, - SCORING, -} from '../../constants'; - -const Main = styled.div` - padding: 0px 20px; - text-align: left; -`; - -const Summary = styled.div` - text-align: left; - margin-top: 20px; - padding: 20px 20px; - background: #f2f2f2; -`; - -export default function ApplicantScore(props) { - const { hacker } = props; - const [hasScore, setHasScore] = useState(false); - - const appStatus = hacker.status.applicationStatus; - - const { user } = useContext(AuthContext); - - const [score, setScore] = useState({ - ResumeScore: null, - ResponseOneScore: null, - ResponseTwoScore: null, - }); - - useEffect(() => { - if (hacker?.score?.scores) { - setScore(hacker.score.scores); - setHasScore(true); - } else { - setScore({ - ResumeScore: null, - ResponseOneScore: null, - ResponseTwoScore: null, - }); - setHasScore(false); - } - }, [hacker]); - - const isGraded = (scores) => { - return !Object.values(scores).some((x) => x === null); - }; - - const handleClick = async (value, label) => { - switch (label) { - case 'Resume/LinkedIn': - await updateApplicantScore( - props.hacker._id, - { - ...score, - ResumeScore: value, - }, - '', - user.email - ); - break; - case 'Written Response Score 1': - await updateApplicantScore( - props.hacker._id, - { - ...score, - ResponseOneScore: value, - }, - '', - user.email - ); - break; - case 'Written Response Score 2': - await updateApplicantScore( - props.hacker._id, - { - ...score, - ResponseTwoScore: value, - }, - '', - user.email - ); - break; - default: - alert('Error!'); - break; - } - }; - return ( -
-
-

Scoring

- - - -
- {hasScore && ( - - -
- -
- -
-
- -
- - )} -
- ); -} diff --git a/components/Assessment/numberIcon.js b/components/Assessment/numberIcon.js deleted file mode 100644 index 1231193b..00000000 --- a/components/Assessment/numberIcon.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { ASSESSMENT_COLOR } from '../../constants'; - -const Circle = styled.div` - background-color: ${(props) => - props.active ? `${ASSESSMENT_COLOR.BLUE_TEXT}` : `white`}; - margin-right: 10px; - border-radius: 50%; - border: 3px solid ${ASSESSMENT_COLOR.BLUE_TEXT}; - width: 33px; - height: 33px; - color: ${(props) => - props.active ? `white` : `${ASSESSMENT_COLOR.BLUE_TEXT}`}; - display: inline-flex; - align-items: center; - justify-content: center; - :hover { - border: 3px solid ${ASSESSMENT_COLOR.BLUE_BORDER}; - cursor: pointer; - } -`; - -export default function Number({ label, number, active, handleClick }) { - // handleClick is for setting score in firebase: applicantResponse.js - // clickNewScore is for highlighting input in scoreInput.js - - return ( - { - handleClick(number, label); - }} - > - {number} - - ); -} diff --git a/components/Assessment/responseInput.js b/components/Assessment/responseInput.js deleted file mode 100644 index b871b3d3..00000000 --- a/components/Assessment/responseInput.js +++ /dev/null @@ -1,95 +0,0 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; -import PopoutWindow from './PopoutWindow'; -import { Button } from './Button'; -import { ASSESSMENT_COLOR, COLOR } from '../../constants'; -import OpenLinkIcon from '../../assets/openLinkIcon.svg'; - -const Label = styled.label` - color: ${ASSESSMENT_COLOR.LIGHT_GRAY}; -`; - -const Container = styled.div` - margin-top: 15px; -`; - -const URL = styled.a` - color: ${COLOR.MIDNIGHT_PURPLE_LIGHT}; - text-decoration: none; - font-weight: bold; -`; - -const URLContainer = styled.div` - display: flex; -`; - -const OpenIcon = styled.a` - margin-left: auto; - cursor: pointer; - margin-right: 10px; -`; - -const NO_RESPONSE = 'No Response'; - -export default function ResponseInput({ url, label, response, openable }) { - const [open, setOpen] = useState(false); - - const OpenButton = () => ( -
- -
- ); - - const ResponseArea = ({ fontSize }) => ( -
- {!response ? ( - 'No Response' - ) : !url ? ( - response - ) : ( - - - {response || NO_RESPONSE} - - - Open Link Icon - - - )} -
- ); - - return ( - - - - {open && ( - setOpen(false)}> -
{label}
- - - )} - - ); -} diff --git a/components/Assessment/scoreInput.js b/components/Assessment/scoreInput.js deleted file mode 100644 index 5effdf4a..00000000 --- a/components/Assessment/scoreInput.js +++ /dev/null @@ -1,32 +0,0 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ - -// these are the blue buttons for the applicantScore sidebar -import React from 'react'; -import Number from './numberIcon'; - -export default function ScoreInput({ label, score, handleClick, maxScore }) { - const arr = [...Array(maxScore.value + 1).keys()]; - - const handleMultipier = (value) => { - return handleClick(value * maxScore.weight, label); - }; - - return ( -
- -
- {arr.map((num) => { - return ( - - ); - })} -
-
- ); -} diff --git a/components/Assessment/toolbar.js b/components/Assessment/toolbar.js deleted file mode 100644 index ddfcdc69..00000000 --- a/components/Assessment/toolbar.js +++ /dev/null @@ -1,131 +0,0 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; -import { ASSESSMENT_COLOR, SORT } from '../../constants'; -import Arrow from '../../assets/arrow.svg'; -import Filter from '../../assets/filter.svg'; -import MagnifyingGlass from '../../assets/magnifyingGlass.svg'; -import { Button } from './Button'; -import AcceptingModal from './acceptingModal'; -import ExportModal from './ExportModal'; -import { logout } from '../../utility/firebase'; - -const ToolBarContainer = styled.div` - width: 100%; - background: ${ASSESSMENT_COLOR.TOOLBAR_GRAY}; - display: flex; -`; - -const Search = styled.input` - width: 480px; - height: 48px; - margin: 8px 10px 8px 10px; - padding: 0px 45px; - font-size: 16px; - display: inline-block; - background-image: url(${MagnifyingGlass}); - background-position: 20px 15px; - background-repeat: no-repeat; - border: 1px solid ${ASSESSMENT_COLOR.UNSCORED_GRAY}; - border-radius: 4px; - box-sizing: border-box; - float: left; - :focus { - color: ${ASSESSMENT_COLOR.BLACK}; - } -`; - -const SortContainer = styled.div` - display: flex; -`; - -const SortByText = styled.p` - color: ${ASSESSMENT_COLOR.DARK_GRAY}; - font-size: 16px; -`; - -const SortSelect = styled.select` - height: 48px; - margin: 8px 60px 8px 20px; - color: ${ASSESSMENT_COLOR.DARK_GRAY}; - font-size: 16px; - border-radius: 4px; - border: 1px solid ${ASSESSMENT_COLOR.UNSCORED_GRAY}; - padding: 0px 12px; -`; - -const DownArrow = styled.img` - cursor: pointer; -`; - -const UpArrow = styled.img` - cursor: pointer; - transform: scale(1, -1); -`; - -const FilterIcon = styled.img` - cursor: pointer; - margin-left: 30px; -`; - -export default function ToolBar({ search, sort, reverse, reversed }) { - const [showExport, setShowExport] = useState(false); - const [showAcceptance, setShowAcceptance] = useState(false); - return ( - - - { - search(event.target.value); - }} - /> - - Sort by: - { - sort(event.target.value); - }} - > - - - - - - - - {reversed ? ( - reverse(() => !reverse)} /> - ) : ( - reverse(() => !reverse)} /> - )} - - - - {showAcceptance && } - {showExport && } - - ); -}