feat(web): update course selection card to show added (#98)

Co-authored-by: Chenxin Yan <yanchenxin2004@gmail.com>

Author: michaelzwang13

apps/web/src/app/dashboard/register/page.tsx

@@ -45,6 +45,8 @@ const RegisterPage = () => {
     isAuthenticated ? {} : "skip",
   );
 
+  const selectedClassNumbers = allClasses?.map((c) => c.classNumber) || [];
+
   const { results, status, loadMore } = usePaginatedQuery(
     api.courseOfferings.getCourseOfferings,
     isAuthenticated && currentTerm && currentYear
@@ -99,6 +101,7 @@ const RegisterPage = () => {
             loadMore={loadMore}
             status={status}
             isSearching={isSearching}
+            selectedClassNumbers={selectedClassNumbers}
           />
         ) : (
           <div className="h-full">
@@ -117,6 +120,7 @@ const RegisterPage = () => {
           loadMore={loadMore}
           status={status}
           isSearching={isSearching}
+          selectedClassNumbers={selectedClassNumbers}
         />
 
         <div className="flex-1 min-w-0">

apps/web/src/modules/course-selection/CourseSelector.tsx

@@ -19,6 +19,7 @@ interface CourseSelectorComponentProps {
   loadMore: (numItems: number) => void;
   status: "LoadingFirstPage" | "CanLoadMore" | "LoadingMore" | "Exhausted";
   isSearching?: boolean;
+  selectedClassNumbers?: number[];
 }
 
 const CourseSelector = ({
@@ -29,6 +30,7 @@ const CourseSelector = ({
   loadMore,
   status,
   isSearching = false,
+  selectedClassNumbers,
 }: CourseSelectorComponentProps) => {
   const { searchValue: filtersParam, setSearchValue: setFiltersParam } =
     useSearchParam({ paramKey: "filters", debounceDelay: 0 });
@@ -162,6 +164,7 @@ const CourseSelector = ({
                   <CourseCard
                     course={course}
                     isExpanded={isExpanded(course.code)}
+                    selectedClassNumbers={selectedClassNumbers}
                     onToggleExpand={toggleCourseExpansion}
                     onSectionSelect={handleSectionSelect}
                     onSectionHover={setHoveredSection}

apps/web/src/modules/course-selection/components/CourseCard.tsx

@@ -18,6 +18,7 @@ import { CourseSectionItem } from "./CourseSectionItem";
 interface CourseCardProps {
   course: CourseWithOfferings;
   isExpanded: boolean;
+  selectedClassNumbers?: number[];
   onToggleExpand: (courseCode: string) => void;
   onSectionSelect?: (offering: CourseOffering) => void;
   onSectionHover?: (offering: CourseOffering | null) => void;
@@ -26,6 +27,7 @@ interface CourseCardProps {
 export const CourseCard = ({
   course,
   isExpanded,
+  selectedClassNumbers,
   onToggleExpand,
   onSectionSelect,
   onSectionHover,
@@ -87,6 +89,7 @@ export const CourseCard = ({
               <CourseSectionItem
                 key={offering._id}
                 offering={offering}
+                selectedClassNumbers={selectedClassNumbers}
                 onSelect={onSectionSelect}
                 onHover={onSectionHover}
               />

apps/web/src/modules/course-selection/components/CourseSectionItem.tsx

@@ -3,15 +3,18 @@ import type { CourseOffering } from "../types";
 
 interface CourseSectionItemProps {
   offering: CourseOffering;
+  selectedClassNumbers?: number[];
   onSelect?: (offering: CourseOffering) => void;
   onHover?: (offering: CourseOffering | null) => void;
 }
 
 export const CourseSectionItem = ({
   offering,
+  selectedClassNumbers,
   onSelect,
   onHover,
 }: CourseSectionItemProps) => {
+  const isSelected = selectedClassNumbers?.includes(offering.classNumber);
   return (
     <button
       type="button"
@@ -29,18 +32,28 @@ export const CourseSectionItem = ({
         <span className="font-semibold text-sm">
           Section {offering.section}
         </span>
-        <span
-          className={clsx(
-            "text-xs px-2 py-1 rounded-full font-medium capitalize",
-            offering.status === "open" && "bg-green-100 text-green-800",
-            offering.status === "closed" && "bg-red-100 text-red-800",
-            offering.status === "waitlist" && "bg-yellow-100 text-yellow-800",
+        <div className="flex items-center gap-2">
+          {isSelected && (
+            <span
+              className="text-xs px-2 py-1 rounded-full font-medium bg-violet-100 text-violet-800 dark:bg-violet-900 
+  dark:text-violet-200"
+            >
+              Selected
+            </span>
           )}
-        >
-          {offering.status === "waitlist"
-            ? `Waitlist (${offering.waitlistNum || 0})`
-            : offering.status}
-        </span>
+          <span
+            className={clsx(
+              "text-xs px-2 py-1 rounded-full font-medium capitalize",
+              offering.status === "open" && "bg-green-100 text-green-800",
+              offering.status === "closed" && "bg-red-100 text-red-800",
+              offering.status === "waitlist" && "bg-yellow-100 text-yellow-800",
+            )}
+          >
+            {offering.status === "waitlist"
+              ? `Waitlist (${offering.waitlistNum || 0})`
+              : offering.status}
+          </span>
+        </div>
       </div>
       <div className="text-xs text-muted-foreground space-y-1">
         <div>{offering.instructor}</div>