From b4ad6870bfc88f68bdd7f87fe1d94c23d0a02b95 Mon Sep 17 00:00:00 2001
From: Samuel Gunter <sgunter@utexas.edu>
Date: Fri, 15 Mar 2024 19:23:27 -0500
Subject: [PATCH] feat: pad unique ids to 5 digits (#170)

* feat: pad unique ids to 5 digits

* feat: also pad in popup course block
---
 .../components/common/PopupCourseBlock/PopupCourseBlock.tsx  | 3 ++-
 .../CourseCatalogInjectedPopup/HeadingAndActions.tsx         | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
index 3a012e1bc..a609eff1c 100644
--- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
+++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
@@ -32,6 +32,7 @@ export default function PopupCourseBlock({
 }: PopupCourseBlockProps): JSX.Element {
     // whiteText based on secondaryColor
     const fontColor = pickFontColor(colors.primaryColor);
+    const formattedUniqueId = course.uniqueId.toString().padStart(5, '0');
 
     return (
         <div
@@ -50,7 +51,7 @@ 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'>{course.uniqueId}</span> {course.department} {course.number} &ndash;{' '}
+                <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)}
             </Text>
             {course.status !== Status.OPEN && (
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
index 3998ca69e..e3a30de82 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
@@ -58,6 +58,7 @@ const capitalizeString = (str: string) => str.charAt(0).toUpperCase() + str.slic
 export default function HeadingAndActions({ course, activeSchedule, onClose }: HeadingAndActionProps): JSX.Element {
     const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule } = course;
     const courseAdded = activeSchedule.courses.some(ourCourse => ourCourse.uniqueId === uniqueId);
+    const formattedUniqueId = uniqueId.toString().padStart(5, '0');
 
     const getInstructorFullName = (instructor: Instructor) => {
         const { firstName, lastName } = instructor;
@@ -68,7 +69,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
     const instructorString = instructors.map(getInstructorFullName).join(', ');
 
     const handleCopy = () => {
-        navigator.clipboard.writeText(uniqueId.toString());
+        navigator.clipboard.writeText(formattedUniqueId);
     };
 
     const handleOpenRateMyProf = async () => {
@@ -118,7 +119,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                         ({department} {courseNumber})
                     </Text>
                     <Button color='ut-burntorange' variant='single' icon={Copy} onClick={handleCopy}>
-                        {uniqueId}
+                        {formattedUniqueId}
                     </Button>
                     <button className='bg-transparent p-0 btn' onClick={onClose}>
                         <CloseIcon className='h-7 w-7' />