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]}