Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

prod rebased into master #269

Closed
wants to merge 2 commits into from
Closed

prod rebased into master #269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
837e222
Add graduate banner (#264)
sebwittr May 14, 2024
62ff79d
Pp/clean up header (#266)
pranavphadke1 May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 23 additions & 18 deletions components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import NotifSignUpButton from './ResultsPage/Results/NotifSignUpButton';
import { getRoundedTerm } from './terms';

const isWindow = typeof window !== 'undefined';
const termAndCampusToURL = (
export const termAndCampusToURL = (
t: string,
newCampus: string,
query: string
Expand All @@ -58,21 +58,20 @@ type HeaderProps = {
};

type DropdownMenuWrapperProps = {
splashPage?: boolean;
userInfo: UserInfo | null;
onSignOut: () => void;
onSignIn: (token: string) => void;
};

export const DropdownMenuWrapper = ({
splashPage = false,
userInfo,
onSignOut,
onSignIn,
}: DropdownMenuWrapperProps): ReactElement => {
const [showModal, setShowModal] = useState(false);
const [showMenuDropdown, setShowMenuDropdown] = useState(false);
const dropdownRef = useRef(null);
const router = useRouter();

useEffect(() => {
const handleCloseDropdown = (event: Event): void => {
Expand All @@ -96,23 +95,29 @@ export const DropdownMenuWrapper = ({
setShowMenuDropdown(!showMenuDropdown);
};

// Commented out until subscription page is finalized
// const subscriptionPage = (): void => {
// router.push('/subscriptions');
// };

const DropDownMenu = (): ReactElement => {
return (
<div className="user-menu">
<div
ref={dropdownRef}
className={
splashPage ? 'user-menu__splash-page' : 'user-menu__icon-wrapper'
}
onClick={toggleMenuDropdown}
>
{splashPage && <>Logged In</>}
<IconUser className="user-menu__icon" />
<div className={'user-menu__icon-wrapper'}>
<>
{userInfo && !macros.isMobile && (
<button
onClick={() => router.push('/subscriptions')}
className="user-menu__button"
>
Notifications
</button>
)}
{/* Still need to create FAQ page */}
{/* <button>FAQ</button> */}
</>
<div
className="user-menu__icon"
ref={dropdownRef}
onClick={toggleMenuDropdown}
>
<IconUser />
</div>
</div>

{showMenuDropdown && (
Expand Down Expand Up @@ -257,7 +262,7 @@ export default function Header({
/>
</div>
)}
{searchData && (
{macros.isMobile && searchData && (
<div className="Breadcrumb_Container">
<div className="Breadcrumb_Container__dropDownContainer">
<SearchDropdown
Expand Down
74 changes: 74 additions & 0 deletions components/ResultsPage/CampusSelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import React, { ReactElement, useCallback } from 'react';

import { useRouter } from 'next/router';
import { termAndCampusToURL } from '../Header';
import { TermInfo, getRoundedTerm } from '../terms';
import { Campus } from '../types';

interface CampusSelectionProps {
query: string;
termId: string;
termInfos: Record<Campus, TermInfo[]>;
campus: string;
}
function CampusSelection({
query,
termId,
termInfos,
campus,
}: CampusSelectionProps): ReactElement {
const router = useRouter();

const termAndCampusToURLCallback = useCallback(
(t: string, newCampus: string) => {
return termAndCampusToURL(t, newCampus, query);
},
[query]
);

return (
<div className="Campus_Selection">
<button
onClick={() =>
router.push(
termAndCampusToURLCallback(
getRoundedTerm(termInfos, Campus.NEU, termId),
Campus.NEU
)
)
}
className={`Campus_Button ${campus === Campus.NEU && 'Campus_NEU'}`}
>
NEU
</button>
<button
onClick={() =>
router.push(
termAndCampusToURLCallback(
getRoundedTerm(termInfos, Campus.CPS, termId),
Campus.CPS
)
)
}
className={`Campus_Button ${campus === Campus.CPS && 'Campus_CPS'}`}
>
CPS
</button>
<button
onClick={() =>
router.push(
termAndCampusToURLCallback(
getRoundedTerm(termInfos, Campus.LAW, termId),
Campus.LAW
)
)
}
className={`Campus_Button ${campus === Campus.LAW && 'Campus_LAW'}`}
>
LAW
</button>
</div>
);
}

export default React.memo(CampusSelection);
80 changes: 80 additions & 0 deletions components/ResultsPage/SemesterDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React, { ReactElement, useRef, useState } from 'react';
import useClickOutside from './useClickOutside';
import DropdownArrow from '../icons/DropdownArrow.svg';
import { ItemProps } from 'semantic-ui-react';
import { useRouter } from 'next/router';

interface SemesterDropdownProps {
title: string;
options: ItemProps[];
value: string;
}
function SemesterDropdown({
title,
options,
value: currentValue,
}: SemesterDropdownProps): ReactElement {
const currentOption = options.find((o) => o.value == currentValue);
const currentText = currentOption ? currentOption.text : '';
const router = useRouter();

const [isOpen, setIsOpen] = useState(false);

const dropdown = useRef(null);

useClickOutside(dropdown, isOpen, setIsOpen);

function getDropdownStatus(): string {
if (isOpen) {
return 'expanded';
}
return '';
}

return (
<div className="DropdownFilter SemesterDropdown">
<div className="DropdownFilter__title">{title}</div>
<div
className="DropdownFilter__dropdown"
ref={dropdown}
role="button"
tabIndex={0}
onClick={() => setIsOpen(!isOpen)}
>
<div className={`DropdownFilter__search ${getDropdownStatus()}`}>
<input
className={'DropdownFilter__input'}
tabIndex={0}
type="text"
defaultValue={currentText}
></input>
<DropdownArrow
aria-label="Dropdown arrow"
className={`DropdownFilter__icon ${getDropdownStatus()}`}
/>
</div>
<div className="DropdownFilter__selectable">
{isOpen && (
<>
{options.map(({ text, value, link }) => (
<div
key={value}
onClick={() => router.push(link)}
className="DropdownFilter__element"
aria-selected="true"
aria-checked="false"
>
<div>
<span className="DropdownFilter__elementText">{text}</span>
</div>
</div>
))}
</>
)}
</div>
</div>
</div>
);
}

export default React.memo(SemesterDropdown);
19 changes: 16 additions & 3 deletions components/common/AlertBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import React, { useState } from 'react';
import React, { ReactElement, useState } from 'react';
import macros from '../macros';
import IconClose from '../icons/IconClose';
import Colors from '../styles/_exports.module.scss';
import Colors from '../../styles/_exports.module.scss';
import GraduateLogo from '../icons/GraduateLogo';

type AlertLevel = 'error' | 'warning' | 'info';

export type AlertBannerData = {
text: string;
alertLevel: AlertLevel;
link?: string;
linkText?: string;
logo?: () => ReactElement;
};

type AlertBannerProps = {
Expand All @@ -28,10 +31,20 @@ export default function AlertBanner({ alertBannerData }: AlertBannerProps) {
>
<div className={`alertBanner ${alertBannerData.alertLevel}Banner`}>
<div className="alertBanner__text">
{alertBannerData.logo && (
<span className="alertBanner__logo">
<alertBannerData.logo />
</span>
)}
<span>
{alertBannerData.text}
{alertBannerData.link && (
<a href={alertBannerData.link}> Learn More.</a>
<a href={alertBannerData.link} target="_blank" rel="noreferrer">
{' '}
{alertBannerData.linkText
? alertBannerData.linkText
: 'Learn More'}
</a>
)}
</span>
</div>
Expand Down
82 changes: 82 additions & 0 deletions components/icons/GraduateLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/* eslint no-restricted-syntax: 0 */

import { ReactElement } from 'react';

const GraduateLogo = (): ReactElement => (
<svg
width="133"
height="29"
viewBox="0 0 133 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M129.664 10.3594H132.191V18.1207C132.191 18.9921 131.983 19.7546 131.567 20.4082C131.154 21.0618 130.576 21.5714 129.833 21.9371C129.09 22.2989 128.225 22.4798 127.237 22.4798C126.245 22.4798 125.377 22.2989 124.634 21.9371C123.891 21.5714 123.313 21.0618 122.901 20.4082C122.488 19.7546 122.282 18.9921 122.282 18.1207V10.3594H124.809V17.9047C124.809 18.3599 124.908 18.7645 125.107 19.1185C125.309 19.4726 125.593 19.7507 125.959 19.953C126.324 20.1553 126.75 20.2565 127.237 20.2565C127.727 20.2565 128.153 20.1553 128.515 19.953C128.88 19.7507 129.162 19.4726 129.361 19.1185C129.563 18.7645 129.664 18.3599 129.664 17.9047V10.3594Z"
fill="#1C3557"
/>
<path
d="M120.195 10.3594V22.3106H118.012L112.813 14.7886H112.725V22.3106H110.198V10.3594H112.416L117.574 17.8756H117.679V10.3594H120.195Z"
fill="#1C3557"
/>
<path
d="M108.548 17.5615C108.548 17.9011 108.526 18.2078 108.482 18.4817H101.564C101.619 19.2048 101.887 19.7854 102.369 20.2236C102.851 20.6618 103.443 20.8809 104.144 20.8809C105.152 20.8809 105.864 20.4591 106.28 19.6156H108.302C108.028 20.4482 107.529 21.1329 106.806 21.6697C106.094 22.1955 105.207 22.4585 104.144 22.4585C103.279 22.4585 102.501 22.2668 101.811 21.8833C101.131 21.4889 100.595 20.9412 100.2 20.24C99.8167 19.5279 99.625 18.7063 99.625 17.7751C99.625 16.8439 99.8112 16.0277 100.184 15.3266C100.567 14.6145 101.098 14.0667 101.778 13.6833C102.468 13.2999 103.257 13.1082 104.144 13.1082C104.999 13.1082 105.76 13.2944 106.428 13.6669C107.096 14.0394 107.617 14.5652 107.989 15.2444C108.362 15.9127 108.548 16.685 108.548 17.5615ZM106.593 16.9699C106.582 16.2797 106.335 15.7265 105.853 15.3102C105.371 14.8939 104.774 14.6857 104.062 14.6857C103.416 14.6857 102.862 14.8939 102.402 15.3102C101.942 15.7155 101.668 16.2687 101.581 16.9699H106.593Z"
fill="#EB5756"
/>
<path
d="M97.0605 14.7842V19.7962C97.0605 20.1359 97.1371 20.3823 97.2905 20.5357C97.4549 20.6781 97.7287 20.7493 98.1122 20.7493H99.2625V22.3105H97.7835C96.94 22.3105 96.2936 22.1133 95.8444 21.7189C95.3953 21.3245 95.1707 20.6836 95.1707 19.7962V14.7842H94.1025V13.2559H95.1707V11.0046H97.0605V13.2559H99.2625V14.7842H97.0605Z"
fill="#EB5756"
/>
<path
d="M83.8525 17.7422C83.8525 16.8329 84.0388 16.0277 84.4113 15.3266C84.7947 14.6255 85.3096 14.0832 85.956 13.6997C86.6133 13.3053 87.3363 13.1082 88.1251 13.1082C88.8372 13.1082 89.4562 13.2506 89.982 13.5354C90.5188 13.8093 90.9461 14.1544 91.2638 14.5707V13.2561H93.1536V22.3106H91.2638V20.9631C90.9461 21.3903 90.5133 21.7464 89.9656 22.0312C89.4178 22.3161 88.7934 22.4585 88.0922 22.4585C87.3144 22.4585 86.6023 22.2613 85.956 21.8669C85.3096 21.4615 84.7947 20.9028 84.4113 20.1907C84.0388 19.4677 83.8525 18.6515 83.8525 17.7422ZM91.2638 17.7751C91.2638 17.1506 91.1323 16.6084 90.8694 16.1482C90.6174 15.6881 90.2833 15.3376 89.867 15.0965C89.4507 14.8555 89.0015 14.735 88.5195 14.735C88.0375 14.735 87.5883 14.8555 87.172 15.0965C86.7557 15.3266 86.4161 15.6717 86.1531 16.1318C85.9012 16.581 85.7752 17.1178 85.7752 17.7422C85.7752 18.3667 85.9012 18.9144 86.1531 19.3855C86.4161 19.8566 86.7557 20.2181 87.172 20.4701C87.5992 20.7111 88.0484 20.8316 88.5195 20.8316C89.0015 20.8316 89.4507 20.7111 89.867 20.4701C90.2833 20.2291 90.6174 19.8785 90.8694 19.4184C91.1323 18.9473 91.2638 18.3995 91.2638 17.7751Z"
fill="#EB5756"
/>
<path
d="M82.7451 13.2561V22.3106H80.8717V21.2425C80.5759 21.615 80.187 21.9108 79.705 22.1299C79.2339 22.338 78.73 22.4421 78.1932 22.4421C77.4811 22.4421 76.8402 22.2942 76.2705 21.9984C75.7118 21.7026 75.2681 21.2644 74.9394 20.6838C74.6217 20.1031 74.4629 19.402 74.4629 18.5804V13.2561H76.3198V18.301C76.3198 19.1117 76.5225 19.7361 76.9278 20.1744C77.3332 20.6016 77.8864 20.8152 78.5876 20.8152C79.2887 20.8152 79.8419 20.6016 80.2473 20.1744C80.6636 19.7361 80.8717 19.1117 80.8717 18.301V13.2561H82.7451Z"
fill="#EB5756"
/>
<path
d="M63.5234 17.7421C63.5234 16.8329 63.7097 16.0276 64.0822 15.3265C64.4656 14.6254 64.9805 14.0831 65.6269 13.6997C66.2842 13.3053 67.0127 13.1081 67.8124 13.1081C68.404 13.1081 68.9846 13.2395 69.5543 13.5025C70.1349 13.7544 70.5951 14.094 70.9347 14.5213V10.1501H72.8245V22.3105H70.9347V20.9466C70.6279 21.3848 70.2007 21.7463 69.6529 22.0311C69.1161 22.316 68.4971 22.4584 67.796 22.4584C67.0072 22.4584 66.2842 22.2612 65.6269 21.8668C64.9805 21.4615 64.4656 20.9027 64.0822 20.1906C63.7097 19.4676 63.5234 18.6514 63.5234 17.7421ZM70.9347 17.775C70.9347 17.1506 70.8032 16.6083 70.5403 16.1482C70.2883 15.688 69.9542 15.3375 69.5379 15.0964C69.1216 14.8554 68.6724 14.7349 68.1904 14.7349C67.7084 14.7349 67.2592 14.8554 66.8429 15.0964C66.4266 15.3265 66.087 15.6716 65.824 16.1317C65.5721 16.5809 65.4461 17.1177 65.4461 17.7421C65.4461 18.3666 65.5721 18.9144 65.824 19.3854C66.087 19.8565 66.4266 20.218 66.8429 20.47C67.2701 20.711 67.7193 20.8315 68.1904 20.8315C68.6724 20.8315 69.1216 20.711 69.5379 20.47C69.9542 20.229 70.2883 19.8784 70.5403 19.4183C70.8032 18.9472 70.9347 18.3995 70.9347 17.775Z"
fill="#EB5756"
/>
<path
d="M53.125 17.7422C53.125 16.8329 53.3112 16.0277 53.6837 15.3266C54.0672 14.6255 54.5821 14.0832 55.2284 13.6997C55.8857 13.3053 56.6088 13.1082 57.3976 13.1082C58.1096 13.1082 58.7286 13.2506 59.2545 13.5354C59.7913 13.8093 60.2185 14.1544 60.5362 14.5707V13.2561H62.426V22.3106H60.5362V20.9631C60.2185 21.3903 59.7858 21.7464 59.238 22.0312C58.6903 22.3161 58.0658 22.4585 57.3647 22.4585C56.5869 22.4585 55.8748 22.2613 55.2284 21.8669C54.5821 21.4615 54.0672 20.9028 53.6837 20.1907C53.3112 19.4677 53.125 18.6515 53.125 17.7422ZM60.5362 17.7751C60.5362 17.1506 60.4048 16.6084 60.1419 16.1482C59.8899 15.6881 59.5557 15.3376 59.1394 15.0965C58.7231 14.8555 58.274 14.735 57.7919 14.735C57.3099 14.735 56.8607 14.8555 56.4444 15.0965C56.0281 15.3266 55.6885 15.6717 55.4256 16.1318C55.1736 16.581 55.0476 17.1178 55.0476 17.7422C55.0476 18.3667 55.1736 18.9144 55.4256 19.3855C55.6885 19.8566 56.0281 20.2181 56.4444 20.4701C56.8717 20.7111 57.3209 20.8316 57.7919 20.8316C58.274 20.8316 58.7231 20.7111 59.1394 20.4701C59.5557 20.2291 59.8899 19.8785 60.1419 19.4184C60.4048 18.9473 60.5362 18.3995 60.5362 17.7751Z"
fill="#EB5756"
/>
<path
d="M50.056 14.5707C50.3299 14.1106 50.6914 13.7545 51.1405 13.5025C51.6007 13.2396 52.1429 13.1082 52.7674 13.1082V15.0472H52.2908C51.5568 15.0472 50.9981 15.2335 50.6147 15.606C50.2422 15.9784 50.056 16.6248 50.056 17.545V22.3106H48.1826V13.2561H50.056V14.5707Z"
fill="#EB5756"
/>
<path
d="M44.4781 14.1762C44.1823 13.6065 43.7715 13.1792 43.2456 12.8944C42.7198 12.5986 42.1118 12.4507 41.4216 12.4507C40.6657 12.4507 39.9919 12.6205 39.4003 12.9601C38.8087 13.2998 38.3431 13.7818 38.0035 14.4062C37.6749 15.0307 37.5105 15.7537 37.5105 16.5754C37.5105 17.397 37.6749 18.1256 38.0035 18.761C38.3431 19.3854 38.8087 19.8674 39.4003 20.2071C39.9919 20.5467 40.6657 20.7165 41.4216 20.7165C42.4404 20.7165 43.2675 20.4316 43.9029 19.862C44.5383 19.2923 44.9273 18.5199 45.0697 17.5449H40.7807V16.0495H47.0745V17.5121C46.954 18.3994 46.6363 19.2156 46.1214 19.9606C45.6174 20.7055 44.9546 21.3026 44.133 21.7517C43.3223 22.19 42.4185 22.4091 41.4216 22.4091C40.348 22.4091 39.3675 22.1626 38.4801 21.6696C37.5927 21.1656 36.8861 20.47 36.3602 19.5826C35.8453 18.6952 35.5879 17.6928 35.5879 16.5754C35.5879 15.4579 35.8453 14.4555 36.3602 13.5682C36.8861 12.6808 37.5927 11.9906 38.4801 11.4976C39.3784 10.9937 40.3589 10.7417 41.4216 10.7417C42.6376 10.7417 43.7167 11.043 44.6589 11.6455C45.612 12.2371 46.3021 13.0806 46.7294 14.1762H44.4781Z"
fill="#EB5756"
/>
<path
d="M0.95719 12.8493C0.288353 12.5324 0.288352 11.8153 0.957189 11.4984L15.7909 4.47019C16.2894 4.23397 16.9306 4.23397 17.4292 4.47019L32.2629 11.4984C32.9317 11.8153 32.9317 12.5324 32.2629 12.8493L17.4292 19.8775C16.9306 20.1137 16.2894 20.1137 15.7909 19.8775L0.95719 12.8493Z"
fill="#EB5756"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.00977 14.2959V22.3107H5.65306V15.0709L4.03903 14.306L4.00977 14.2959Z"
fill="#1C3557"
/>
<path
d="M22.8347 12.1011L18.5758 14.0404C17.9682 14.3171 17.9682 15.1801 18.5758 15.4568C18.7807 15.5501 19.0159 15.5501 19.2208 15.4568L24.9479 12.849C25.5894 12.5568 25.5894 11.6455 24.9479 11.3534L19.2208 8.7455C19.0159 8.65222 18.7807 8.65222 18.5758 8.7455C17.9682 9.02215 17.9682 9.88522 18.5758 10.1619L22.8347 12.1011Z"
fill="white"
/>
<path
d="M10.2122 12.1011L14.4711 14.0404C15.0787 14.3171 15.0787 15.1801 14.4711 15.4568C14.2662 15.5501 14.031 15.5501 13.8261 15.4568L8.09897 12.849C7.45745 12.5568 7.45744 11.6455 8.09897 11.3534L13.8261 8.7455C14.031 8.65222 14.2662 8.65222 14.4711 8.7455C15.0786 9.02215 15.0787 9.88522 14.4711 10.1619L10.2122 12.1011Z"
fill="white"
/>
<path
d="M17.4292 21.508L26.21 17.3477L26.21 21.2122C26.21 21.8264 25.7851 22.3986 25.0814 22.732L17.4292 26.3576C16.9307 26.5938 16.2894 26.5938 15.7909 26.3576L8.13875 22.732C7.43505 22.3986 7.01008 21.8264 7.01008 21.2122L7.0101 17.3477L15.7909 21.508C16.2895 21.7442 16.9307 21.7442 17.4292 21.508Z"
fill="#EB5756"
/>
<path
d="M3.52246 22.5539C3.52246 22.3546 3.68399 22.1931 3.88324 22.1931H5.744C5.94325 22.1931 6.10477 22.3546 6.10477 22.5539V25.8232C6.10477 26.0224 5.94325 26.184 5.744 26.184H3.88324C3.68399 26.184 3.52246 26.0224 3.52246 25.8232V22.5539Z"
fill="#1C3557"
/>
</svg>
);

export default GraduateLogo;
Loading
Loading