include transfer credits in credits taken + UI fixes

Author: ZzRanger

src/components/planner/Planner.tsx

@@ -214,6 +214,7 @@ export default function Planner({
         </section>
         <CourseSelectorContainer
           courses={courseCodes}
+          transferCredits={transferCredits}
           degreeRequirements={degreeRequirements}
           getSearchedDragId={(course) => `course-list-searched-${course.id}`}
           getRequirementDragId={(course) => `course-list-requirement-${course.id}`}

src/components/planner/Sidebar/RequirementsContainer.tsx

@@ -426,7 +426,7 @@ function RequirementContainer({
       <RequirementContainerHeader name={name} progress={progress} setCarousel={setCarousel} />
       <div className="text-[14px]">{description}</div>
 
-      <div className=" flex h-full flex-col gap-y-2 overflow-x-hidden overflow-y-scroll">
+      <div className=" flex h-full flex-col gap-y-2 overflow-x-hidden">
         <RequirementSearchBar updateQuery={updateQuery} />
         {sortedResults.map((req, idx) => {
           return (

src/components/planner/Sidebar/Sidebar.tsx

@@ -12,6 +12,7 @@ import { ObjectID } from 'bson';
 export interface CourseSelectorContainerProps {
   degreeRequirements: DegreeRequirements;
   courses: string[];
+  transferCredits: string[];
   getSearchedDragId: GetDragIdByCourse;
   getRequirementDragId: GetDragIdByCourse;
 }
@@ -26,13 +27,12 @@ type ArrayElement<ArrayType extends readonly unknown[]> =
 function CourseSelectorContainer({
   degreeRequirements,
   courses,
+  transferCredits,
   getSearchedDragId,
   getRequirementDragId,
 }: CourseSelectorContainerProps) {
   // TODO: Provide UI indicator for errors
 
-  console.log(degreeRequirements);
-
   const { data, isLoading } = trpc.courses.publicGetAllCourses.useQuery();
 
   const { results, updateQuery } = useFuse<Course>({
@@ -57,6 +57,9 @@ function CourseSelectorContainer({
   courses.forEach((string) => {
     sum += getSemesterHourFromCourseCode(string) ?? 3;
   });
+  transferCredits.forEach((credit) => {
+    sum += getSemesterHourFromCourseCode(credit) ?? 3;
+  });
 
   const CreditsTaken = ({
     taken,
@@ -86,13 +89,15 @@ function CourseSelectorContainer({
         <div className="z-0 h-screen w-[30%] min-w-[30%] overflow-x-hidden overflow-y-scroll">
           <div className="flex h-fit min-h-screen w-full flex-col gap-y-4 bg-white p-4">
             <div className="flex flex-col">
-              <div className="flex flex-row items-center justify-around">
-                <ChevronIcon
-                  onClick={() => setOpen(!open)}
-                  className={`h-4 w-4 cursor-pointer ${open ? '' : 'rotate-180'}`}
-                  strokeWidth={2.5}
-                />
-                <h1 className="pl-2 text-2xl font-medium tracking-tight">Plan Requirements</h1>
+              <div className="flex flex-row items-center justify-between">
+                <div className="flex flex-row items-center justify-center">
+                  <ChevronIcon
+                    onClick={() => setOpen(!open)}
+                    className={`h-4 w-4 cursor-pointer ${open ? '' : 'rotate-180'}`}
+                    strokeWidth={2.5}
+                  />
+                  <h1 className="pl-2 text-2xl font-medium tracking-tight">Plan Requirements</h1>
+                </div>
                 <CreditsTaken
                   taken={sum}
                   min={