Catalog Tabs

frontend/package.json

@@ -19,8 +19,10 @@
 	},
 	"dependencies": {
 		"@apollo/client": "^3.2.5",
+		"@radix-ui/react-tabs": "^1.0.4",
 		"axios": "^1.2.6",
 		"bootstrap": "^4.5.2",
+		"clsx": "^2.0.0",
 		"color": "^3.1.3",
 		"date-fns": "^2.21.1",
 		"fuse.js": "^6.6.2",
@@ -41,7 +43,7 @@
 		"react-select": "^5.7.2",
 		"react-tooltip": "^5.7.2",
 		"react-window": "^1.8.5",
-		"recharts": "^2.3.2",
+		"recharts": "^2.8.0",
 		"redux": "^4.0.4",
 		"redux-thunk": "^2.3.0"
 	},
@@ -79,7 +81,7 @@
 		"sass": "^1.50.1",
 		"serve": "^14.2.0",
 		"typescript": "^4.9.5",
-		"vite": "^4.3.1",
+		"vite": "^4.4.11",
 		"vite-plugin-html": "^3.2.0",
 		"vite-plugin-svgr": "^2.4.0",
 		"vite-tsconfig-paths": "^4.2.0"

frontend/src/Berkeleytime.tsx

@@ -1,11 +1,10 @@
-import { memo, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { openBanner, enterMobile, exitMobile, openLandingModal } from './redux/common/actions';
 import useDimensions from 'react-cool-dimensions';
 import easterEgg from 'utils/easterEgg';
 import Routes from './Routes';
-import { fetchEnrollContext } from 'redux/actions';
-import { IconoirProvider } from 'iconoir-react';
+import { fetchEnrollContext, fetchGradeContext } from 'redux/actions';
 
 const Berkeleytime = () => {
 	const dispatch = useDispatch();
@@ -22,8 +21,10 @@ const Berkeleytime = () => {
 	});
 
 	useEffect(() => {
+		observe(document.getElementById('root'));
 		// Fetch enrollment context early on for catalog and enrollment page.
 		dispatch(fetchEnrollContext());
+		dispatch(fetchGradeContext());
 
 		const bannerType = 'fa23recruitment'; // should match value in ./redux/common/reducer.ts
 		if (localStorage.getItem('bt-hide-banner') !== bannerType) {
@@ -41,15 +42,9 @@ const Berkeleytime = () => {
 		if (localStorage.getItem(key) === null) {
 			localStorage.setItem(key, key);
 		}
-	}, [dispatch]);
-
-	return (
-		<div ref={observe} className="app">
-			<IconoirProvider iconProps={{ strokeWidth: 2 }}>
-				<Routes />
-			</IconoirProvider>
-		</div>
-	);
+	}, [dispatch, observe]);
+
+	return <Routes />;
 };
 
-export default memo(Berkeleytime);
+export default Berkeleytime;

frontend/src/app/Catalog/CatalogFilters/CatalogFilters.tsx → frontend/src/app/Catalog/CatalogFilters/index.tsx

@@ -1,77 +1,47 @@
-import {
-	Dispatch,
-	memo,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState
-} from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { ActionMeta } from 'react-select';
 import BTSelect from 'components/Custom/Select';
-
-import catalogService from '../service';
 import { ReactComponent as SearchIcon } from 'assets/svg/common/search.svg';
 import { ReactComponent as FilterIcon } from 'assets/svg/catalog/filter.svg';
 import BTInput from 'components/Custom/Input';
-import { CurrentFilters, FilterOption, SortOption, CatalogFilterKeys, CatalogSlug } from '../types';
-
+import { FilterOption, SortOption, CatalogFilterKey, CatalogSlug, FilterTemplate } from '../types';
 import { useGetFiltersQuery } from 'graphql';
 import BTLoader from 'components/Common/BTLoader';
-import { useNavigate, useParams } from 'react-router-dom';
-
+import { useNavigate, useLocation, useParams } from 'react-router';
 import styles from './CatalogFilters.module.scss';
 import { SortDown, SortUp } from 'iconoir-react';
+import useCatalog from '../useCatalog';
+import { FILTER_TEMPLATE, SORT_OPTIONS, putFilterOptions } from '../service';
 
-type CatalogFilterProps = {
-	currentFilters: CurrentFilters;
-	sortQuery: SortOption;
-	searchQuery: string;
-	setCurrentFilters: Dispatch<SetStateAction<CurrentFilters>>;
-	setSortQuery: Dispatch<SetStateAction<SortOption>>;
-	setSearchQuery: Dispatch<SetStateAction<string>>;
-	setDir: Dispatch<SetStateAction<boolean>>;
-	sortDir: boolean;
-};
-
-const { SORT_OPTIONS, FILTER_TEMPLATE, INITIAL_FILTERS } = catalogService;
-
-const CatalogFilters = (props: CatalogFilterProps) => {
-	const {
-		currentFilters,
-		setCurrentFilters,
-		sortQuery,
-		searchQuery,
-		setSortQuery,
-		setSearchQuery,
-		setDir,
-		sortDir
-	} = props;
+const CatalogFilters = () => {
+	const [template, setTemplate] = useState<FilterTemplate | null>(null);
+	const { loading, error } = useGetFiltersQuery({
+		onCompleted: (data) => setTemplate(putFilterOptions(FILTER_TEMPLATE, data))
+	});
 
-	const { data, loading, error } = useGetFiltersQuery();
-	const [isOpen, setOpen] = useState(false);
-	const filters = useMemo(() => catalogService.processFilterData(data), [data]);
 	const navigate = useNavigate();
+	const location = useLocation();
 	const slug = useParams<CatalogSlug>();
+	const [isOpen, setOpen] = useState(false);
 	const modalRef = useRef<HTMLDivElement>(null);
+	const [{ sortDir, sortQuery, searchQuery, filters }, dispatch] = useCatalog();
 
-	const filterList = useMemo(
-		() => catalogService.putFilterOptions(FILTER_TEMPLATE, filters),
-		[filters]
-	);
+	useEffect(() => {
+		const params = new URLSearchParams(location.search);
+		dispatch({ type: 'search', query: params.get('q') ?? '' });
+	}, [dispatch, location.search]);
 
 	useEffect(() => {
-		if (filterList?.semester) {
-			const options = filterList.semester.options as FilterOption[];
+		if (template?.semester) {
+			const options = template.semester.options as FilterOption[];
 			const semester = options.find(({ label }) => label === slug?.semester) ?? null;
 
-			setCurrentFilters((prev) => ({
-				...prev,
-				semester: semester ?? options[0]
-			}));
+			dispatch({
+				type: 'filter',
+				filters: { semester: semester ?? options[0] }
+			});
 		}
-	}, [filterList, setCurrentFilters, slug?.semester]);
+	}, [template, slug?.semester, dispatch]);
 
 	useEffect(() => {
 		const ref = modalRef;
@@ -88,33 +58,24 @@ const CatalogFilters = (props: CatalogFilterProps) => {
 		};
 	}, [isOpen, modalRef, setOpen]);
 
-	const handleFilterReset = useCallback(() => {
-		setSortQuery(SORT_OPTIONS[0]);
-		setSearchQuery('');
-
-		if (filterList) {
-			const semester = filterList.semester.options[0] as FilterOption;
-			setCurrentFilters({
-				...INITIAL_FILTERS,
-				semester
-			});
-
+	const handleFilterReset = () => {
+		if (template) {
+			const semester = template.semester.options[0] as FilterOption;
+			dispatch({ type: 'reset', filters: { semester } });
 			navigate({ pathname: `/catalog/${semester.value.name}` });
 		}
-	}, [filterList, navigate, setCurrentFilters, setSearchQuery, setSortQuery]);
+	};
 
 	const handleFilterChange = (
 		newValue: FilterOption | readonly FilterOption[] | null,
 		meta: ActionMeta<FilterOption>
 	) => {
-		const key = meta.name as CatalogFilterKeys;
-		setCurrentFilters((prev) => ({
-			...prev,
-			[key]: newValue
-		}));
-
+		dispatch({
+			type: 'filter',
+			filters: { [meta.name as CatalogFilterKey]: newValue }
+		});
 		// Update the url slug if semester filter changes.
-		if (key === 'semester') {
+		if (meta.name === 'semester') {
 			navigate({
 				pathname: `/catalog/${(newValue as FilterOption)?.value?.name}`
 					.concat(slug?.abbreviation ? `/${slug.abbreviation}` : '')
@@ -131,8 +92,11 @@ const CatalogFilters = (props: CatalogFilterProps) => {
 					style={{ border: 'none', width: '100%' }}
 					value={searchQuery}
 					onChange={(e) => {
-						navigate({ pathname: location.pathname, search: `q=${e.target.value}` });
-						setSearchQuery(e.target.value);
+						navigate(
+							{ pathname: location.pathname, search: `q=${e.target.value}` },
+							{ replace: true }
+						);
+						dispatch({ type: 'search', query: e.target.value });
 					}}
 					type="search"
 					placeholder="Search for a class..."
@@ -153,8 +117,11 @@ const CatalogFilters = (props: CatalogFilterProps) => {
 					<BTInput
 						value={searchQuery}
 						onChange={(e) => {
-							navigate({ pathname: location.pathname, search: `q=${e.target.value}` });
-							setSearchQuery(e.target.value);
+							navigate(
+								{ pathname: location.pathname, search: `q=${e.target.value}` },
+								{ replace: true }
+							);
+							dispatch({ type: 'search', query: e.target.value });
 						}}
 						type="search"
 						placeholder="Search for a class..."
@@ -168,20 +135,22 @@ const CatalogFilters = (props: CatalogFilterProps) => {
 							isClearable={false}
 							options={SORT_OPTIONS}
 							isSearchable={false}
-							onChange={(newValue) => setSortQuery(newValue as SortOption)}
+							onChange={(newValue) =>
+								dispatch({ type: 'sort', query: newValue as SortOption })
+							}
 						/>
-						<button onClick={() => setDir((prev) => !prev)}>
-							{sortDir ? <SortUp color="#8A8A8A" /> : <SortDown color="#8A8A8A" />}
+						<button onClick={() => dispatch({ type: 'sortDir' })}>
+							{sortDir === 'DESC' ? <SortUp color="#8A8A8A" /> : <SortDown color="#8A8A8A" />}
 						</button>
 					</div>
 
-					{filterList &&
-						Object.entries(filterList).map(([key, filter]) => (
+					{template &&
+						Object.entries(template).map(([key, filter]) => (
 							<div className={styles.item} key={key}>
 								<p>{filter.name}</p>
 								<BTSelect
 									name={key}
-									value={currentFilters[key as CatalogFilterKeys]}
+									value={filters[key as CatalogFilterKey]}
 									isClearable={filter.isClearable}
 									isMulti={filter.isMulti}
 									closeMenuOnSelect={filter.closeMenuOnSelect}

frontend/src/app/Catalog/CatalogList/CatalogList.module.scss

@@ -103,29 +103,33 @@
 	}
 }
 
-.grade {
+.gradeWrapper {
 	display: flex;
-	justify-content: center;
+	flex-direction: column;
+
+	span {
+		line-height: 20px;
+	}
 }
 
 .A {
-	color: $bt-indicator-green;
+	color: $bt-indicator-green !important;
 }
 
 .B {
-	color: $bt-indicator-yellow;
+	color: $bt-indicator-yellow !important;
 }
 
 .C {
-	color: $bt-indicator-orange;
+	color: $bt-indicator-orange !important;
 }
 
 .D {
-	color: $bt-indicator-squash;
+	color: $bt-indicator-squash !important;
 }
 
 .F {
-	color: $bt-indicator-red;
+	color: $bt-indicator-red !important;
 }
 
 .itemStats {