feat: injected button - add all courses from MyUT AND passing URL to handler (#291)

* feat: first button attempt

* feat: fetching each course code

* feat: adding courses function from there but idk where to get the active schedule from

* docs: todo

* feat: retrieved active schedule

* feat: button tactics

* feat: add support for my.utexas.edu

* feat: inject button into MyUT

* feat: refactor code to render components dynamically based on site

* feat: scrape course ids from MyUT and remove duplicates

* feat: site support links for classlist

* feat: add utility function to add course by URL

* feat: support additional case for course cal

* feat: duplicates

* chore: cleanup

* feat: temporary checkpoint

* feat: reroute to use new add course by url

* feat: linking to new function, cleaning up, adding messaging for course url add

* chore: unused import

* feat: relinking addCourse function to the button fingers crossed

* feat: we did it!

* chore: remove comment

* chore: cleanup cleanup

* feat: tried to handle the async stuff because of that small bug but nothing fixed. doesnt hurt tho

* feat: i have fixed it holy kevinnn

* chore: delete unused file and organization

* chore: removed unused log

* feat: better log for course add

* chore: refactor via data destructuring

* chore: pass component as prop via React.ComponentType

---------

Co-authored-by: Ethan Lanting <ethanlanting@gmail.com>
Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
2024-11-15 19:07:37 -06:00
committed by GitHub
parent 9ad32390d1
commit c41467c617
9 changed files with 179 additions and 49 deletions

View File

@@ -0,0 +1,68 @@
import { addCourseByURL } from '@pages/background/lib/addCourseByURL';
import { Button } from '@views/components/common/Button';
import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
import useSchedules from '@views/hooks/useSchedules';
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
/**
* InjectedButton component renders a button that adds courses to UTRP from official MyUT calendar
* and adds the courses to the active schedule.
*
* @returns The rendered button component or null if the container is not found.
*/
export default function InjectedButton(): JSX.Element | null {
const [container, setContainer] = useState<HTMLDivElement | null>(null);
const [activeSchedule, _] = useSchedules();
const extractCoursesFromCalendar = async () => {
const calendarElement = document.querySelector('#kgoui_Rcontent_I3_Rprimary_I1_Rcontent_I1_Rcontent_I0_Ritems');
if (!calendarElement) {
console.error('Calendar element not found');
return [];
}
const anchorTags = Array.from(calendarElement.querySelectorAll('a')).filter(
anchor => !anchor.href.includes('google.com')
);
// Make sure to remove duplicate anchorTags using set
const uniqueAnchorTags = Array.from(new Set(anchorTags.map(a => a.href)));
for (const a of uniqueAnchorTags) {
// eslint-disable-next-line no-await-in-loop
await addCourseByURL(activeSchedule, a);
}
};
useEffect(() => {
const targetElement = document.getElementById('kgoui_Rcontent_I3_Rsecondary');
if (
targetElement &&
targetElement.classList.contains('kgoui_container_responsive_asymmetric2_column_secondary')
) {
const buttonContainer = document.createElement('div');
targetElement.appendChild(buttonContainer);
setContainer(buttonContainer);
return () => {
buttonContainer.remove();
};
}
}, []);
if (!container) {
return null;
}
return ReactDOM.createPortal(
<ExtensionRoot>
<Button variant='filled' color='ut-burntorange' onClick={extractCoursesFromCalendar}>
Add Courses to UT Registration+
</Button>
</ExtensionRoot>,
container
);
}

View File

@@ -1,6 +1,8 @@
import addCourse from '@pages/background/lib/addCourse';
import { addCourseByURL } from '@pages/background/lib/addCourseByURL';
import { deleteAllSchedules } from '@pages/background/lib/deleteSchedule';
import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
// import { addCourseByUrl } from '@shared/util/courseUtils';
// import { getCourseColors } from '@shared/util/colors';
// import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell';
import { Button } from '@views/components/common/Button';
@@ -202,51 +204,13 @@ export default function Settings(): JSX.Element {
});
};
// todo: move into a util/shared place, rather than specifically in settings
const handleAddCourseByUrl = async () => {
// todo: Use a proper modal instead of a prompt
// eslint-disable-next-line no-alert
const link: string | null = prompt('Enter course link');
// Exit if the user cancels the prompt
if (link === null) return;
try {
let response: Response;
try {
response = await fetch(link);
} catch (e) {
// eslint-disable-next-line no-alert
alert(`Failed to fetch url '${link}'`);
return;
}
const text = await response.text();
const doc = new DOMParser().parseFromString(text, 'text/html');
const scraper = new CourseCatalogScraper(SiteSupport.COURSE_CATALOG_DETAILS, doc, link);
const tableRows = getCourseTableRows(doc);
const courses = scraper.scrape(tableRows, false);
if (courses.length === 1) {
const description = scraper.getDescription(doc);
const row = courses[0]!;
const course = row.course!;
course.description = description;
// console.log(course);
if (activeSchedule.courses.every(c => c.uniqueId !== course.uniqueId)) {
console.log('adding course');
addCourse(activeSchedule.id, course);
} else {
console.log('course already exists');
}
} else {
console.log(courses);
}
} catch (error) {
console.error('Error scraping course:', error);
}
};
// const handleAddCourseByLink = async () => {
// // todo: Use a proper modal instead of a prompt
// const link: string | null = prompt('Enter course link');
// // Exit if the user cancels the prompt
// if (link === null) return;
// await addCourseByUrl(link, activeSchedule);
// };
const [devMode, toggleDevMode] = useDevMode(10);
@@ -445,7 +409,7 @@ export default function Settings(): JSX.Element {
<h2 className='mb-4 text-xl text-ut-black font-semibold' onClick={toggleDevMode}>
Developer Mode
</h2>
<Button variant='filled' color='ut-black' onClick={handleAddCourseByUrl}>
<Button variant='filled' color='ut-black' onClick={() => addCourseByURL(activeSchedule)}>
Add course by link
</Button>
<Button variant='filled' color='ut-burntorange' onClick={showMigrationDialog}>

View File

@@ -12,6 +12,8 @@ export const SiteSupport = {
EXTENSION_POPUP: 'EXTENSION_POPUP',
MY_CALENDAR: 'MY_CALENDAR',
REPORT_ISSUE: 'REPORT_ISSUE',
MY_UT: 'MY_UT',
CLASSLIST: 'CLASSLIST',
} as const;
/**
@@ -46,5 +48,11 @@ export default function getSiteSupport(url: string): SiteSupportType | null {
if (url.includes('utdirect.utexas.edu') && (url.includes('waitlist') || url.includes('classlist'))) {
return SiteSupport.WAITLIST;
}
if (url.includes('my.utexas.edu/student/student/index') || url.includes('my.utexas.edu/student/')) {
return SiteSupport.MY_UT;
}
if (url.includes('registration/classlist.WBX')) {
return SiteSupport.CLASSLIST;
}
return null;
}