Skip to content

Commit

Permalink
Enrollment: typing IP
Browse files Browse the repository at this point in the history
  • Loading branch information
@akmazian
akmazian committed Nov 7, 2023
1 parent 4f6d314 commit c27d53c
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 57 deletions.
75 changes: 45 additions & 30 deletions frontend/src/app/Enrollment/index.jsx → frontend/src/app/Enrollment/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,35 @@
import { useLocation, useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';

import { useDispatch, useSelector } from 'react-redux';
import ClassCardList from '../../components/ClassCards/ClassCardList';
import EnrollmentSearchBar from '../../components/ClassSearchBar/EnrollmentSearchBar.jsx';
import EnrollmentGraphCard from '../../components/GraphCard/EnrollmentGraphCard';
import EnrollmentSearchBar from '../../components/ClassSearchBar/EnrollmentSearchBar';

import info from '../../assets/img/images/graphs/info.svg';

import { useCallback, useEffect, useState } from 'react';
import type { UnformattedCourseType } from 'redux/types';
import { useReduxSelector } from 'redux/store';
import {
fetchEnrollContext,
fetchEnrollClass,
enrollRemoveCourse,
enrollReset,
fetchEnrollClass,
fetchEnrollContext,
fetchEnrollFromUrl
} from '../../redux/actions';
import { useCallback, useEffect, useState } from 'react';
} from '../../redux/enrollment/actions';
import { EnrollmentStatusType, TelebearsType } from 'redux/enrollment/types';

const toUrlForm = (s) => {
return s.toLowerCase().split(' ').join('-');
const toUrlForm = (string: string) => {
return string.toLowerCase().split(' ').join('-');
};

export function Component() {
const [additionalInfo, setAdditionalInfo] = useState([]);
const [additionalInfo, setAdditionalInfo] = useState<
[EnrollmentStatusType, TelebearsType, number[], number[]][]
>([]);

const { context, selectedCourses, usedColorIds } = useSelector((state) => state.enrollment);
const { mobile: isMobile } = useSelector((state) => state.common);
const { context, selectedCourses, usedColorIds } = useReduxSelector((state) => state.enrollment);
const { mobile: isMobile } = useReduxSelector((state) => state.common);

const dispatch = useDispatch();
const location = useLocation();
Expand All @@ -33,7 +38,7 @@ export function Component() {
useEffect(() => {
const fillFromUrl = () => {
try {
let url = location.pathname;
const url = location.pathname;

if (url && (url === '/enrollment/' || url === '/enrollment')) {
dispatch(enrollReset());
Expand All @@ -48,13 +53,13 @@ export function Component() {
dispatch(fetchEnrollContext());
dispatch(enrollReset());
fillFromUrl();
}, []);
}, [dispatch, location.pathname, navigate]);

const addToUrl = useCallback(
(course) => {
let instructor = course.instructor === 'all' ? 'all' : course.sections[0];
(course: UnformattedCourseType) => {
const instructor = course.instructor === 'all' ? 'all' : course.sections[0];

let courseUrl = `${course.colorId}-${course.courseID}-${toUrlForm(
const courseUrl = `${course.colorId}-${course.courseID}-${toUrlForm(
course.semester
)}-${instructor}`;

Expand All @@ -72,8 +77,8 @@ export function Component() {
);

const addCourse = useCallback(
(course) => {
for (let selected of selectedCourses) {
(course: UnformattedCourseType) => {
for (const selected of selectedCourses) {
if (selected.id === course.id) {
return;
}
Expand All @@ -97,16 +102,16 @@ export function Component() {
);

const refillUrl = useCallback(
(id) => {
let updatedCourses = selectedCourses.filter((classInfo) => classInfo.id !== id);
(id: string) => {
const updatedCourses = selectedCourses.filter((classInfo) => classInfo.id !== id);

let url = '/enrollment/';

for (let i = 0; i < updatedCourses.length; i++) {
let c = updatedCourses[i];
const course = updatedCourses[i];
if (i !== 0) url += '&';
let instructor = c.instructor === 'all' ? 'all' : c.sections[0];
url += `${c.colorId}-${c.courseID}-${toUrlForm(c.semester)}-${instructor}`;
const instructor = course.instructor === 'all' ? 'all' : course.sections[0];
url += `${course.colorId}-${course.courseID}-${toUrlForm(course.semester)}-${instructor}`;
}

navigate(url, { replace: true });
Expand All @@ -115,20 +120,29 @@ export function Component() {
);

const removeCourse = useCallback(
(id, color) => {
(id: string, color: string) => {
refillUrl(id);
dispatch(enrollRemoveCourse(id, color));
},
[refillUrl, dispatch]
);

const updateClassCardEnrollment = useCallback(
(latest_point, telebears, enrolled_info, waitlisted_info) => {
var info = [];

for (var i = 0; i < latest_point.length; i++) {
info.push([latest_point[i], telebears[i], enrolled_info[i], waitlisted_info[i]]);
}
(
latest_point: EnrollmentStatusType[],
telebears: TelebearsType[],
enrolled_info: number[][],
waitlisted_info: number[][]
) => {
const info = latest_point.map(
(_, i) =>
[latest_point[i], telebears[i], enrolled_info[i], waitlisted_info[i]] as [
EnrollmentStatusType,
TelebearsType,
number[],
number[]
]
);

setAdditionalInfo(info);
},
Expand All @@ -144,6 +158,7 @@ export function Component() {
fromCatalog={location.state ? location.state.course : false}
isFull={selectedCourses.length === 4}
isMobile={isMobile}
sectionNumber={'qwq'}
/>

<ClassCardList
Expand Down
16 changes: 16 additions & 0 deletions ...EnrollmentInfoCard/EnrollmentInfoCard.jsx → ...EnrollmentInfoCard/EnrollmentInfoCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useMemo } from 'react';
import { getEnrollmentDay, applyIndicatorEnrollment } from '../../utils/utils';
import { TelebearsType } from 'redux/enrollment/types';

export default function EnrollmentInfoCard({
title,
Expand All @@ -11,6 +12,21 @@ export default function EnrollmentInfoCard({
color,
enrolledMax,
waitlistedMax
}: {
title: string;
subtitle: string;
semester: string;
instructor: string;
selectedPoint: {
enrolled: number;
enrolled_percent: number;
waitlisted: number;
waitlisted_percent: number;
};
telebears: TelebearsType;
color: string;
enrolledMax: number;
waitlistedMax: number;
}) {
const { period, daysAfterPeriodStarts } = useMemo(
() => getEnrollmentDay(selectedPoint, telebears),
Expand Down
67 changes: 40 additions & 27 deletions ...ponents/GraphCard/EnrollmentGraphCard.jsx → ...ponents/GraphCard/EnrollmentGraphCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,45 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import { HTMLAttributes, useCallback, useEffect, useMemo, useState } from 'react';
import { Col, Container, Row } from 'react-bootstrap';

import { useDispatch, useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import vars from '../../utils/variables';

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);
const { enrollmentData, graphData, selectedCourses } = useSelector((state) => state.enrollment);
import { EnrollmentDataType, EnrollmentStatusType, TelebearsType } from 'redux/enrollment/types';
import { useReduxSelector } from 'redux/store';
import { fetchEnrollData } from '../../redux/enrollment/actions';
import { FormattedCourseType } from 'redux/types';

export default function EnrollmentGraphCard({
isMobile,
updateClassCardEnrollment,
...rest
}: {
isMobile: boolean;
updateClassCardEnrollment: (
latest_point: EnrollmentStatusType[],
telebears: TelebearsType[],
enrolled_info: number[][],
waitlisted_info: number[][]
) => void;
} & HTMLAttributes<HTMLDivElement>) {
const [hoveredClass, setHoveredClass] = useState<
FormattedCourseType & EnrollmentDataType & { hoverDay: number }
>();
const { enrollmentData, graphData, selectedCourses } = useReduxSelector(
(state) => state.enrollment
);
const dispatch = useDispatch();

useEffect(() => {
dispatch(fetchEnrollData(selectedCourses));
}, [selectedCourses, dispatch]);

const update = useCallback(
(course, day) => {
(course: FormattedCourseType, day: number) => {
if (!course || !enrollmentData || enrollmentData.length === 0) return;

const selectedEnrollment = enrollmentData.filter((c) => course.id === c.id)[0];
Expand All @@ -45,7 +64,9 @@ export default function EnrollmentGraphCard({ isMobile, updateClassCardEnrollmen
update(selectedCourses[0], 1);
}

const latest_point = enrollmentData.map((course) => course.data[course.data.length - 1]);
const latest_point: EnrollmentStatusType[] = enrollmentData.map(
(course) => course.data[course.data.length - 1]
);
const telebears = enrollmentData.map((course) => course.telebears);
const enrolled_info = latest_point.map((course) => [
course.enrolled,
Expand All @@ -63,41 +84,33 @@ export default function EnrollmentGraphCard({ isMobile, updateClassCardEnrollmen

// Handler function for updating EnrollmentInfoCard on hover
const updateLineHover = useCallback(
(lineData) => {
const selectedClassID = lineData.dataKey;
const day = lineData.index;
const selectedCourse = selectedCourses.filter((course) => selectedClassID === course.id)[0];
update(selectedCourse, day);
({ dataKey: selectedClassID, index: day }: { dataKey: string; index: number }) => {
update(selectedCourses.filter((course) => selectedClassID === course.id)[0], day);
},
[selectedCourses, update]
);

// Handler function for updating EnrollmentInfoCard on hover with single course
const updateGraphHover = useCallback(
(data) => {
const { isTooltipActive, activeLabel } = data;

({ isTooltipActive, activeLabel: day }: { isTooltipActive: boolean; activeLabel: number }) => {
if (!isTooltipActive || selectedCourses.length !== 1) return;

const selectedCourse = selectedCourses[0];
const day = activeLabel;

update(selectedCourse, day);
},
[selectedCourses, update]
);

const telebears = useMemo(
() => (enrollmentData.length ? enrollmentData[0].telebears : {}),
[enrollmentData]
);
const telebears = useMemo(() => enrollmentData[0].telebears, [enrollmentData]);

const graphEmpty = useMemo(
() => enrollmentData.length === 0 || selectedCourses.length === 0,
[enrollmentData, selectedCourses]
);

return (
<div className="enrollment-graph">
<div className="enrollment-graph" {...rest}>
<Container fluid>
<Row>
<Col
Expand Down Expand Up @@ -133,6 +146,7 @@ export default function EnrollmentGraphCard({ isMobile, updateClassCardEnrollmen
<Col md={{ span: 4, order: 2 }} lg={{ span: 4, order: 2 }}>
{hoveredClass && (
<EnrollmentInfoCard
// {...hoveredClass}
title={hoveredClass.title}
subtitle={hoveredClass.subtitle}
semester={hoveredClass.semester}
Expand All @@ -142,9 +156,8 @@ export default function EnrollmentGraphCard({ isMobile, updateClassCardEnrollmen
selectedPoint={
hoveredClass.data.filter((pt) => pt.day === hoveredClass.hoverDay)[0]
}
todayPoint={hoveredClass.data[hoveredClass.data.length - 1]}
telebears={telebears}
color={vars.colors[hoveredClass.colorId]}
color={vars.colors[parseInt(hoveredClass.colorId)]}
enrolledMax={hoveredClass.enrolled_max}
waitlistedMax={hoveredClass.waitlisted_max}
/>
Expand Down

0 comments on commit c27d53c

Please sign in to comment.