Typed Redux!

frontend/package.json

@@ -19,6 +19,7 @@
 	},
 	"dependencies": {
 		"@apollo/client": "^3.2.5",
+		"@types/object-hash": "^3.0.5",
 		"axios": "^1.2.6",
 		"bootstrap": "^4.5.2",
 		"color": "^3.1.3",

frontend/src/Berkeleytime.tsx

@@ -1,11 +1,11 @@
+import { IconoirProvider } from 'iconoir-react';
 import { memo, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { openBanner, enterMobile, exitMobile, openLandingModal } from './redux/common/actions';
 import useDimensions from 'react-cool-dimensions';
+import { useDispatch } from 'react-redux';
+import { fetchEnrollContext } from 'redux/enrollment/actions';
 import easterEgg from 'utils/easterEgg';
 import Routes from './Routes';
-import { fetchEnrollContext } from 'redux/actions';
-import { IconoirProvider } from 'iconoir-react';
+import { enterMobile, exitMobile, openBanner, openLandingModal } from './redux/common/actions';
 
 const Berkeleytime = () => {
 	const dispatch = useDispatch();

frontend/src/Routes.tsx

@@ -19,7 +19,6 @@ const RemoteScheduler = () => import('./app/Scheduler/RemoteSchedulerPage');
 const ViewSchedule = () => import('./app/Scheduler/ViewSchedule');
 const PrivacyPolicy = () => import('./views/PrivacyPolicy');
 const TermsOfService = () => import('./views/TermsOfService');
-const RedirectLink = () => import('./views/RedirectLink');
 // const Apply = () => import('./views/Apply');
 
 function ScheduleRedirect() {
@@ -48,8 +47,7 @@ const router = createBrowserRouter([
 			{ path: '/schedule/:scheduleId', lazy: ViewSchedule },
 			{ path: '/error', Component: Error },
 			{ path: '/legal/privacy', lazy: PrivacyPolicy },
-			{ path: '/legal/terms', lazy: TermsOfService },
-			{ path: '/redirect', lazy: RedirectLink },
+			{ path: '/legal/terms', lazy: TermsOfService }
 			// { path: '/apply', lazy: Apply }
 		]
 	},

frontend/src/app/Enrollment/index.jsx

@@ -1,20 +1,17 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-
+import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router-dom';
+import {
+    enrollRemoveCourse,
+    enrollReset,
+    fetchEnrollClass,
+    fetchEnrollContext,
+    fetchEnrollFromUrl
+} from 'redux/enrollment/actions';
+import info from '../../assets/img/images/graphs/info.svg';
 import ClassCardList from '../../components/ClassCards/ClassCardList';
-import EnrollmentGraphCard from '../../components/GraphCard/EnrollmentGraphCard';
 import EnrollmentSearchBar from '../../components/ClassSearchBar/EnrollmentSearchBar';
-
-import info from '../../assets/img/images/graphs/info.svg';
-
-import {
-	fetchEnrollContext,
-	fetchEnrollClass,
-	enrollRemoveCourse,
-	enrollReset,
-	fetchEnrollFromUrl
-} from '../../redux/actions';
-import { useCallback, useEffect, useState } from 'react';
+import EnrollmentGraphCard from '../../components/GraphCard/EnrollmentGraphCard';
 
 const toUrlForm = (s) => {
 	return s.toLowerCase().split(' ').join('-');

frontend/src/app/Grades/index.jsx

@@ -1,20 +1,17 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-
 import { useDispatch, useSelector } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router-dom';
+import {
+    fetchGradeClass,
+    fetchGradeContext,
+    fetchGradeFromUrl,
+    gradeRemoveCourse,
+    gradeReset
+} from 'redux/grades/actions';
+import info from '../../assets/img/images/graphs/info.svg';
 import ClassCardList from '../../components/ClassCards/ClassCardList';
-import GradesGraphCard from '../../components/GraphCard/GradesGraphCard';
 import GradesSearchBar from '../../components/ClassSearchBar/GradesSearchBar';
-
-import info from '../../assets/img/images/graphs/info.svg';
-
-import {
-	fetchGradeContext,
-	fetchGradeClass,
-	gradeRemoveCourse,
-	gradeReset,
-	fetchGradeFromUrl
-} from '../../redux/actions';
+import GradesGraphCard from '../../components/GraphCard/GradesGraphCard';
 
 const toUrlForm = (s) => {
 	s = s.replace('/', '_');

frontend/src/components/ClassCards/ClassCardList.jsx

@@ -1,7 +1,6 @@
 import { Container, Row } from 'react-bootstrap';
-
+import colors from 'utils/colors';
 import ClassCard from './ClassCard';
-import vars from '../../utils/variables';
 
 export default function ClassCardList({
 	selectedCourses,
@@ -19,7 +18,7 @@ export default function ClassCardList({
 						id={item.id}
 						course={item.course}
 						title={item.title}
-						fill={vars.colors[item.colorId]}
+						fill={colors[item.colorId]}
 						semester={item.semester === 'all' ? 'All Semesters' : item.semester}
 						faculty={item.instructor === 'all' ? 'All Instructors' : item.instructor}
 						removeCourse={removeCourse}

frontend/src/components/ClassSearchBar/EnrollmentSearchBar.jsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Container, Row, Col, Button } from 'react-bootstrap';
 import hash from 'object-hash';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, Col, Container, Row } from 'react-bootstrap';
 
-import { fetchEnrollSelected } from '../../redux/actions';
-import { useDispatch, useSelector } from 'react-redux';
 import BTSelect from 'components/Custom/Select';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchEnrollSelected } from 'redux/enrollment/actions';
 
 const buildCoursesOptions = (courses) => {
 	if (!courses) {

frontend/src/components/ClassSearchBar/GradesSearchBar.jsx

@@ -1,11 +1,9 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Container, Row, Col, Button } from 'react-bootstrap';
+import BTSelect from 'components/Custom/Select';
 import hash from 'object-hash';
-
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, Col, Container, Row } from 'react-bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
-
-import { fetchGradeSelected } from '../../redux/actions';
-import BTSelect from 'components/Custom/Select';
+import { fetchGradeSelected } from 'redux/grades/actions';
 
 const sortOptions = [
 	{ value: 'instructor', label: 'By Instructor' },

frontend/src/components/Common/Banner.tsx

@@ -1,9 +1,8 @@
-import { useSelector, useDispatch } from 'react-redux';
 import { Button } from 'bt/custom';
-import { closeBanner } from '../../redux/common/actions';
-
-import close from '../../assets/svg/common/close.svg';
+import { useDispatch, useSelector } from 'react-redux';
+import { closeBanner } from 'redux/common/actions';
 import { ReduxState } from 'redux/store';
+import close from '../../assets/svg/common/close.svg';
 
 export default function Banner() {
 	const { banner } = useSelector((state: ReduxState) => state.common);

frontend/src/components/Common/Footer.tsx

@@ -36,9 +36,6 @@ export default function Footer() {
 								<A href="https://discord.gg/uP2bTPh99U" className="mb-2">
 									Discord
 								</A>
-								<A href="https://facebook.com/berkeleytime" className="mb-2">
-									Facebook
-								</A>
 							</div>
 						</div>
 					</Col>

frontend/src/components/Dashboard/CurrentSchedule.jsx → frontend/src/components/Dashboard/CurrentSchedule.tsx

@@ -1,6 +1,9 @@
-/* eslint-disable */
+import { CurrentScheduleProps } from './type';
 
-function CurrentSchedule({ current }) {
+/**
+ * @audit this file is not used
+ */
+function CurrentSchedule({ current }: CurrentScheduleProps) {
 	return (
 		<div className="card dashboard-card">
 			<div className="dashboard-container">
@@ -10,7 +13,7 @@ function CurrentSchedule({ current }) {
 				<div className="dashboard-schedule-list">
 					<h5>{current.semester}</h5>
 					{current.classes.map((currentClass) => (
-						<p>
+						<p key={currentClass.name}>
 							{currentClass.name} <span>{currentClass.units} Units</span>
 						</p>
 					))}

frontend/src/components/Dashboard/PastSchedule.jsx → frontend/src/components/Dashboard/PastSchedule.tsx

@@ -1,17 +1,20 @@
-/* eslint-disable */
+import { PastScheduleProps } from './type';
 
-function PastSchedule({ past }) {
+/**
+ * @audit this file is not used
+ */
+function PastSchedule({ past }: PastScheduleProps) {
 	return (
 		<div className="card dashboard-card">
 			<div className="dashboard-container">
 				<h4 className="dashboard-card-title">
 					<b>Past Semesters</b>
 				</h4>
 				{past.map((semester) => (
-					<div className="dashboard-schedule-list">
+					<div className="dashboard-schedule-list" key={semester.semester}>
 						<h5>{semester.semester}</h5>
 						{semester.classes.map((pastClass) => (
-							<p>
+							<p key={pastClass.name}>
 								{pastClass.name} <span>{pastClass.units} Units</span>
 							</p>
 						))}

frontend/src/components/Dashboard/Profile.jsx → frontend/src/components/Dashboard/Profile.tsx

@@ -1,8 +1,10 @@
-/* eslint-disable */
-
 import jemma from 'assets/img/about/2020-21/michael_1.jpg';
+import { ProfileProps } from './type';
 
-function Profile({ profile }) {
+/**
+ * @audit this file is not used
+ */
+function Profile({ profile }: ProfileProps) {
 	return (
 		<div className="card dashboard-card">
 			<div className="dashboard-container">
@@ -16,7 +18,7 @@ function Profile({ profile }) {
 					<div className="dashboard-profile-info-section">
 						<h4>Major(s)</h4>
 						{profile.majors.map((major) => (
-							<p>{major}</p>
+							<p key={major}>{major}</p>
 						))}
 					</div>
 					<div className="dashboard-profile-info-section">

frontend/src/components/Dashboard/type.ts

@@ -0,0 +1,16 @@
+export type CurrentScheduleProps = {
+	current: ScheduleSemesterType;
+};
+
+export type PastScheduleProps = {
+	past: ScheduleSemesterType[];
+};
+
+export type ProfileProps = {
+	profile: { name: string; pic: string; majors: string[]; academic_career: string; level: string };
+};
+
+export type ScheduleSemesterType = {
+	semester: string;
+	classes: { name: string; units: number }[];
+};

frontend/src/components/GraphCard/EnrollmentGraphCard.jsx

@@ -1,14 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Container, Row, Col } from 'react-bootstrap';
-
+import { Col, Container, Row } from 'react-bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
-import vars from '../../utils/variables';
-
+import { fetchEnrollData } from 'redux/enrollment/actions';
+import colors from 'utils/colors.ts';
+import EnrollmentInfoCard from '../EnrollmentInfoCard/EnrollmentInfoCard.jsx';
 import EnrollmentGraph from '../Graphs/EnrollmentGraph.jsx';
 import GraphEmpty from '../Graphs/GraphEmpty.jsx';
-import EnrollmentInfoCard from '../EnrollmentInfoCard/EnrollmentInfoCard.jsx';
-
-import { fetchEnrollData } from '../../redux/actions';
 
 export default function EnrollmentGraphCard({ isMobile, updateClassCardEnrollment }) {
 	const [hoveredClass, setHoveredClass] = useState(false);
@@ -144,7 +141,7 @@ export default function EnrollmentGraphCard({ isMobile, updateClassCardEnrollmen
 									}
 									todayPoint={hoveredClass.data[hoveredClass.data.length - 1]}
 									telebears={telebears}
-									color={vars.colors[hoveredClass.colorId]}
+									color={colors[hoveredClass.colorId]}
 									enrolledMax={hoveredClass.enrolled_max}
 									waitlistedMax={hoveredClass.waitlisted_max}
 								/>

frontend/src/components/GraphCard/GradesGraphCard.jsx

@@ -1,14 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Container, Row, Col } from 'react-bootstrap';
-
+import { Col, Container, Row } from 'react-bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
-import vars from '../../utils/variables';
-
+import { fetchGradeData } from 'redux/grades/actions';
+import colors from 'utils/colors';
+import GradesInfoCard from '../GradesInfoCard/GradesInfoCard';
 import GradesGraph from '../Graphs/GradesGraph';
 import GraphEmpty from '../Graphs/GraphEmpty';
-import GradesInfoCard from '../GradesInfoCard/GradesInfoCard';
-
-import { fetchGradeData } from '../../redux/actions';
 
 export default function GradesGraphCard({ isMobile, updateClassCardGrade }) {
 	const { gradesData, graphData, selectedCourses } = useSelector((state) => state.grade);
@@ -117,7 +114,7 @@ export default function GradesGraphCard({ isMobile, updateClassCardGrade }) {
 							}
 							selectedPercentiles={hoveredClass[hoveredClass.hoverGrade]}
 							denominator={hoveredClass.denominator}
-							color={vars.colors[hoveredClass.colorId]}
+							color={colors[hoveredClass.colorId]}
 							isMobile={isMobile}
 							graphEmpty={graphEmpty}
 						/>
@@ -153,7 +150,7 @@ export default function GradesGraphCard({ isMobile, updateClassCardGrade }) {
 									denominator={hoveredClass.denominator}
 									selectedPercentiles={hoveredClass[hoveredClass.hoverGrade]}
 									selectedGrade={hoveredClass.hoverGrade}
-									color={vars.colors[hoveredClass.colorId]}
+									color={colors[hoveredClass.colorId]}
 								/>
 							)}
 						</Col>

frontend/src/components/Graphs/EnrollmentGraph.jsx

@@ -1,16 +1,15 @@
 import {
-	LineChart,
-	XAxis,
-	YAxis,
-	Tooltip,
-	Line,
-	Legend,
-	ReferenceLine,
-	Label,
-	ResponsiveContainer
+    Label,
+    Legend,
+    Line,
+    LineChart,
+    ReferenceLine,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis
 } from 'recharts';
-
-import vars from '../../utils/variables';
+import colors from 'utils/colors';
 import emptyImage from '../../assets/img/images/graphs/empty.svg';
 
 const EmptyLabel = (props) => {
@@ -95,7 +94,7 @@ export default function EnrollmentGraph({
 									name={`${item.title} • ${item.section_name}`}
 									type="monotone"
 									dataKey={item.id}
-									stroke={vars.colors[item.colorId]}
+									stroke={colors[item.colorId]}
 									strokeWidth={3}
 									dot={false}
 									activeDot={{ onMouseOver: updateLineHover }}

frontend/src/components/Graphs/GradesGraph.jsx

@@ -1,8 +1,7 @@
-import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-import { percentileToString } from '../../utils/utils';
-
-import vars from '../../utils/variables';
+import { Bar, BarChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import colors from 'utils/colors';
 import emptyImage from '../../assets/img/images/graphs/empty.svg';
+import { percentileToString } from '../../utils/utils';
 
 const EmptyLabel = (props) => {
 	return (
@@ -99,7 +98,7 @@ export default function GradesGraph({
 									key={i}
 									name={`${item.title} • ${item.semester} • ${item.instructor}`}
 									dataKey={item.id}
-									fill={vars.colors[item.colorId]}
+									fill={colors[item.colorId]}
 									onMouseEnter={updateBarHover}
 									radius={[4, 4, 0, 0]}
 								/>
@@ -143,7 +142,7 @@ export default function GradesGraph({
 								key={i}
 								name={`${item.title} • ${item.semester} • ${item.instructor}`}
 								dataKey={item.id}
-								fill={vars.colors[item.colorId]}
+								fill={colors[item.colorId]}
 								onMouseEnter={updateBarHover}
 								label={<PercentageLabel />}
 								radius={[0, 4, 4, 0]}