From 50e88fa015e0290fbe0dab8a19f8fcdbc4dd02b0 Mon Sep 17 00:00:00 2001
From: adityamkk <73001560+adityamkk@users.noreply.github.com>
Date: Tue, 29 Oct 2024 16:07:26 -0500
Subject: [PATCH] fix(ui): multiple instructors are formatted properly,
 displays last name only, and are capitalized in all course blocks (#342)
 (#403)

* fix(ui): updated multiple instructor name formatting in course blocks

* fix(ui): display instructor last names only in all course blocks

* refactor: use instructor toString when getting instructor full name

* refactor: toString in useFlattenedCourseSchedule without template literal

Co-authored-by: Samuel Gunter <29130894+Samathingamajig@users.noreply.github.com>

* refactor: delete type hint and unnecessary comments

* fix(ui): instructor names semicolon delimiter in calendar course block

* fix(ui): removed 'unknown' when there are no instructors

* fix(ui): change - to &ndash

* fix(ui): changed - to ndash in hook

---------

Co-authored-by: Samuel Gunter <29130894+Samathingamajig@users.noreply.github.com>
---
 src/views/components/common/PopupCourseBlock.tsx          | 5 +++--
 .../CourseCatalogInjectedPopup/HeadingAndActions.tsx      | 7 ++-----
 src/views/hooks/useFlattenedCourseSchedule.ts             | 8 +++++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/views/components/common/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock.tsx
index 6cd7f69e..2b21ea7f 100644
--- a/src/views/components/common/PopupCourseBlock.tsx
+++ b/src/views/components/common/PopupCourseBlock.tsx
@@ -78,8 +78,9 @@ export default function PopupCourseBlock({
                 <DragIndicatorIcon className='h-6 w-6 text-white' />
             </div>
             <Text className={clsx('flex-1 py-3.5 truncate', fontColor)} variant='h1-course'>
-                <span className='px-0.5 font-450'>{formattedUniqueId}</span> {course.department} {course.number} &ndash;{' '}
-                {course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}
+                <span className='px-0.5 font-450'>{formattedUniqueId}</span> {course.department} {course.number}
+                {course.instructors.length > 0 ? <> &ndash; </> : ''}
+                {course.instructors.map(v => v.toString({ format: 'last', case: 'capitalize' })).join('; ')}
             </Text>
             {enableCourseStatusChips && course.status !== Status.OPEN && (
                 <div
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
index c979e96f..cf205e51 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
@@ -54,11 +54,8 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
     const formattedUniqueId = uniqueId.toString().padStart(5, '0');
     const isInCalendar = useCalendar();
 
-    const getInstructorFullName = (instructor: Instructor) => {
-        const { firstName = '', lastName = '' } = instructor;
-        if (firstName === '') return capitalizeString(lastName);
-        return `${capitalizeString(firstName)} ${capitalizeString(lastName)}`;
-    };
+    const getInstructorFullName = (instructor: Instructor) =>
+        instructor.toString({ format: 'first_last', case: 'capitalize' });
 
     const getBuildingUrl = (building: string) =>
         `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}`;
diff --git a/src/views/hooks/useFlattenedCourseSchedule.ts b/src/views/hooks/useFlattenedCourseSchedule.ts
index 58ee6d0e..50e0bd7a 100644
--- a/src/views/hooks/useFlattenedCourseSchedule.ts
+++ b/src/views/hooks/useFlattenedCourseSchedule.ts
@@ -95,9 +95,11 @@ function extractCourseInfo(course: Course) {
 
     let courseDeptAndInstr = `${course.department} ${course.number}`;
 
-    const mainInstructor = course.instructors[0];
-    if (mainInstructor) {
-        courseDeptAndInstr += ` – ${mainInstructor.toString({ format: 'first_last', case: 'capitalize' })}`;
+    if (course.instructors.length > 0) {
+        courseDeptAndInstr += ' \u2013 ';
+        courseDeptAndInstr += course.instructors
+            .map(instructor => instructor.toString({ format: 'last', case: 'capitalize' }))
+            .join('; ');
     }
 
     return { status, courseDeptAndInstr, meetings, course };