fix: updated text when time/location not provided (#289)

* fix: updated text when time/location not provided

* fix(issue): fixed text when time/loc isn't provided

* chore: lint and format

* fix: created location&time component

* fix: renamed component & restructured component

* chore: fix lint

* fix: variety of issues within DisplayMeetingInfo component

* fix: fixed lint error

* fix: ran prettier

* chore: locationInfo usage

* chore: cleanup

* fix: removed periods and added online info

* fix: wrapped in div to remove space

* fix: space now shows properly

* fix: spacing fixed

* chore: remove types from jsdoc

* fix: extra arg

* chore: fix lint

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Razboy20 <razboy20@gmail.com>

src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx

@@ -20,6 +20,8 @@ import OpenNewIcon from '~icons/material-symbols/open-in-new';
 import Remove from '~icons/material-symbols/remove';
 import Reviews from '~icons/material-symbols/reviews';
 
+import DisplayMeetingInfo from './DisplayMeetingInfo';
+
 const { openNewTab, addCourse, removeCourse, openCESPage } = background;
 
 /**
@@ -56,9 +58,6 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
     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}`;
-
     const handleCopy = () => {
         navigator.clipboard.writeText(formattedUniqueId);
     };
@@ -164,38 +163,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                         ))}
                     </div>
                 </div>
-                <div className='mt-1 flex flex-col'>
-                    {schedule.meetings.map(meeting => {
-                        const daysString = meeting.getDaysString({ format: 'long', separator: 'long' });
-                        const timeString = meeting.getTimeString({ separator: ' to ' });
-                        return (
-                            <Text
-                                key={
-                                    daysString +
-                                    timeString +
-                                    (meeting.location?.building ?? '') +
-                                    (meeting.location?.room ?? '')
-                                }
-                                variant='h4'
-                                as='p'
-                            >
-                                {daysString} {timeString}
-                                {meeting.location && (
-                                    <>
-                                        {' in '}
-                                        <Link
-                                            href={getBuildingUrl(meeting.location.building)}
-                                            className='link'
-                                            variant='h4'
-                                        >
-                                            {meeting.location.building} {meeting.location.room}
-                                        </Link>
-                                    </>
-                                )}
-                            </Text>
-                        );
-                    })}
-                </div>
+                <DisplayMeetingInfo course={course} />
             </div>
             <div className='my-3 flex flex-wrap items-center gap-x-3.75 gap-y-2.5'>
                 <Button