DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

multiple schedule suppport kinda

Browse Source
This commit is contained in:
Sriram Hariharan
2023-03-15 23:54:07 -05:00
parent 6d4a4307cf
commit 6afd372945
30 changed files with 224 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/background/background.ts
View File

@@ -5,7 +5,7 @@ import onInstall from './events/onInstall';
import onNewChromeSession from './events/onNewChromeSession';
import onServiceWorkerAlive from './events/onServiceWorkerAlive';
import onUpdate from './events/onUpdate';
import { SessionStore } from '../shared/storage/SessionStore';
import { sessionStore } from '../shared/storage/sessionStore';
import browserActionHandler from './handler/browserActionHandler';
import hotReloadingHandler from './handler/hotReloadingHandler';
import tabManagementHandler from './handler/tabManagementHandler';
@@ -38,9 +38,9 @@ const messageListener = new MessageListener<BACKGROUND_MESSAGES>({
messageListener.listen();
SessionStore.getChromeSessionId().then(async chromeSessionId => {
sessionStore.get('chromeSessionId').then(async chromeSessionId => {
if (!chromeSessionId) {
await SessionStore.setChromeSessionId(generateRandomId(10));
await sessionStore.set('chromeSessionId', generateRandomId(10));
onNewChromeSession();
}
});

5
src/background/events/onInstall.ts
View File

@@ -1,9 +1,8 @@
import { SECOND } from 'src/shared/util/time';
import { ExtensionStore } from '../../shared/storage/ExtensionStore';
import { extensionStore } from '../../shared/storage/extensionStore';
/**
* Called when the extension is first installed or synced onto a new machine
*/
export default async function onInstall() {
await ExtensionStore.setVersion(chrome.runtime.getManifest().version);
await extensionStore.set('version', chrome.runtime.getManifest().version);
}

10
src/background/events/onUpdate.ts
View File

@@ -1,14 +1,14 @@
import { hotReloadTab } from 'src/background/util/hotReloadTab';
import { ExtensionStore } from '../../shared/storage/ExtensionStore';
import { extensionStore } from '../../shared/storage/extensionStore';
/**
* Called when the extension is updated (or when the extension is reloaded in development mode)
*/
export default async function onUpdate() {
await Promise.all([
ExtensionStore.setLastUpdate(Date.now()),
ExtensionStore.setVersion(chrome.runtime.getManifest().version),
]);
await extensionStore.set({
version: chrome.runtime.getManifest().version,
lastUpdate: Date.now(),
});
if (process.env.NODE_ENV === 'development') {
hotReloadTab();

7
src/background/handler/hotReloadingHandler.ts
View File

@@ -1,18 +1,17 @@
import HotReloadingMessages from 'src/shared/messages/HotReloadingMessages';
import { MessageHandler } from 'chrome-extension-toolkit';
import { DevStore } from 'src/shared/storage/DevStore';
import { devStore } from 'src/shared/storage/devStore';
const hotReloadingHandler: MessageHandler<HotReloadingMessages> = {
async reloadExtension({ sendResponse }) {
const isExtensionReloading = await DevStore.getIsExtensionReloading();
const { isExtensionReloading, isTabReloading } = await devStore.get(['isExtensionReloading', 'isTabReloading']);
if (!isExtensionReloading) return sendResponse();
const isTabReloading = await DevStore.getIsExtensionReloading();
if (isTabReloading) {
const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
const tabToReload = tabs[0];
await DevStore.setReloadTabId(tabToReload?.id);
await devStore.set('reloadTabId', tabToReload?.id);
}
chrome.runtime.reload();
},

6
src/background/util/hotReloadTab.ts
View File

@@ -1,4 +1,4 @@
import { DevStore } from 'src/shared/storage/DevStore';
import { devStore } from 'src/shared/storage/devStore';
/**
* A list of websites that we don't want to reload when the extension reloads (becuase it'd be hella annoying lmao)
@@ -24,9 +24,7 @@ const HOT_RELOADING_WHITELIST = [
* @returns a promise that resolves when the tab is reloaded
*/
export async function hotReloadTab(): Promise<void> {
const { getIsTabReloading, getReloadTabId } = DevStore;
const [isTabReloading, reloadTabId] = await Promise.all([getIsTabReloading(), getReloadTabId()]);
const { isTabReloading, reloadTabId } = await devStore.get(['isTabReloading', 'reloadTabId']);
if (!isTabReloading || !reloadTabId) return;

10
src/background/util/openDebugTab.ts
View File

@@ -1,24 +1,22 @@
import { DevStore } from 'src/shared/storage/DevStore';
import { devStore } from 'src/shared/storage/devStore';
/**
* Open the debug tab as the first tab
*/
export async function openDebugTab() {
if (process.env.NODE_ENV === 'development') {
const debugTabId = await DevStore.getDebugTabId();
const { debugTabId, wasDebugTabVisible } = await devStore.get(['debugTabId', 'wasDebugTabVisible']);
const isAlreadyOpen = await (await chrome.tabs.query({})).some(tab => tab.id === debugTabId);
if (isAlreadyOpen) return;
const wasVisible = await DevStore.getWasDebugTabVisible();
const tab = await chrome.tabs.create({
url: chrome.runtime.getURL('debug.html'),
active: wasVisible,
active: wasDebugTabVisible,
pinned: true,
index: 0,
});
await DevStore.setDebugTabId(tab.id);
await devStore.set('debugTabId', tab.id);
}
}

8
src/debug/index.tsx
View File

@@ -1,7 +1,7 @@
import './hotReload';
import React, { useEffect } from 'react';
import { render } from 'react-dom';
import { DevStore } from 'src/shared/storage/DevStore';
import { devStore } from 'src/shared/storage/devStore';
const manifest = chrome.runtime.getManifest();
@@ -69,11 +69,7 @@ function DevDashboard() {
useEffect(() => {
const onVisibilityChange = () => {
if (document.visibilityState === 'visible') {
DevStore.setWasDebugTabVisible(true);
} else {
DevStore.setWasDebugTabVisible(false);
}
devStore.set('wasDebugTabVisible', document.visibilityState === 'visible');
};
document.addEventListener('visibilitychange', onVisibilityChange);
return () => {

5
src/shared/storage/DevStore.ts
View File

@@ -16,7 +16,7 @@ interface IDevStore {
reloadTabId?: number;
}
export const DevStore = createLocalStore<IDevStore>({
export const devStore = createLocalStore<IDevStore>({
debugTabId: undefined,
isTabReloading: true,
wasDebugTabVisible: false,
@@ -24,5 +24,4 @@ export const DevStore = createLocalStore<IDevStore>({
reloadTabId: undefined,
});
debugStore({ DevStore });
debugStore({ devStore });

31
src/shared/storage/ExtensionStore.ts
View File

@@ -1,4 +1,3 @@
import { v4 as uuidv4 } from 'uuid';
import { createLocalStore, debugStore } from 'chrome-extension-toolkit';
/**
@@ -9,31 +8,11 @@ interface IExtensionStore {
version: string;
/** When was the last update */
lastUpdate: number;
/** A unique identifier generated for the current user in lieu of a userId */
deviceId: string;
}
interface Actions {
getDeviceId(): Promise<string>;
}
export const extensionStore = createLocalStore<IExtensionStore>({
version: chrome.runtime.getManifest().version,
lastUpdate: Date.now(),
});
export const ExtensionStore = createLocalStore<IExtensionStore, Actions>(
{
version: chrome.runtime.getManifest().version,
lastUpdate: Date.now(),
deviceId: '',
},
store => ({
getDeviceId: async () => {
const deviceId = await store.getDeviceId();
if (deviceId) {
return deviceId;
}
const newDeviceId = uuidv4();
await store.setDeviceId(newDeviceId);
return newDeviceId;
},
})
);
debugStore({ ExtensionStore });
debugStore({ extensionStore });

4
src/shared/storage/OptionsStore.ts
View File

@@ -10,9 +10,9 @@ interface IOptionsStore {
shouldScrollToLoad: boolean;
}
export const OptionsStore = createSyncStore<IOptionsStore>({
export const optionsStore = createSyncStore<IOptionsStore>({
shouldHighlightConflicts: true,
shouldScrollToLoad: true,
});
debugStore({ OptionsStore });
debugStore({ optionsStore });

4
src/shared/storage/SessionStore.ts
View File

@@ -4,8 +4,8 @@ interface ISessionStore {
chromeSessionId?: string;
}
export const SessionStore = createSessionStore<ISessionStore>({
export const sessionStore = createSessionStore<ISessionStore>({
chromeSessionId: undefined,
});
debugStore({ SessionStore });
debugStore({ sessionStore });

67
src/shared/storage/UserScheduleStore.ts
View File

@@ -1,62 +1,15 @@
import { createLocalStore, debugStore } from 'chrome-extension-toolkit';
import { Course } from 'src/shared/types/Course';
/**
* A store that is used for storing user options
*/
import { UserSchedule } from 'src/shared/types/UserSchedule';
interface IUserScheduleStore {
current: string;
schedules: {
[id: string]: Course[];
};
schedules: UserSchedule[];
}
interface Actions {
createSchedule(name: string): Promise<void>;
addCourseToSchedule(name: string, course: Course): Promise<void>;
removeCourseFromSchedule(name: string, course: Course): Promise<void>;
removeSchedule(name: string): Promise<void>;
getSchedule(name: string): Promise<Course[] | undefined>;
}
/**
* A store that is used for storing user schedules (and the active schedule)
*/
export const userScheduleStore = createLocalStore<IUserScheduleStore>({
schedules: [],
});
const UserScheduleStore = createLocalStore<IUserScheduleStore, Actions>(
{
current: 'Schedule 1',
schedules: {},
},
store => ({
async createSchedule(name: string) {
const schedules = await store.getSchedules();
if (!schedules[name]) {
schedules[name] = [];
await store.setSchedules(schedules as any);
}
},
async removeSchedule(name: string) {
const schedules = await store.getSchedules();
delete schedules[name];
await store.setSchedules(schedules);
},
async getSchedule(name) {
const schedules = await store.getSchedules();
return schedules[name]?.map(course => new Course(course));
},
async addCourseToSchedule(name, course) {
const schedules = await store.getSchedules();
const scheduleToEdit = schedules[name];
if (scheduleToEdit) {
scheduleToEdit.push(course);
await store.setSchedules(schedules);
}
},
async removeCourseFromSchedule(name, course) {
const schedules = await store.getSchedules();
const scheduleToEdit = schedules[name];
if (scheduleToEdit) {
schedules[name] = scheduleToEdit.filter(c => c.uniqueId !== course.uniqueId);
await store.setSchedules(schedules);
}
},
})
);
debugStore({ UserScheduleStore });
debugStore({ userScheduleStore });

3
src/shared/types/Course.ts
View File

@@ -45,6 +45,9 @@ export class Course {
courseName: string;
/** The unique identifier for which department that a course belongs to, i.e. CS, MAL, etc. */
department: string;
/** The number of credits that a course is worth */
creditHours: number;
/** Is the course open, closed, waitlisted, or cancelled? */
status: Status;
/** all the people that are teaching this course, and some metadata about their names */

35
src/shared/types/UserSchedule.ts Normal file
View File

@@ -0,0 +1,35 @@
import { Serialized } from 'chrome-extension-toolkit';
import { Course } from './Course';
/**
* Represents a user's schedule that is stored in the extension
*/
export class UserSchedule {
courses: Course[];
id: string;
name: string;
constructor(schedule: Serialized<UserSchedule>) {
this.courses = schedule.courses.map(c => new Course(c));
this.id = schedule.id;
this.name = schedule.name;
}
containsCourse(course: Course): boolean {
return this.courses.some(c => c.uniqueId === course.uniqueId);
}
getCreditHours(): number {
return this.courses.reduce((acc, course) => acc + course.creditHours, 0);
}
addCourse(course: Course): void {
if (!this.containsCourse(course)) {
this.courses.push(course);
}
}
removeCourse(course: Course): void {
this.courses = this.courses.filter(c => c.uniqueId !== course.uniqueId);
}
}

13
src/views/components/CourseCatalogMain.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { Course, ScrapedRow } from 'src/shared/types/Course';
import { useKeyPress } from '../hooks/useKeyPress';
import useUserSchedules from '../hooks/useUserSchedules';
import { CourseCatalogScraper } from '../lib/CourseCatalogScraper';
import getCourseTableRows from '../lib/getCourseTableRows';
import { SiteSupport } from '../lib/getSiteSupport';
@@ -43,6 +44,9 @@ export default function CourseCatalogMain({ support }: Props) {
setRows([...rows, ...newRows]);
};
const schedules = useUserSchedules();
const [activeSchedule] = schedules;
const handleRowButtonClick = (course: Course) => () => {
setSelectedCourse(course);
};
@@ -67,11 +71,18 @@ export default function CourseCatalogMain({ support }: Props) {
key={row.course.uniqueId}
row={row}
isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
isInActiveSchedule={Boolean(activeSchedule?.containsCourse(row.course))}
onClick={handleRowButtonClick(row.course)}
/>
);
})}
{selectedCourse && <CoursePopup course={selectedCourse} onClose={handleClearSelectedCourse} />}
{selectedCourse && (
<CoursePopup
course={selectedCourse}
activeSchedule={activeSchedule}
onClose={handleClearSelectedCourse}
/>
)}
<AutoLoad addRows={addRows} />
</ExtensionRoot>
);

18
src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { bMessenger } from 'src/shared/messages';
import { userScheduleStore } from 'src/shared/storage/userScheduleStore';
import { Course } from 'src/shared/types/Course';
import { UserSchedule } from 'src/shared/types/UserSchedule';
import { Button } from 'src/views/components/common/Button/Button';
import Card from 'src/views/components/common/Card/Card';
import Icon from 'src/views/components/common/Icon/Icon';
@@ -8,6 +10,7 @@ import Text from 'src/views/components/common/Text/Text';
import styles from './CourseButtons.module.scss';
type Props = {
activeSchedule?: UserSchedule;
course: Course;
};
@@ -17,7 +20,7 @@ const { openNewTab } = bMessenger;
* This component displays the buttons for the course info popup, that allow the user to either
* navigate to other pages that are useful for the course, or to do actions on the current course.
*/
export default function CourseButtons({ course }: Props) {
export default function CourseButtons({ course, activeSchedule }: Props) {
const openRateMyProfessorURL = () => {
const primaryInstructor = course.instructors?.[0];
if (!primaryInstructor) return;
@@ -61,6 +64,17 @@ export default function CourseButtons({ course }: Props) {
openNewTab({ url: url.toString() });
};
const saveCourse = async () => {
const schedules = await userScheduleStore.get('schedules');
const active = schedules.find(schedule => schedule.id === activeSchedule?.id);
if (!active) return;
active.addCourse(course);
await userScheduleStore.set('schedules', schedules);
};
return (
<Card className={styles.container}>
<Button
@@ -86,7 +100,7 @@ export default function CourseButtons({ course }: Props) {
</Text>
<Icon className={styles.icon} color='white' name='collections_bookmark' size='medium' />
</Button>
<Button type='success' className={styles.button}>
<Button disabled={!activeSchedule} onClick={saveCourse} type='success' className={styles.button}>
<Text size='medium' weight='regular' color='white'>
Save
</Text>

4
src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { Course } from 'src/shared/types/Course';
import { UserSchedule } from 'src/shared/types/UserSchedule';
import Card from 'src/views/components/common/Card/Card';
import Divider from 'src/views/components/common/Divider/Divider';
import Icon from 'src/views/components/common/Icon/Icon';
@@ -10,6 +11,7 @@ import styles from './CourseHeader.module.scss';
type Props = {
course: Course;
activeSchedule?: UserSchedule;
onClose: () => void;
};
@@ -17,7 +19,7 @@ type Props = {
* This component displays the header of the course info popup.
* It displays the course name, unique id, instructors, and schedule, all formatted nicely.
*/
export default function CourseHeader({ course, onClose }: Props) {
export default function CourseHeader({ course, activeSchedule, onClose }: Props) {
const getBuildingUrl = (building?: string): string | undefined => {
if (!building) return undefined;
return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;

6
src/views/components/injected/CoursePopup/CoursePopup.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { Course } from 'src/shared/types/Course';
import { UserSchedule } from 'src/shared/types/UserSchedule';
import Popup from '../../common/Popup/Popup';
import CourseDescription from './CourseDescription/CourseDescription';
import CourseHeader from './CourseHeader/CourseHeader';
@@ -8,16 +9,17 @@ import GradeDistribution from './GradeDistribution/GradeDistribution';
interface Props {
course: Course;
activeSchedule?: UserSchedule;
onClose: () => void;
}
/**
* The popup that appears when the user clicks on a course for more details.
*/
export default function CoursePopup({ course, onClose }: Props) {
export default function CoursePopup({ course, activeSchedule, onClose }: Props) {
return (
<Popup className={styles.popup} overlay onClose={onClose}>
<CourseHeader course={course} onClose={onClose} />
<CourseHeader course={course} activeSchedule={activeSchedule} onClose={onClose} />
<CourseDescription course={course} />
<GradeDistribution course={course} />
</Popup>

1
src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.tsx
View File

@@ -137,6 +137,7 @@ export default function GradeDistribution({ course }: Props) {
useEffect(() => {
queryAggregateDistribution(course)
.then(([distribution, semesters]) => {
console.log('.then -> distribution, semesters:', distribution, semesters);
setSemesters(semesters);
updateChart(distribution);
setStatus(DataStatus.FOUND);

32
src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx
View File

@@ -16,23 +16,8 @@ const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD'];
export default function RecruitmentBanner() {
const [container, setContainer] = useState<HTMLDivElement | null>(null);
const shouldShowBanner = (): boolean => {
const params = ['fos_fl', 'fos_cn'];
let department = '';
params.forEach(p => {
const param = new URLSearchParams(window.location.search).get(p);
if (param) {
department = param;
}
});
if (!department) {
return false;
}
return RECRUIT_FROM_DEPARTMENTS.includes(department);
};
useEffect(() => {
if (!shouldShowBanner()) {
if (!canRecruitFrom()) {
return;
}
const container = document.createElement('div');
@@ -64,3 +49,18 @@ export default function RecruitmentBanner() {
container
);
}
export function canRecruitFrom(): boolean {
const params = ['fos_fl', 'fos_cn'];
let department = '';
params.forEach(p => {
const param = new URLSearchParams(window.location.search).get(p);
if (param) {
department = param;
}
});
if (!department) {
return false;
}
return RECRUIT_FROM_DEPARTMENTS.includes(department);
}

7
src/views/components/injected/TableRow/TableRow.module.scss
View File

@@ -11,3 +11,10 @@
box-shadow: none !important;
}
}
.inActiveSchedule {
* {
color: $turtle_pond !important;
font-weight: bold !important;
}
}

10
src/views/components/injected/TableRow/TableRow.tsx
View File

@@ -9,13 +9,17 @@ interface Props {
isSelected: boolean;
row: ScrapedRow;
onClick: (...args: any[]) => any;
/**
* Whether the course is in the user' active schedule.
*/
isInActiveSchedule: boolean;
}
/**
* This component is injected into each row of the course catalog table.
* @returns a react portal to the new td in the column or null if the column has not been created yet.
*/
export default function TableRow({ row, isSelected, onClick }: Props): JSX.Element | null {
export default function TableRow({ row, isSelected, isInActiveSchedule, onClick }: Props): JSX.Element | null {
const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
const { element, course } = row;
@@ -35,6 +39,10 @@ export default function TableRow({ row, isSelected, onClick }: Props): JSX.Eleme
element.classList[isSelected ? 'add' : 'remove'](styles.selectedRow);
}, [isSelected, element.classList]);
useEffect(() => {
element.classList[isInActiveSchedule ? 'add' : 'remove'](styles.inActiveSchedule);
}, [isInActiveSchedule, element.classList]);
if (!container) {
return null;
}

26
src/views/hooks/useUserSchedules.ts Normal file
View File

@@ -0,0 +1,26 @@
import { Serialized } from 'chrome-extension-toolkit';
import { useEffect, useState } from 'react';
import { userScheduleStore } from 'src/shared/storage/userScheduleStore';
import { UserSchedule } from 'src/shared/types/UserSchedule';
export default function useUserSchedules(): UserSchedule[] {
const [schedules, setSchedules] = useState<UserSchedule[]>([]);
useEffect(() => {
function updateSchedules(schedules: Serialized<UserSchedule>[]) {
setSchedules(schedules.map(s => new UserSchedule(s)));
}
userScheduleStore.get('schedules').then(updateSchedules);
const listener = userScheduleStore.listen('schedules', ({ newValue }) => {
updateSchedules(newValue);
});
return () => {
userScheduleStore.removeListener(listener);
};
}, []);
return schedules;
}

2
src/views/index.tsx
View File

@@ -11,7 +11,7 @@ if (!support) {
throw new Error('UT Registration Plus does not support this page, even though it should...');
}
if (isExtensionPopup()) {
if (support === SiteSupport.EXTENSION_POPUP) {
render(<PopupMain />, document.getElementById('root'));
}

10
src/views/lib/CourseCatalogScraper.ts
View File

@@ -78,6 +78,7 @@ export class CourseCatalogScraper {
number,
status,
isReserved,
creditHours: this.getCreditHours(number),
schedule: this.getSchedule(row),
registerURL: this.getRegisterURL(row),
url: this.getURL(row),
@@ -112,6 +113,15 @@ export class CourseCatalogScraper {
return [courseName, department, number];
}
/**
* Gets how many credit hours the course is worth
* @param number the course number, CS 314H
* @return the number of credit hours the course is worth
*/
getCreditHours(number: string): number {
return Number(number.split('')[0]);
}
/**
* Scrape the Unique ID from the course catalog table row
* @param row the row of the course catalog table

12
src/views/lib/database/queryDistribution.ts
View File

@@ -37,9 +37,17 @@ export async function queryAggregateDistribution(course: Course): Promise<[Distr
F: row.f,
};
const semesters: Semester[] = row.semesters.split(',').map((sem: string) => {
// the db file for some reason has duplicate semesters, so we use a set to remove duplicates
const rawSemesters = new Set<string>();
row.semesters.split(',').forEach((sem: string) => {
rawSemesters.add(sem);
});
const semesters: Semester[] = [];
rawSemesters.forEach((sem: string) => {
const [season, year] = sem.split(' ');
return { year: parseInt(year, 10), season: season as Semester['season'] };
semesters.push({ year: parseInt(year, 10), season: season as Semester['season'] });
});
return [distribution, semesters];

6
src/views/lib/getSiteSupport.ts
View File

@@ -1,3 +1,5 @@
import { isExtensionPopup } from 'chrome-extension-toolkit';
/**
* An enum that represents the different types of pages that we support
* a given url/page can correspond to many of these enum values
@@ -7,6 +9,7 @@ export enum SiteSupport {
COURSE_CATALOG_DETAILS = 'COURSE_CATALOG_DETAILS',
UT_PLANNER = 'UT_PLANNER',
WAITLIST = 'WAITLIST',
EXTENSION_POPUP = 'EXTENSION_POPUP',
}
/**
@@ -15,6 +18,9 @@ export enum SiteSupport {
* @returns a list of page types that the current page is
*/
export default function getSiteSupport(url: string): SiteSupport | null {
if (isExtensionPopup()) {
return SiteSupport.EXTENSION_POPUP;
}
if (url.includes('utexas.collegescheduler.com')) {
return SiteSupport.UT_PLANNER;
}