shared assets: typed

frontend/src/components/ClassCards/ClassCard.jsx → frontend/src/components/ClassCards/ClassCard.tsx

@@ -1,22 +1,36 @@
 import { Col } from 'react-bootstrap';
 
 import ClassCardMobile from './ClassCardMobile';
+import { EnrollmentStatusType, TelebearsType } from 'redux/enrollment/types';
 
-function ClassCard(props) {
- const {
- id,
- course,
- title,
- fill,
- semester,
- faculty,
- removeCourse,
- colorId,
- additionalInfo,
- type,
- isMobile
- } = props;
-
+function ClassCard({
+ id,
+ course,
+ title,
+ fill,
+ semester,
+ instructor,
+ removeCourse,
+ colorId,
+ additionalInfo,
+ type,
+ isMobile
+}: {
+ id: string;
+ course: string;
+ title: string;
+ fill: string;
+ semester: string;
+ instructor: string;
+ removeCourse: (id: string, color: string) => void;
+ colorId: string;
+ additionalInfo:
+ | [string, number, string, number]
+ | [EnrollmentStatusType, TelebearsType, number[], number[]]
+ | undefined;
+ type: 'grades' | 'enrollment';
+ isMobile: boolean;
+}) {
  return (
  <Col md={4} lg={3} xl={3} className="class-card-column">
  <div className="class-card">
@@ -38,8 +52,10 @@ function ClassCard(props) {
  </svg>
  </div>
  </div>
- <div className="class-card-title" title={title}>{title}</div>
- <div className="class-card-options">{`${semester} • ${faculty}`}</div>
+ <div className="class-card-title" title={title}>
+ {title}
+ </div>
+ <div className="class-card-options">{`${semester} • ${instructor}`}</div>
 
  {isMobile ? <ClassCardMobile additionalInfo={additionalInfo} type={type} /> : null}
  </div>

frontend/src/components/ClassCards/ClassCardList.jsx → frontend/src/components/ClassCards/ClassCardList.tsx

@@ -2,13 +2,23 @@ import { Container, Row } from 'react-bootstrap';
 
 import ClassCard from './ClassCard';
 import vars from '../../utils/variables';
+import { FormattedCourseType } from 'redux/types';
+import { EnrollmentStatusType, TelebearsType } from 'redux/enrollment/types';
 
 export default function ClassCardList({
  selectedCourses,
  removeCourse,
  additionalInfo,
  type,
  isMobile
+}: {
+ selectedCourses: FormattedCourseType[];
+ removeCourse: (id: string, color: string) => void;
+ additionalInfo:
+ | [string, number, string, number][]
+ | [EnrollmentStatusType, TelebearsType, number[], number[]][];
+ type: 'grades' | 'enrollment';
+ isMobile: boolean;
 }) {
  return (
  <Container fluid className="class-card-list">
@@ -19,12 +29,12 @@ export default function ClassCardList({
  id={item.id}
  course={item.course}
  title={item.title}
- fill={vars.colors[item.colorId]}
+ fill={vars.colors[parseInt(item.colorId)]}
  semester={item.semester === 'all' ? 'All Semesters' : item.semester}
- faculty={item.instructor === 'all' ? 'All Instructors' : item.instructor}
+ instructor={item.instructor === 'all' ? 'All Instructors' : item.instructor}
  removeCourse={removeCourse}
  colorId={item.colorId}
- additionalInfo={additionalInfo ? additionalInfo[i] : 0}
+ additionalInfo={additionalInfo ? additionalInfo[i] : undefined}
  type={type}
  isMobile={isMobile}
  />

frontend/src/components/ClassCards/ClassCardMobile.tsx

@@ -0,0 +1,88 @@
+import { EnrollmentStatusType, TelebearsType } from 'redux/enrollment/types';
+import { getGradeColor, getEnrollmentDay, applyIndicatorEnrollment } from '../../utils/utils';
+
+function ClassCardMobile({
+ additionalInfo,
+ type
+}: {
+ additionalInfo:
+ | [string, number, string, number]
+ | [EnrollmentStatusType, TelebearsType, number[], number[]]
+ | undefined;
+ type: 'grades' | 'enrollment';
+}) {
+ if (type === 'grades') {
+ additionalInfo = additionalInfo as [string, number, string, number];
+
+ const courseLetter = additionalInfo ? additionalInfo[0].toString() : undefined;
+ const courseGPA = additionalInfo ? additionalInfo[1] : undefined;
+ const sectionLetter = additionalInfo ? additionalInfo[2].toString() : undefined;
+ const sectionGPA = additionalInfo ? additionalInfo[3] : undefined;
+
+ return (
+ <div className="class-card-mobile">
+ <div className="class-card-mobile-column">
+ <div className="bt-h6">Course Average</div>
+ {courseLetter ? (
+ <div className="bt-h6">
+ <span className={getGradeColor(courseLetter)}>{courseLetter}</span> (GPA: {courseGPA})
+ </div>
+ ) : (
+ '--'
+ )}
+ </div>
+ <div className="class-card-mobile-column">
+ <div className="bt-h6">Section Average</div>
+ {sectionLetter ? (
+ <div className="bt-h6">
+ <span className={getGradeColor(sectionLetter)}>{sectionLetter}</span> (GPA:{' '}
+ {sectionGPA})
+ </div>
+ ) : (
+ '--'
+ )}
+ </div>
+ </div>
+ );
+ } else {
+ additionalInfo = additionalInfo as [EnrollmentStatusType, TelebearsType, number[], number[]];
+
+ const latest_point = additionalInfo ? additionalInfo[0] : undefined;
+ const telebears = additionalInfo ? additionalInfo[1] : undefined;
+ const enrollment_info = additionalInfo ? additionalInfo[2] : undefined;
+ const waitlisted_info = additionalInfo ? additionalInfo[3] : undefined;
+
+ let date_info;
+ if (latest_point != null && telebears != null) {
+ date_info = getEnrollmentDay(latest_point, telebears);
+ }
+
+ return (
+ <div className="class-card-mobile">
+ <div className="class-card-mobile-column">
+ <div className="bt-h6">
+ {date_info ? date_info['period'] + ': ' + date_info['daysAfterPeriodStarts'] : '--'}
+ </div>
+ <div className="bt-h6">
+ Enrollment Percent:
+ {enrollment_info !== undefined &&
+ waitlisted_info !== null &&
+ enrollment_info.length === 3
+ ? applyIndicatorEnrollment(...(enrollment_info as [number, number, number]))
+ : '--'}
+ </div>
+ <div className="bt-h6">
+ Waitlist Percent:
+ {waitlisted_info !== undefined &&
+ waitlisted_info !== null &&
+ waitlisted_info.length === 3
+ ? applyIndicatorEnrollment(...(waitlisted_info as [number, number, number]))
+ : '--'}
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
+
+export default ClassCardMobile;