Unify quarter names and create a type for it

Ignoring dependencies array pre-commit hook for now because I want to make sure this doesn't break anything

site/src/component/GradeDist/GradeDist.tsx

@@ -5,7 +5,7 @@ import Pie from './Pie';
 import './GradeDist.scss';
 import axios from 'axios';
 
-import { CourseGQLData, ProfessorGQLData } from '../../types/types';
+import { CourseGQLData, ProfessorGQLData, QuarterName } from '../../types/types';
 import { GradesRaw } from 'peterportal-api-next-types';
 
 interface GradeDistProps {
@@ -22,7 +22,7 @@ interface Entry {
 type ChartTypes = 'bar' | 'pie';
 
 const GradeDist: FC<GradeDistProps> = (props) => {
-  const quarterOrder = ['Winter', 'Spring', 'Summer1', 'Summer10wk', 'Summer2', 'Fall'];
+  const quarterOrder: QuarterName[] = ['Winter', 'Spring', 'Summer1', 'Summer10wk', 'Summer2', 'Fall'];
   /*
    * Initialize a GradeDist block on the webpage.
    * @param props attributes received from the parent element
@@ -116,8 +116,8 @@ const GradeDist: FC<GradeDistProps> = (props) => {
         if (b.value === 'ALL') {
           return 1;
         }
-        const [thisQuarter, thisYear] = a.value.split(' ');
-        const [thatQuarter, thatYear] = b.value.split(' ');
+        const [thisQuarter, thisYear] = a.value.split(' ') as [QuarterName, string];
+        const [thatQuarter, thatYear] = b.value.split(' ') as [QuarterName, string];
         if (thisYear === thatYear) {
           return quarterOrder.indexOf(thatQuarter) - quarterOrder.indexOf(thisQuarter);
         } else {

site/src/component/ReviewForm/ReviewForm.tsx

@@ -15,8 +15,9 @@ import ReCAPTCHA from 'react-google-recaptcha';
 import { addReview } from '../../store/slices/reviewSlice';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { ReviewProps } from '../Review/Review';
-import { ReviewData } from '../../types/types';
+import { QuarterName, ReviewData } from '../../types/types';
 import ThemeContext from '../../style/theme-context';
+import { quarterNames } from '../../helpers/planner';
 
 interface ReviewFormProps extends ReviewProps {
   closeForm: () => void;
@@ -281,7 +282,7 @@ const ReviewForm: FC<ReviewFormProps> = (props) => {
                       <option disabled={true} value="">
                         Quarter
                       </option>
-                      {['Fall', 'Winter', 'Spring', 'Summer1', 'Summer10wk', 'Summer2'].map((quarter) => (
+                      {quarterNames.map((quarter) => (
                         <option key={quarter}>{quarter}</option>
                       ))}
                     </Form.Control>

site/src/helpers/planner.ts

@@ -1,11 +1,36 @@
-import { PlannerYearData, SavedPlannerYearData } from '../types/types';
+import { PlannerYearData, QuarterName, SavedPlannerYearData } from '../types/types';
 
 export function defaultYear() {
+  const quarterNames: QuarterName[] = ['Fall', 'Winter', 'Spring']
   return {
     startYear: new Date().getFullYear(),
     name: 'Year 1',
-    quarters: ['fall', 'winter', 'spring'].map((quarter) => {
+    quarters: quarterNames.map((quarter) => {
       return { name: quarter, courses: [] };
     }),
   } as PlannerYearData | SavedPlannerYearData;
 }
+
+export const quarterNames: QuarterName[] = ['Fall', 'Winter', 'Spring', 'Summer1', 'Summer2', 'Summer10wk']
+export const quarterDisplayNames: Record<QuarterName, string> = {
+  'Fall': 'Fall',
+  'Winter': 'Winter',
+  'Spring': 'Spring',
+  'Summer1': 'Summer I',
+  'Summer2': 'Summer II',
+  'Summer10wk': 'Summer 10 Week'
+}
+
+export function transformQuarterName (name: string): QuarterName {
+  if (quarterNames.includes(name as QuarterName)) return name as QuarterName;
+  const lookup: { [k: string]: QuarterName } = {
+    'fall': 'Fall',
+    'winter': 'Winter',
+    'spring': 'Spring',
+    'summer I': 'Summer1',
+    'summer II': 'Summer2',
+    'summer 10 Week': 'Summer10wk'
+  };
+  if (!lookup[name]) throw TypeError('Invalid Quarter Name: ' + name);
+  return lookup[name];
+}

site/src/pages/RoadmapPage/AddCoursePopup.tsx

@@ -5,6 +5,7 @@ import './AddCoursePopup.scss';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { moveCourse, setShowAddCourse } from '../../store/slices/roadmapSlice';
 import Modal from 'react-bootstrap/Modal';
+import { quarterDisplayNames } from '../../helpers/planner';
 
 interface AddCoursePopupProps {}
 
@@ -55,10 +56,6 @@ const AddCoursePopup: FC<AddCoursePopupProps> = () => {
     closeForm();
   };
 
-  function capitalizeFirstLetter(string: string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-  }
-
   const addCourseForm = (
     <Form noValidate validated={validated} onSubmit={submit}>
       <h2 className="add-course-form-header">Add Course</h2>
@@ -72,7 +69,6 @@ const AddCoursePopup: FC<AddCoursePopupProps> = () => {
           required
           onChange={(e) => {
             const parsed = parseInt(e.target.value);
-            console.log(parsed, isNaN(parsed));
             if (isNaN(parsed)) {
               setYear(-1);
             } else {
@@ -113,7 +109,7 @@ const AddCoursePopup: FC<AddCoursePopupProps> = () => {
               Quarter
             </option>
             {planner[year].quarters.map((plannerQuarter, i) => {
-              const value = capitalizeFirstLetter(plannerQuarter.name);
+              const value = quarterDisplayNames[plannerQuarter.name];
               return (
                 <option key={'add-course-form-quarter-' + i} value={i}>
                   {value}

site/src/pages/RoadmapPage/AddYearPopup.tsx

@@ -27,7 +27,7 @@ const AddYearPopup: FC<AddYearPopupProps> = ({ placeholderName, placeholderYear
         placeholderYear={placeholderYear}
         type="add"
         saveHandler={saveHandler}
-        currentQuarters={['fall', 'winter', 'spring']}
+        currentQuarters={['Fall', 'Winter', 'Spring']}
         // When the year changes, this will force default values to reset
         key={'add-year-' + placeholderYear}
       />

site/src/pages/RoadmapPage/Planner.tsx

@@ -24,11 +24,12 @@ import {
   SavedPlannerYearData,
   SavedPlannerQuarterData,
   BatchCourseData,
-  MongoRoadmap,
+  MongoRoadmap
 } from '../../types/types';
 import { searchAPIResults } from '../../helpers/util';
 import { Prerequisite, PrerequisiteTree } from 'peterportal-api-next-types';
-import { defaultYear } from '../../helpers/planner';
+import { defaultYear, transformQuarterName } from '../../helpers/planner';
+import AddTranscript from './AddTranscript';
 
 const Planner: FC = () => {
   const dispatch = useAppDispatch();
@@ -102,19 +103,18 @@ const Planner: FC = () => {
       savedPlanner.forEach((savedYear) => {
         const year: PlannerYearData = { startYear: savedYear.startYear, name: savedYear.name, quarters: [] };
         savedYear.quarters.forEach((savedQuarter) => {
-          const quarter: PlannerQuarterData = { name: savedQuarter.name, courses: [] };
+          const transformedName = transformQuarterName(savedQuarter.name)
+          const quarter: PlannerQuarterData = { name: transformedName, courses: [] };
           quarter.courses = savedQuarter.courses.map((course) => courseLookup[course]);
           year.quarters.push(quarter);
         });
         planner.push(year);
       });
-      console.log('EXPANDED PLANNER', planner);
       resolve(planner);
     });
   };
 
   const loadRoadmap = async () => {
-    console.log('Loading Roadmaps...');
     let roadmap: SavedRoadmap = null!;
     const localRoadmap = localStorage.getItem('roadmap');
     // if logged in
@@ -142,7 +142,6 @@ const Planner: FC = () => {
   };
 
   const saveRoadmap = () => {
-    console.log('Saving Roadmaps...');
     const roadmap: SavedRoadmap = {
       planner: collapsePlanner(data),
       transfers: transfers,
@@ -208,7 +207,6 @@ const Planner: FC = () => {
             const required = validateCourse(taken, course.prerequisiteTree, taking, course.corequisites);
             // prerequisite not fulfilled, has some required classes to take
             if (required.size > 0) {
-              console.log('invalid course', course.id);
               invalidCourses.push({
                 location: {
                   yearIndex: yi,
@@ -309,6 +307,7 @@ const Planner: FC = () => {
         placeholderName={'Year ' + (data.length + 1)}
         placeholderYear={data.length === 0 ? new Date().getFullYear() : data[data.length - 1].startYear + 1}
       />
+      <AddTranscript></AddTranscript>
     </div>
   );
 };

site/src/pages/RoadmapPage/Quarter.tsx

@@ -10,6 +10,7 @@ import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
 import { ThreeDots } from 'react-bootstrap-icons';
 import ThemeContext from '../../style/theme-context';
 import { StrictModeDroppable } from './StrictModeDroppable';
+import { quarterDisplayNames } from '../../helpers/planner';
 
 interface QuarterProps {
   year: number;
@@ -20,7 +21,7 @@ interface QuarterProps {
 
 const Quarter: FC<QuarterProps> = ({ year, yearIndex, quarterIndex, data }) => {
   const dispatch = useAppDispatch();
-  const quarterTitle = data.name.charAt(0).toUpperCase() + data.name.slice(1);
+  const quarterTitle = quarterDisplayNames[data.name];
   const invalidCourses = useAppSelector((state) => state.roadmap.invalidCourses);
   const quarterContainerRef = useRef<HTMLDivElement>(null);
 

site/src/pages/RoadmapPage/YearModal.tsx

@@ -1,11 +1,11 @@
 import React, { FC, useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
-import { PlannerYearData } from '../../types/types';
+import { PlannerYearData, QuarterName } from '../../types/types';
 import './YearModal.scss';
+import { quarterDisplayNames, quarterNames, transformQuarterName } from '../../helpers/planner';
 
 interface YearPopupQuarter {
-  id: string;
-  name: string;
+  id: QuarterName;
   checked?: boolean;
 }
 
@@ -16,20 +16,14 @@ interface YearModalProps {
   setShow: React.Dispatch<React.SetStateAction<boolean>>;
   type: 'add' | 'edit';
   saveHandler: (x: PlannerYearData) => void;
-  currentQuarters: string[];
+  currentQuarters: QuarterName[];
 }
 
 const quarterValues: (selectedQuarters: string[]) => YearPopupQuarter[] = (quarterIds: string[]) => {
-  const base: YearPopupQuarter[] = [
-    { id: 'fall', name: 'Fall' },
-    { id: 'winter', name: 'Winter' },
-    { id: 'spring', name: 'Spring' },
-    { id: 'summer I', name: 'Summer I' },
-    { id: 'summer II', name: 'Summer II' },
-    { id: 'summer 10 Week', name: 'Summer 10 Week' },
-  ];
+  const base: YearPopupQuarter[] = quarterNames.map(n => ({ id: n }));
   quarterIds.forEach((id) => {
-    const quarter = base.find((q) => q.id === id)!;
+    const translated = transformQuarterName(id);
+    const quarter = base.find((q) => q.id === translated)!;
     quarter.checked = true;
   });
   return base;
@@ -54,7 +48,7 @@ const YearModal: FC<YearModalProps> = (props) => {
         key={q.id}
         type="checkbox"
         id={'quarter-checkbox-' + q.id}
-        label={q.name}
+        label={quarterDisplayNames[q.id]}
         value={q.id}
         // Prop must be assigned a value that is not undefined
         checked={q.checked ?? false}

site/src/store/slices/roadmapSlice.ts

@@ -11,7 +11,7 @@ import {
   TransferData,
   PlannerQuarterData,
 } from '../../types/types';
-import { defaultYear } from '../../helpers/planner';
+import { defaultYear, quarterDisplayNames } from '../../helpers/planner';
 
 // Define a type for the slice state
 interface RoadmapState {
@@ -138,7 +138,7 @@ export const roadmapSlice = createSlice({
       if (currentQuarters.includes(newQuarter.name)) {
         alert(
           `${
-            newQuarter.name.charAt(0).toUpperCase() + newQuarter.name.slice(1)
+            quarterDisplayNames[newQuarter.name]
           } has already been added to Year ${yearIndex}!`,
         );
         return;
@@ -150,7 +150,7 @@ export const roadmapSlice = createSlice({
         for (let i = 0; i < currentQuarters.length; i++) {
           if (
             currentQuarters[i].length > newQuarter.name.length ||
-            (currentQuarters[i].length == newQuarter.name.length && newQuarter.name === 'winter')
+            (currentQuarters[i].length == newQuarter.name.length && newQuarter.name === 'Winter')
           ) {
             // only scenario where name length can't distinguish ordering is spring vs winter
             index = i;

site/src/types/types.ts

@@ -95,7 +95,7 @@ export interface PlannerYearData {
 }
 
 export interface PlannerQuarterData {
-  name: string;
+  name: QuarterName;
   courses: CourseGQLData[];
 }
 
@@ -117,6 +117,8 @@ export interface YearIdentifier {
   yearIndex: number;
 }
 
+export type QuarterName = 'Fall' | 'Winter' | 'Spring' | 'Summer1' | 'Summer2' | 'Summer10wk';
+
 // Specify the location of a quarter
 export interface QuarterIdentifier extends YearIdentifier {
   quarterIndex: number;