fix(injected): UTRP-41: MyUT "Add all courses" button

Author: Razboy20

src/views/components/injected/AddAllButton.tsx

@@ -1,10 +1,12 @@
 import { addCourseByURL } from '@pages/background/lib/addCourseByURL';
+import { ArrowsClockwise, Check } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
 import { Button } from '@views/components/common/Button';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
-import useSchedules from '@views/hooks/useSchedules';
+import { getScheduleById, switchSchedule } from '@views/hooks/useSchedules';
 import { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
+import createSchedule from 'src/pages/background/lib/createSchedule';
 
 /**
  * InjectedButton component renders a button that adds courses to UTRP from official MyUT calendar
@@ -14,13 +16,17 @@ import ReactDOM from 'react-dom';
  */
 export default function InjectedButton(): JSX.Element | null {
     const [container, setContainer] = useState<HTMLDivElement | null>(null);
-    const [activeSchedule, _] = useSchedules();
+    const [importStatus, setImportStatus] = useState<'idle' | 'loading' | 'complete'>('idle');
 
     const extractCoursesFromCalendar = async () => {
-        const calendarElement = document.querySelector('#kgoui_Rcontent_I3_Rprimary_I1_Rcontent_I1_Rcontent_I0_Ritems');
+        setImportStatus('loading');
+
+        const tableElements = document.querySelectorAll('table');
+        const calendarElement = Array.from(tableElements).find(el => el.textContent?.includes('12PM'));
 
         if (!calendarElement) {
             console.error('Calendar element not found');
+            setImportStatus('idle');
             return [];
         }
 
@@ -36,20 +42,55 @@ export default function InjectedButton(): JSX.Element | null {
             url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/utrp_login/',
         });
 
-        if (loggedInToUT) {
-            for (const a of uniqueAnchorTags) {
-                await addCourseByURL(activeSchedule, a);
+        try {
+            if (loggedInToUT) {
+                const scheduleId = await createSchedule('Imported Schedule');
+                switchSchedule(scheduleId);
+                const newSchedule = await getScheduleById(scheduleId);
+                if (!newSchedule) {
+                    throw new Error('Failed to retrieve new schedule');
+                }
+
+                for (const a of uniqueAnchorTags) {
+                    await addCourseByURL(newSchedule, a);
+                }
+
+                setImportStatus('complete');
+                return;
             }
-        } else {
+
             // We'll allow the alert for this WIP feature
             window.alert('Logged into UT Registrar.');
+        } catch (error) {
+            console.error('Failed to import courses from calendar', error);
         }
+
+        setImportStatus('idle');
     };
 
+    const buttonText =
+        importStatus === 'loading'
+            ? 'Importing...'
+            : importStatus === 'complete'
+              ? 'Imported!'
+              : 'Add Courses to UT Registration+';
+
+    const buttonIcon = importStatus === 'loading' ? ArrowsClockwise : importStatus === 'complete' ? Check : undefined;
+
+    const buttonIconProps =
+        importStatus === 'loading'
+            ? {
+                  className: 'animate-spin animate-duration-800',
+              }
+            : undefined;
+
     useEffect(() => {
-        const targetElement = document.getElementById('kgoui_Rcontent_I3_Rsecondary');
+        const targetElements = document.querySelectorAll(
+            'div.kgoui_object_region.kgoui_container_responsive_asymmetric2_column_secondary'
+        );
+        const targetElement = Array.from(targetElements).find(el => el.textContent?.includes('My Information'));
 
-        if (targetElement?.classList.contains('kgoui_container_responsive_asymmetric2_column_secondary')) {
+        if (targetElement) {
             const buttonContainer = document.createElement('div');
             targetElement.appendChild(buttonContainer);
             setContainer(buttonContainer);
@@ -66,8 +107,16 @@ export default function InjectedButton(): JSX.Element | null {
 
     return ReactDOM.createPortal(
         <ExtensionRoot>
-            <Button variant='filled' color='ut-burntorange' onClick={extractCoursesFromCalendar}>
-                Add Courses to UT Registration+
+            <Button
+                variant='filled'
+                color='ut-burntorange'
+                className='flex!'
+                onClick={extractCoursesFromCalendar}
+                disabled={importStatus !== 'idle'}
+                icon={buttonIcon}
+                iconProps={buttonIconProps}
+            >
+                {buttonText}
             </Button>
         </ExtensionRoot>,
         container

src/views/hooks/useSchedules.ts

@@ -79,6 +79,19 @@ export function getActiveSchedule(): UserSchedule {
     return schedulesCache[activeIndexCache] ?? errorSchedule;
 }
 
+/**
+ * Returns the schedule with the specified id.
+ * @param id - The id of the schedule to retrieve.
+ * @returns The schedule with the specified id, or undefined if not found.
+ */
+export async function getScheduleById(id: string): Promise<UserSchedule | undefined> {
+    const schedules = await UserScheduleStore.get('schedules');
+    const found = schedules.find(s => s.id === id);
+    if (!found) return undefined;
+    // todo: this is jank
+    return new UserSchedule(found);
+}
+
 /**
  * Replaces the old schedule with the new schedule.
  * @param oldSchedule - The old schedule to be replaced.