+
-
-
-
-
-
- );
-};
diff --git a/src/components/MiniScore.tsx b/src/components/MiniScore.tsx
deleted file mode 100644
index 16f110a..0000000
--- a/src/components/MiniScore.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { getScoreColor } from '~utils/styling';
-
-interface MiniScoreProps {
- name: 'RMP' | 'DIFF' | 'WTA';
- title: string;
- score: number;
- maxScore: number;
- inverted: boolean;
- className: string;
-}
-
-export const MiniScore = ({
- name,
- title,
- score,
- maxScore,
- inverted,
- className,
-}: MiniScoreProps) => {
- return (
- ;
+ rmp: GenericFetchedData;
+ setPage: (arg0: 'landing' | 'list' | SearchQuery) => void;
+};
+
+const ProfessorOverview = ({
+ professor,
+ grades,
+ rmp,
+ setPage,
+}: ProfessorOverviewProps) => {
+ const [profData, setProfData] = useState<
+ GenericFetchedData
+ >({ state: 'loading' });
+
+ const [src, setSrc] = useState(fallbackSrc);
+
+ useEffect(() => {
+ setProfData({ state: 'loading' });
+ fetchWithCache(
+ TRENDS_URL +
+ 'api/professor?profFirst=' +
+ encodeURIComponent(String(professor.profFirst)) +
+ '&profLast=' +
+ encodeURIComponent(String(professor.profLast)),
+ {
+ method: 'GET',
+ headers: {
+ Accept: 'application/json',
+ },
+ },
+ cacheIndexProfessor,
+ expireTime,
+ )
+ .then((response: { message: string; data: ProfessorInterface }) => {
+ if (response.message !== 'success') {
+ throw new Error(response.message);
+ }
+ setProfData({
+ state: typeof response.data !== 'undefined' ? 'done' : 'error',
+ data: response.data as ProfessorInterface,
+ });
+ setSrc(response.data.image_uri);
+ })
+ .catch((error) => {
+ setProfData({ state: 'error' });
+ console.error('Professor data', error);
+ });
+ }, [professor]);
+
+ return (
+
-
-
-
- );
-};
diff --git a/src/components/Rating.tsx b/src/components/Rating.tsx
new file mode 100644
index 0000000..1a37fa8
--- /dev/null
+++ b/src/components/Rating.tsx
@@ -0,0 +1,10 @@
+import { Rating as _Rating, styled } from '@mui/material';
+
+// for star color for rating
+const Rating = styled(_Rating)(({ theme }) => ({
+ '& .MuiRating-iconFilled': {
+ color: theme.palette.primary.main,
+ },
+}));
+
+export default Rating;
diff --git a/src/components/RmpRatings.tsx b/src/components/RmpRatings.tsx
deleted file mode 100644
index 561ee15..0000000
--- a/src/components/RmpRatings.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import Chart from 'react-apexcharts';
-
-import { ratingsChartOptions } from '~utils/styling';
-
-export const RmpRatings = ({
- series,
- total,
-}: {
- series: number[];
- total: number;
-}) => {
- return (
- ;
+ backupGrades: GenericFetchedData;
+ rmp: GenericFetchedData;
+ setPage: (arg0: SearchQuery) => void;
+};
+
+function Row({ course, grades, backupGrades, rmp, setPage }: RowProps) {
+ const [open, setOpen] = useState(false);
+ const canOpen =
+ !(typeof grades === 'undefined' || grades.state === 'error') ||
+ !(typeof rmp === 'undefined' || rmp.state === 'error');
+
+ const rainbowColors = useRainbowColors();
+ const gpaToColor = (gpa: number): string => {
+ if (gpa >= 4.0) return rainbowColors[1];
+ if (gpa >= 3.67) return rainbowColors[2];
+ if (gpa >= 3.33) return rainbowColors[3];
+ if (gpa >= 3.0) return rainbowColors[4];
+ if (gpa >= 2.67) return rainbowColors[5];
+ if (gpa >= 2.33) return rainbowColors[6];
+ if (gpa >= 2.0) return rainbowColors[7];
+ if (gpa >= 1.67) return rainbowColors[8];
+ if (gpa >= 1.33) return rainbowColors[9];
+ if (gpa >= 1.0) return rainbowColors[10];
+ if (gpa >= 0.67) return rainbowColors[11];
+ return rainbowColors[12];
+ };
+
+ return (
+ <>
+
+
+
+ {searchQueryLabel(convertToProfOnly(course))}
+
+
+
+ {
+ if (canOpen) {
+ setOpen(!open);
+ }
+ }} // opens/closes the card by clicking anywhere on the row
+ >
+
+
+
+
+
+
+ e.stopPropagation() // prevents opening/closing the card when clicking on the compare checkbox
+ }
+ >
+
+ setPage(convertToProfOnly(course))}
+ >
+
+
+
+
+ {((typeof grades === 'undefined' || grades.state === 'error') &&
+ (((typeof backupGrades === 'undefined' ||
+ backupGrades.state === 'error') && <>) ||
+ (backupGrades.state === 'loading' && (
+
+ A
+
+ )) ||
+ (backupGrades.state === 'done' && (
+
+
+
+ }
+ >
+
+ {backupGrades.data.letter_grade}
+
+
+
+ )))) ||
+ (grades.state === 'loading' && (
+
+ A
+
+ )) ||
+ (grades.state === 'done' && (
+
+
+ {grades.data.letter_grade}
+
+
+ )) ||
+ null}
+
+
+ {((typeof rmp === 'undefined' || rmp.state === 'error') && <>) ||
+ (rmp.state === 'loading' && (
+
+
+ )) ||
+ (rmp.state === 'done' && (
+
+
+ )) ||
+ null}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+type SearchResultsTableProps = {
+ results: SearchQuery[];
+ grades: { [key: string]: GenericFetchedData };
+ rmp: { [key: string]: GenericFetchedData };
+ setPage: (arg0: SearchQuery) => void;
+};
+
+const SearchResultsTable = ({
+ results,
+ grades,
+ rmp,
+ setPage,
+}: SearchResultsTableProps) => {
+ //Table sorting category
+ const [orderBy, setOrderBy] = useState<'none' | 'gpa' | 'rating'>('none');
+ //Table sorting direction
+ const [order, setOrder] = useState<'asc' | 'desc'>('asc');
+ //Cycle through sorting
+ function handleClick(col: 'none' | 'gpa' | 'rating') {
+ if (orderBy !== col) {
+ setOrderBy(col);
+ setOrder('desc'); //default number behavior goes from high to low for our metrics
+ } else {
+ if (order === 'desc') {
+ setOrder('asc');
+ } else {
+ setOrderBy('none');
+ }
+ }
+ }
+
+ //Sort
+ let sortedResults = results;
+ if (orderBy !== 'none') {
+ sortedResults = [...results].sort((a, b) => {
+ if (orderBy === 'gpa') {
+ let aGrades = grades[searchQueryLabel(a)];
+ let bGrades = grades[searchQueryLabel(b)];
+ if (!aGrades || aGrades.state !== 'done') {
+ aGrades = grades[searchQueryLabel(convertToProfOnly(a))];
+ }
+ if (!bGrades || bGrades.state !== 'done') {
+ bGrades = grades[searchQueryLabel(convertToProfOnly(b))];
+ }
+
+ if (
+ (!aGrades || aGrades.state !== 'done') &&
+ (!bGrades || bGrades.state !== 'done')
+ ) {
+ return 0;
+ }
+
+ if (!aGrades || aGrades.state !== 'done') {
+ return 9999;
+ }
+ if (!bGrades || bGrades.state !== 'done') {
+ return -9999;
+ }
+
+ if (order === 'asc') {
+ return aGrades.data.gpa - bGrades.data.gpa;
+ }
+ return bGrades.data.gpa - aGrades.data.gpa;
+ }
+ if (orderBy === 'rating') {
+ const aRmp = rmp[searchQueryLabel(convertToProfOnly(a))];
+ const bRmp = rmp[searchQueryLabel(convertToProfOnly(b))];
+ //drop loading/error rows to bottom
+ if (
+ (!aRmp || aRmp.state !== 'done') &&
+ (!bRmp || bRmp.state !== 'done')
+ ) {
+ // If both aRmp and bRmp are not done, treat them as equal and return 0
+ return 0;
+ }
+ if (!aRmp || aRmp.state !== 'done') {
+ return 9999;
+ }
+ if (!bRmp || bRmp.state !== 'done') {
+ return -9999;
+ }
+ const aRating = aRmp?.data?.avgRating ?? 0; // Fallback to 0 if undefined
+ const bRating = bRmp?.data?.avgRating ?? 0; // Fallback to 0 if undefined
+ if (order === 'asc') {
+ return aRating - bRating;
+ }
+ return bRating - aRating;
+ }
+ return 0;
+ });
+ }
+
+ return (
+ //TODO: sticky header
+
+
+
+
+ );
+};
+
+export default SearchResultsTable;
diff --git a/src/components/SingleGradesInfo.tsx b/src/components/SingleGradesInfo.tsx
new file mode 100644
index 0000000..c53993e
--- /dev/null
+++ b/src/components/SingleGradesInfo.tsx
@@ -0,0 +1,123 @@
+import { Skeleton } from '@mui/material';
+import React from 'react';
+
+import BarGraph from '~components/BarGraph';
+import { TRENDS_URL } from '~data/config';
+import type { GenericFetchedData, GradesType } from '~pages';
+import {
+ convertToCourseOnly,
+ convertToProfOnly,
+ type SearchQuery,
+ searchQueryLabel,
+} from '~utils/SearchQuery';
+
+function convertNumbersToPercents(distribution: GradesType): number[] {
+ const total = distribution.total;
+ return distribution.grade_distribution.map(
+ (frequencyOfLetterGrade) => (frequencyOfLetterGrade / total) * 100,
+ );
+}
+
+type Props = {
+ title?: string;
+ course: SearchQuery;
+ grades: GenericFetchedData;
+};
+
+function SingleGradesInfo({ title, course, grades }: Props) {
+ if (typeof grades === 'undefined' || grades.state === 'error') {
+ return null;
+ }
+ if (grades.state === 'loading') {
+ return (
+ ;
+};
+
+function SingleProfInfo({ rmp }: Props) {
+ if (typeof rmp === 'undefined' || rmp.state === 'error') {
+ return null;
+ }
+ if (rmp.state === 'loading') {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Visit Rate My Professors
+
+
+
+ );
+}
+
+export default SingleProfInfo;
diff --git a/src/components/TableSortLabel.tsx b/src/components/TableSortLabel.tsx
new file mode 100644
index 0000000..d56d953
--- /dev/null
+++ b/src/components/TableSortLabel.tsx
@@ -0,0 +1,28 @@
+import {
+ styled,
+ TableSortLabel as _TableSortLabel,
+ type TableSortLabelProps,
+ useMediaQuery,
+} from '@mui/material';
+import React from 'react';
+
+function TableSortLabel(props: TableSortLabelProps) {
+ //Selected arrow color
+ const sortArrowColor = useMediaQuery('(prefers-color-scheme: dark)')
+ ? 'white'
+ : 'black';
+
+ //Change arrow color for TableSortLabel
+ const StyledTableSortLabel = styled(_TableSortLabel)({
+ '& .MuiTableSortLabel-icon': {
+ opacity: 0.5, // Ensure the arrow is always visible
+ },
+ '&.Mui-active .MuiTableSortLabel-icon': {
+ color: sortArrowColor, // Brighten the arrow
+ },
+ });
+
+ return {
- return fetchWithCache(
- 'https://trends.utdnebula.com/api/professor?profFirst=' +
- params.profFirst +
- '&profLast=' +
- params.profLast,
- {
- method: 'GET',
- headers: {
- Accept: 'application/json',
- },
- },
- cacheIndexProfessor,
- 2629800000,
- )
- .then((data) => {
- if (data.message !== 'success') {
- //throw new Error(data.message);
- return null;
- }
- return data.data;
- })
- .catch((error) => {
- console.error('Nebula API', error);
- });
-}
-
-export async function fetchNebulaGrades(
- params: FetchProfessorParameters,
-): Promise {
- return fetchWithCache(
- 'https://trends.utdnebula.com/api/grades?profFirst=' +
- params.profFirst +
- '&profLast=' +
- params.profLast,
- {
- method: 'GET',
- headers: {
- Accept: 'application/json',
- },
- },
- cacheIndexGrades,
- 2629800000,
- )
- .then((data) => {
- if (data.message !== 'success') {
- throw new Error(data.message);
- }
- return data.data;
- })
- .catch((error) => {
- console.error('Nebula API', error);
- });
-}
-
-// Test function. Commented out. Uncomment to test.
-// console.log(await fetchNebulaProfessor({profFirst: "Scott", profLast: "Dollinger"}));
diff --git a/src/data/fetchFromRmp.ts b/src/data/fetchFromRmp.ts
index 475eb94..5308b66 100644
--- a/src/data/fetchFromRmp.ts
+++ b/src/data/fetchFromRmp.ts
@@ -1,167 +1,20 @@
-import { HEADERS, PROFESSOR_QUERY, RMP_GRAPHQL_URL } from '~data/config';
-import fetchWithCache, { cacheIndexRmp } from '~data/fetchWithCache';
-
-function reportError(context, err) {
- console.error('Error in ' + context + ': ' + err);
-}
-
-function getProfessorUrl(professorName: string, schoolId: string): string {
- const url = new URL(
- 'https://www.ratemyprofessors.com/search/professors/' + schoolId + '?',
- ); //UTD
- url.searchParams.append('q', professorName);
- return url.href;
-}
-
-function getProfessorId(text: string, professorName: string): string {
- const lowerCaseProfessorName = professorName.toLowerCase();
-
- let pendingMatch = null;
- const regex =
- /"legacyId":(\d+).*?"numRatings":(\d+).*?"firstName":"(.*?)","lastName":"(.*?)"/g;
- const allMatches: string[] = text.match(regex);
- const highestNumRatings = 0;
-
- if (allMatches) {
- for (const fullMatch of allMatches) {
- for (const match of fullMatch.matchAll(regex)) {
- console.log(
- match[3].split(' ')[0].toLowerCase() +
- ' ' +
- match[4].toLowerCase() +
- ' ',
- );
- const numRatings = parseInt(match[2]);
- if (
- lowerCaseProfessorName.includes(
- match[3].split(' ')[0].toLowerCase() + ' ' + match[4].toLowerCase(),
- ) &&
- numRatings >= highestNumRatings
- ) {
- pendingMatch = match[1];
- }
- }
- }
- }
-
- return pendingMatch;
-}
-
-function getGraphQlUrlProp(professorId: string) {
- HEADERS[
- 'Referer'
- ] = `https://www.ratemyprofessors.com/ShowRatings.jsp?tid=${professorId}`;
- PROFESSOR_QUERY['variables']['id'] = btoa(`Teacher-${professorId}`);
+import { HEADERS, PROFESSOR_SEARCH_QUERY, RMP_GRAPHQL_URL } from '~data/config';
+import fetchWithCache, {
+ cacheIndexRmp,
+ expireTime,
+} from '~data/fetchWithCache';
+
+function getGraphQlUrlProp(name: string, schoolID: string) {
+ PROFESSOR_SEARCH_QUERY.variables.query.text = name;
+ PROFESSOR_SEARCH_QUERY.variables.query.schoolID = btoa('School-' + schoolID);
return {
method: 'POST',
headers: HEADERS,
- body: JSON.stringify(PROFESSOR_QUERY),
+ body: JSON.stringify(PROFESSOR_SEARCH_QUERY),
};
}
-function wait(delay) {
- return new Promise((resolve) => setTimeout(resolve, delay));
-}
-
-function fetchRetry(url: string, delay: number, tries: number, fetchOptions) {
- function onError(err) {
- const triesLeft: number = tries - 1;
- if (!triesLeft) {
- throw err;
- }
- return wait(delay).then(() =>
- fetchRetry(url, delay, triesLeft, fetchOptions),
- );
- }
- return fetchWithCache(url, fetchOptions, cacheIndexRmp, 2629800000).catch(
- onError,
- );
-}
-
-async function validateResponse(response, fetchOptions) {
- const notOk = response?.status !== 200;
- if (notOk && response && response.url) {
- const details = {
- status: response.status,
- statusText: response.statusText,
- redirected: response.redirected,
- url: response.url,
- };
- reportError(
- 'validateResponse',
- 'Status not OK for fetch request. Details are: ' +
- JSON.stringify(details),
- );
- // If we don't have fetch options, we just use an empty object.
- response = await fetchRetry(response?.url, 200, 3, fetchOptions || {});
- }
- return response;
-}
-
-function fetchWithGraphQl(graphQlUrlProp, resolve) {
- try {
- fetchWithCache(
- RMP_GRAPHQL_URL,
- graphQlUrlProp,
- cacheIndexRmp,
- 2629800000,
- ).then((response) =>
- validateResponse(response, graphQlUrlProp).then((rating) => {
- if (
- rating != null &&
- Object.hasOwn(rating, 'data') &&
- Object.hasOwn(rating['data'], 'node')
- ) {
- rating = rating['data']['node'];
- }
- resolve(rating);
- }),
- );
- } catch (err) {
- reportError('fetchWithGraphQl', err);
- resolve(null); ///
- }
-}
-
-export interface RmpRequest {
- professorName: string;
- schoolId: string;
-}
-export function requestProfessorFromRmp(
- request: RmpRequest,
-): Promise {
- return new Promise((resolve, reject) => {
- // url for promises
- const professorUrl = getProfessorUrl(
- request.professorName,
- request.schoolId,
- );
-
- // fetch professor id from url
- fetchWithCache(
- professorUrl,
- { method: 'GET' },
- cacheIndexRmp,
- 2629800000,
- true,
- )
- .then((text) => {
- const professorId = getProfessorId(text, request.professorName);
-
- // create fetch object for professor id
- const graphQlUrlProp = getGraphQlUrlProp(professorId);
-
- // fetch professor info by id with graphQL
- fetchWithGraphQl(graphQlUrlProp, resolve);
- })
- .catch((error) => {
- reportError('requestProfessorFromRmp', error);
- reject(error);
- });
- });
-}
-
-interface RMPInterface {
+export type RMPInterface = {
avgDifficulty: number;
avgRating: number;
courseCodes: {
@@ -183,10 +36,83 @@ interface RMPInterface {
};
school: {
id: string;
+ name: string;
};
teacherRatingTags: {
tagCount: number;
tagName: string;
}[];
wouldTakeAgainPercent: number;
+};
+
+type Data = {
+ message: string;
+ data?: RMPInterface;
+};
+
+type RmpResponse = {
+ data: {
+ newSearch: {
+ teachers: {
+ edges: {
+ node: RMPInterface;
+ }[];
+ };
+ };
+ };
+};
+
+export default function fetchFromRmp(
+ profFirst: string,
+ profLast: string,
+ schoolId: string,
+ schoolName: string,
+): Promise {
+ const singleProfFirst = profFirst.split(' ')[0];
+ const name = singleProfFirst + ' ' + profLast;
+ // create fetch object for professor
+ const graphQlUrlProp = getGraphQlUrlProp(name, schoolId);
+ return new Promise((resolve, reject) => {
+ // fetch professor info by name with graphQL
+ fetchWithCache(RMP_GRAPHQL_URL, graphQlUrlProp, cacheIndexRmp, expireTime)
+ .then((response: RmpResponse) => {
+ if (
+ response == null ||
+ !Object.hasOwn(response, 'data') ||
+ !Object.hasOwn(response.data, 'newSearch') ||
+ !Object.hasOwn(response.data.newSearch, 'teachers') ||
+ !Object.hasOwn(response.data.newSearch.teachers, 'edges')
+ ) {
+ reject('Data for professor not found');
+ return;
+ }
+ //Remove profs not at UTD and with bad name match
+ const professors = response.data.newSearch.teachers.edges.filter(
+ (prof: { node: RMPInterface }) =>
+ prof.node.school.name === schoolName &&
+ prof.node.firstName.includes(profFirst) &&
+ prof.node.lastName.includes(profLast),
+ );
+ if (professors.length === 0) {
+ reject('Data for professor not found');
+ return;
+ }
+ //Pick prof instance with most ratings
+ let maxRatingsProfessor = professors[0];
+ for (let i = 1; i < professors.length; i++) {
+ if (
+ professors[i].node.numRatings > maxRatingsProfessor.node.numRatings
+ ) {
+ maxRatingsProfessor = professors[i];
+ }
+ }
+ resolve({
+ message: 'success',
+ data: maxRatingsProfessor.node,
+ });
+ })
+ .catch((error) => {
+ reject(error.message);
+ });
+ });
}
diff --git a/src/data/fetchWithCache.ts b/src/data/fetchWithCache.ts
index c8f936d..c55263a 100644
--- a/src/data/fetchWithCache.ts
+++ b/src/data/fetchWithCache.ts
@@ -7,7 +7,9 @@ const storage = new Storage({
//Increment these to reset cache on next deployment
export const cacheIndexProfessor = 0;
export const cacheIndexGrades = 0;
-export const cacheIndexRmp = 0;
+export const cacheIndexRmp = 1;
+
+export const expireTime = 604800; //1 week
function getCache(key: string, cacheIndex: number) {
return new Promise((resolve, reject) => {
diff --git a/src/data/interfaces.ts b/src/data/interfaces.ts
deleted file mode 100644
index 518bb3a..0000000
--- a/src/data/interfaces.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-//TODO: Fix these any types
-
-export interface FetchProfessorParameters {
- firstName: string;
- lastName: string;
-}
-
-export interface FetchCourseParameters {
- subjectPrefix: string;
- courseNumber: string;
-}
-
-export interface FetchSectionParameters {
- courseReference: string;
- professorReference: string;
-}
-
-interface Requisites {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- options: any[];
- required: number;
- type: string;
-}
-
-export interface CourseInterface {
- __v: number;
- _id: string;
- activity_type: string;
- class_level: string;
- co_or_pre_requisites: Requisites;
- corequisites: Requisites;
- course_number: string;
- credit_hours: string;
- description: string;
- grading: string;
- internal_course_number: string;
- laboratory_contact_hours: string;
- lecture_contact_hours: string;
- offering_frequency: string;
- prerequisites: Requisites;
- school: string;
- sections: string[];
- subject_prefix: string;
- title: string;
-}
-
-interface Office {
- building: string;
- room: string;
- map_uri: string;
-}
-
-export interface ProfessorInterface {
- __v: number;
- _id: string;
- email: string;
- first_name: string;
- image_uri: string;
- last_name: string;
- office: Office;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- office_hours: any[];
- phone_number: string;
- profile_uri: string;
- sections: string[];
- titles: string[];
-}
-
-export interface SectionInterface {
- __v: number;
- _id: string;
- academic_session: {
- end_date: string;
- name: string;
- start_date: string;
- };
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- attributes: any[];
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- core_flags: any[];
- course_reference: string;
- grade_distribution: number[];
- instruction_mode: string;
- internal_class_number: string;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- meetings: any[];
- professors: string[];
- section_corequisites: {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- options: any[];
- type: string;
- };
- section_number: string;
- syllabus_uri: string;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- teaching_assistants: any[];
-}
-
-export interface CourseCodeInterface {
- courseCount: number;
- courseName: string;
-}
-export interface RatingsDistributionInterface {
- r1: number;
- r2: number;
- r3: number;
- r4: number;
- r5: number;
- total: number;
-}
-export interface TeacherRatingTag {
- tagCount: number;
- tagName: string;
-}
-
-export interface RMPRatingInterface {
- avgDifficulty: number;
- avgRating: number;
- courseCodes: CourseCodeInterface[];
- department: string;
- firstName: string;
- lastName: string;
- legacyId: number;
- numRatings: number;
- ratingsDistribution: RatingsDistributionInterface;
- school: { id: string };
- teacherRatingTags: TeacherRatingTag[];
- wouldTakeAgainPercent: number;
-}
diff --git a/src/fonts/Kallisto/Kallisto Bold Italic.otf b/src/fonts/Kallisto/Kallisto Bold Italic.otf
new file mode 100644
index 0000000..1d862e4
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Bold Italic.otf differ
diff --git a/src/fonts/Kallisto/Kallisto Bold.otf b/src/fonts/Kallisto/Kallisto Bold.otf
new file mode 100644
index 0000000..fb7595a
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Bold.otf differ
diff --git a/src/fonts/Kallisto/Kallisto Heavy Italic.otf b/src/fonts/Kallisto/Kallisto Heavy Italic.otf
new file mode 100644
index 0000000..55750f9
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Heavy Italic.otf differ
diff --git a/src/fonts/Kallisto/Kallisto Heavy.otf b/src/fonts/Kallisto/Kallisto Heavy.otf
new file mode 100644
index 0000000..0bf573e
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Heavy.otf differ
diff --git a/src/fonts/Kallisto/Kallisto Light Italic.otf b/src/fonts/Kallisto/Kallisto Light Italic.otf
new file mode 100644
index 0000000..186e031
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Light Italic.otf differ
diff --git a/src/fonts/Kallisto/Kallisto Light.otf b/src/fonts/Kallisto/Kallisto Light.otf
new file mode 100644
index 0000000..278d4a1
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Light.otf differ
diff --git a/src/fonts/Kallisto/Kallisto Medium Italic.otf b/src/fonts/Kallisto/Kallisto Medium Italic.otf
new file mode 100644
index 0000000..1c36a2e
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Medium Italic.otf differ
diff --git a/src/fonts/Kallisto/Kallisto Medium.otf b/src/fonts/Kallisto/Kallisto Medium.otf
new file mode 100644
index 0000000..b0f8ad7
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Medium.otf differ
diff --git a/src/fonts/Kallisto/Kallisto Thin Italic.otf b/src/fonts/Kallisto/Kallisto Thin Italic.otf
new file mode 100644
index 0000000..f2356b5
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Thin Italic.otf differ
diff --git a/src/fonts/Kallisto/Kallisto Thin.otf b/src/fonts/Kallisto/Kallisto Thin.otf
new file mode 100644
index 0000000..d9e7170
Binary files /dev/null and b/src/fonts/Kallisto/Kallisto Thin.otf differ
diff --git a/src/pages/CoursePage.tsx b/src/pages/CoursePage.tsx
deleted file mode 100644
index eac9321..0000000
--- a/src/pages/CoursePage.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { sendToBackground } from '@plasmohq/messaging';
-import React, { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-
-import type { ShowCourseTabPayload } from '~background';
-import { Landing } from '~components/Landing';
-import { MiniProfessor } from '~components/MiniProfessor';
-import {
- buildProfessorProfile,
- ProfessorProfileInterface,
-} from '~data/builder';
-
-// Example of how to fetch the scraped data from the background script, given that it exists
-async function getCourseData() {
- const response: ShowCourseTabPayload = await sendToBackground({
- name: 'getScrapeData',
- });
- return response;
-}
-
-export const CoursePage = () => {
- // TODO: CHANGE INTERFACE
- const { state }: { state: ProfessorProfileInterface[] } = useLocation();
- const [onCoursebook, setOnCoursebook] = useState(false);
- const [profiles, setProfiles] = useState([]);
-
- useEffect(() => {
- if (!state) {
- setOnCoursebook(true);
- getCourseData().then((payload) => {
- if (payload === null) {
- setOnCoursebook(false);
- } else {
- const newProfiles = [];
- for (let i = 0; i < payload.professors.length; i++) {
- newProfiles.push({
- name: payload.professors[i],
- loading: true,
- });
- }
- setProfiles(newProfiles);
-
- for (let i = 0; i < payload.professors.length; i++) {
- buildProfessorProfile(payload.header, payload.professors[i]).then(
- (profile) => {
- setProfiles((old) => {
- const newProfiles = [...old];
- newProfiles[i] = profile;
- return newProfiles;
- });
- },
- );
- }
- }
- });
- } else {
- setProfiles(state);
- setOnCoursebook(true);
- }
- }, []);
-
- return (
-
-
-);
+import { sendToBackground } from '@plasmohq/messaging';
+import React, { useEffect, useState } from 'react';
+
+import type { ShowCourseTabPayload } from '~background';
+import CourseOverview from '~components/CourseOverview';
+import Landing from '~components/Landing';
+import ProfessorOverview from '~components/ProfessorOverview';
+import SearchResultsTable from '~components/SearchResultsTable';
+import TopMenu from '~components/TopMenu';
+import { SCHOOL_ID, SCHOOL_NAME, TRENDS_URL } from '~data/config';
+import fetchFromRmp, { type RMPInterface } from '~data/fetchFromRmp';
+import fetchWithCache, {
+ cacheIndexGrades,
+ expireTime,
+} from '~data/fetchWithCache';
+import {
+ convertToProfOnly,
+ type SearchQuery,
+ searchQueryEqual,
+ searchQueryLabel,
+} from '~utils/SearchQuery';
+
+type GenericFetchedDataError = {
+ state: 'error';
+ data?: T;
+};
+type GenericFetchedDataLoading = {
+ state: 'loading';
+};
+type GenericFetchedDataDone = {
+ state: 'done';
+ data: T;
+};
+export type GenericFetchedData =
+ | GenericFetchedDataError
+ | GenericFetchedDataLoading
+ | GenericFetchedDataDone;
+
+const gpaToLetterGrade = (gpa: number): string => {
+ if (gpa >= 4.0) return 'A';
+ if (gpa >= 3.67) return 'A-';
+ if (gpa >= 3.33) return 'B+';
+ if (gpa >= 3.0) return 'B';
+ if (gpa >= 2.67) return 'B-';
+ if (gpa >= 2.33) return 'C+';
+ if (gpa >= 2.0) return 'C';
+ if (gpa >= 1.67) return 'C-';
+ if (gpa >= 1.33) return 'D+';
+ if (gpa >= 1.0) return 'D';
+ if (gpa >= 0.67) return 'D-';
+ return 'F';
+};
+
+//Find GPA, total, and grade_distribution based on including some set of semesters
+function calculateGrades(grades: GradesData, academicSessions?: string[]) {
+ let grade_distribution = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+ for (const session of grades) {
+ if (
+ typeof academicSessions === 'undefined' ||
+ academicSessions.includes(session._id)
+ ) {
+ grade_distribution = grade_distribution.map(
+ (item, i) => item + session.grade_distribution[i],
+ );
+ }
+ }
+
+ const total: number = grade_distribution.reduce(
+ (accumulator, currentValue) => accumulator + currentValue,
+ 0,
+ );
+
+ const GPALookup = [
+ 4, 4, 3.67, 3.33, 3, 2.67, 2.33, 2, 1.67, 1.33, 1, 0.67, 0,
+ ];
+ let gpa = -1;
+ if (total !== 0) {
+ gpa =
+ GPALookup.reduce(
+ (accumulator, currentValue, index) =>
+ accumulator + currentValue * grade_distribution[index],
+ 0,
+ ) /
+ (total - grade_distribution[grade_distribution.length - 1]);
+ }
+ const letter_grade = gpaToLetterGrade(gpa);
+
+ return {
+ gpa: gpa,
+ total: total,
+ grade_distribution: grade_distribution,
+ letter_grade: letter_grade,
+ };
+}
+type GradesData = {
+ _id: string;
+ grade_distribution: number[];
+}[];
+export type GradesType = {
+ gpa: number;
+ total: number;
+ grade_distribution: number[];
+ letter_grade: string;
+ grades: GradesData;
+};
+//Fetch grades by academic session from nebula api
+function fetchGradesData(course: SearchQuery): Promise {
+ return fetchWithCache(
+ TRENDS_URL +
+ 'api/grades?' +
+ Object.keys(course)
+ .map(
+ (key) =>
+ key +
+ '=' +
+ encodeURIComponent(String(course[key as keyof SearchQuery])),
+ )
+ .join('&'),
+ {
+ method: 'GET',
+ headers: {
+ Accept: 'application/json',
+ },
+ },
+ cacheIndexGrades,
+ expireTime,
+ ).then((response: { message: string; data: GradesData }) => {
+ if (response.message !== 'success') {
+ throw new Error(response.message);
+ }
+ if (response.data == null) {
+ throw new Error('null data');
+ }
+ return {
+ ...calculateGrades(response.data),
+ grades: response.data, //type GradesData
+ };
+ });
+}
+
+//Fetch RMP data from RMP
+function fetchRmpData(professor: SearchQuery): Promise {
+ return fetchFromRmp(
+ professor.profFirst,
+ professor.profLast,
+ SCHOOL_ID,
+ SCHOOL_NAME,
+ ).then((response) => {
+ if (typeof response === 'string') {
+ throw new Error(response);
+ }
+ if (response.message !== 'success') {
+ throw new Error(response.message);
+ }
+ return response.data;
+ });
+}
+
+// Example of how to fetch the scraped data from the background script, given that it exists
+async function getCourseData() {
+ const response: ShowCourseTabPayload = await sendToBackground({
+ // See https://docs.plasmo.com/framework/messaging#3-generate-static-types
+ // @ts-expect-error:next-line
+ name: 'getScrapeData',
+ });
+ return response;
+}
+
+function removeDuplicates(array: SearchQuery[]) {
+ return array.filter(
+ (obj1, index, self) =>
+ index === self.findIndex((obj2) => searchQueryEqual(obj1, obj2)),
+ );
+}
+
+const Index = () => {
+ const [page, setPage] = useState<'landing' | 'list' | SearchQuery>('landing');
+ const [listScroll, setListScroll] = useState(0);
+ function setPageAndScroll(set: 'landing' | 'list' | SearchQuery) {
+ if (set === 'list') {
+ //give time to render then scroll back down to last position
+ setTimeout(() => window.scrollTo({ top: listScroll }), 0);
+ } else {
+ //save scroll pos
+ setListScroll(window.scrollY);
+ window.scrollTo({ top: 0 });
+ }
+ setPage(set);
+ }
+ const [course, setCourse] = useState({});
+
+ const [results, setResults] = useState([]);
+
+ useEffect(() => {
+ getCourseData().then((payload) => {
+ if (payload === null) {
+ setPage('landing');
+ return;
+ }
+ setPage('list');
+ const newCourse = {
+ prefix: payload.header.subjectPrefix,
+ number: payload.header.courseNumber,
+ };
+ setCourse(newCourse);
+ fetchAndStoreGradesData(newCourse);
+ let newResults = [];
+ for (const professor of payload.professors) {
+ const splitProf = professor.split(' ');
+ const profFirst = splitProf[0];
+ const profLast = splitProf[splitProf.length - 1];
+ newResults.push({
+ prefix: payload.header.subjectPrefix,
+ number: payload.header.courseNumber,
+ profFirst: profFirst,
+ profLast: profLast,
+ });
+ }
+ newResults = removeDuplicates(newResults);
+ setResults(newResults);
+ getData(newResults);
+ });
+ }, []);
+
+ const [grades, setGrades] = useState<{
+ [key: string]: GenericFetchedData;
+ }>({});
+ function addToGrades(key: string, value: GenericFetchedData) {
+ setGrades((old) => {
+ const newVal = { ...old };
+ newVal[key] = value;
+ return newVal;
+ });
+ }
+ //Store rmp scores by profs
+ const [rmp, setRmp] = useState<{
+ [key: string]: GenericFetchedData;
+ }>({});
+ function addToRmp(key: string, value: GenericFetchedData) {
+ setRmp((old) => {
+ const newVal = { ...old };
+ newVal[key] = value;
+ return newVal;
+ });
+ }
+
+ //Call fetchGradesData and store response
+ function fetchAndStoreGradesData(course: SearchQuery) {
+ addToGrades(searchQueryLabel(course), { state: 'loading' });
+ fetchGradesData(course)
+ .then((res: GradesType) => {
+ //Add to storage
+ //Set loading status to done, unless total was 0 in calculateGrades
+ addToGrades(searchQueryLabel(course), {
+ state: 'done',
+ data: res,
+ });
+ })
+ .catch((error) => {
+ //Set loading status to error
+ addToGrades(searchQueryLabel(course), { state: 'error' });
+ console.error('Grades data for ' + searchQueryLabel(course), error);
+ });
+ }
+
+ //Call fetchRmpData and store response
+ function fetchAndStoreRmpData(professor: SearchQuery) {
+ addToRmp(searchQueryLabel(professor), { state: 'loading' });
+ fetchRmpData(professor)
+ .then((res: RMPInterface) => {
+ //Add to storage
+ //Set loading status to done
+ addToRmp(searchQueryLabel(professor), {
+ state: typeof res !== 'undefined' ? 'done' : 'error',
+ data: res,
+ });
+ })
+ .catch((error) => {
+ //Set loading status to error
+ addToRmp(searchQueryLabel(professor), { state: 'error' });
+ console.error('RMP data for ' + searchQueryLabel(professor), error);
+ });
+ }
+
+ //On change to results, load new data
+ function getData(results: SearchQuery[]) {
+ //Grade data
+ //Fetch each result
+ for (const result of results) {
+ fetchAndStoreGradesData(result);
+ }
+
+ //RMP data
+ //Get list of profs from results
+ //Remove duplicates so as not to fetch multiple times
+ const professorsInResults = results
+ //Remove course data from each
+ .map((result) => convertToProfOnly(result))
+ //Remove empty objects (used to be only course data)
+ .filter((obj) => Object.keys(obj).length !== 0);
+ //Fetch each professor
+ for (const professor of professorsInResults) {
+ fetchAndStoreRmpData(professor);
+ fetchAndStoreGradesData(professor);
+ }
+ }
+
+ return (
+
-
+
+
);
}
diff --git a/src/style.css b/src/style.css
index 2c85cf6..73d19b0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,36 +1,81 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+ box-sizing: border-box;
+}
@layer base {
- /* For big scores, numbers */
- h1 {
- @apply text-2xl font-main font-bold;
+ /* Kallisto font */
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Thin.otf') format('opentype');
+ font-weight: 100;
+ font-style: normal;
}
-
- /* For card title, profile name, etc. */
- h2 {
- @apply text-xl font-main font-semibold;
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Thin Italic.otf') format('opentype');
+ font-weight: 100;
+ font-style: italic;
}
-
- /* Smaller headings */
- h3 {
- @apply text-base font-main font-semibold;
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Light.otf') format('opentype');
+ font-weight: 300;
+ font-style: normal;
}
-
- /* ex. RMP tags */
- h4 {
- @apply text-sm font-main font-light;
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Light Italic.otf') format('opentype');
+ font-weight: 300;
+ font-style: italic;
}
-
- /* Subtitles */
- h6 {
- @apply text-xs font-main font-medium text-gray-dark;
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Medium.otf') format('opentype');
+ font-weight: 500;
+ font-style: normal;
}
-
- p {
- @apply text-base font-main font-normal;
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Medium Italic.otf') format('opentype');
+ font-weight: 500;
+ font-style: italic;
+ }
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Bold.otf') format('opentype');
+ font-weight: 700;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Bold Italic.otf') format('opentype');
+ font-weight: 700;
+ font-style: italic;
+ }
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Heavy.otf') format('opentype');
+ font-weight: 900;
+ font-style: normal;
+ }
+ @font-face {
+ font-family: 'Kallisto';
+ src: url('fonts/Kallisto/Kallisto Heavy Italic.otf') format('opentype');
+ font-weight: 900;
+ font-style: italic;
}
}
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer utilities {
+ .bg-lighten {
+ background-color: rgba(255, 255, 255, 0.6);
+ }
+ .bg-darken {
+ background-color: rgba(0, 0, 0, 0.6);
+ }
+}
diff --git a/src/tabs/permissions.tsx b/src/tabs/permissions.tsx
new file mode 100644
index 0000000..fc671e0
--- /dev/null
+++ b/src/tabs/permissions.tsx
@@ -0,0 +1,47 @@
+import '~/style.css';
+
+import { Button } from '@mui/material';
+import React, { useState } from 'react';
+
+import { neededOrigins } from '~data/config';
+
+const realBrowser = process.env.PLASMO_BROWSER === 'chrome' ? chrome : browser;
+
+function PermissionsPls() {
+ const [granted, setGranted] = useState(false);
+
+ return (
+ {
+ if (!('profFirst' in searchQuery && 'profLast' in searchQuery)) {
+ return {};
+ }
+ return {
+ profFirst: searchQuery.profFirst as string,
+ profLast: searchQuery.profLast as string,
+ };
+}
+
+export function convertToCourseOnly(
+ searchQuery: SearchQuery,
+): Course | Record {
+ if (!('prefix' in searchQuery && 'number' in searchQuery)) {
+ return {};
+ }
+ return {
+ prefix: searchQuery.prefix as string,
+ number: searchQuery.number as string,
+ };
+}
+
+export function searchQueryLabel(query: SearchQuery): string {
+ let result = '';
+ if (typeof query.prefix !== 'undefined') {
+ result += query.prefix;
+ }
+ if (typeof query.number !== 'undefined') {
+ result += ' ' + query.number;
+ }
+ if (
+ typeof query.profFirst !== 'undefined' &&
+ typeof query.profLast !== 'undefined'
+ ) {
+ result += ' ' + query.profFirst + ' ' + query.profLast;
+ }
+ return result.trim();
+}
+
+export function searchQueryEqual(
+ query1: SearchQuery,
+ query2: SearchQuery,
+): boolean {
+ if (query1.prefix !== query2.prefix) {
+ return false;
+ }
+ if (
+ query1.profFirst !== query2.profFirst ||
+ query1.profLast !== query2.profLast
+ ) {
+ return false;
+ }
+ if (query1.number !== query2.number) {
+ return false;
+ }
+ return true;
+}
diff --git a/src/utils/colors.tsx b/src/utils/colors.tsx
new file mode 100644
index 0000000..a831053
--- /dev/null
+++ b/src/utils/colors.tsx
@@ -0,0 +1,41 @@
+import { useMediaQuery } from '@mui/material';
+
+const rainbowColors_dark = [
+ '#9eff83',
+ '#a6ff83',
+ '#b4ff83',
+ '#c6ff83',
+ '#d4ff83',
+ '#f0ff83',
+ '#fff283',
+ '#ffe083',
+ '#ffce83',
+ '#ffb883',
+ '#ffa383',
+ '#ff8f83',
+ '#ff8383',
+ '#d3d3d3',
+];
+
+const rainbowColors_light = [
+ '#79ff57',
+ '#92ff57',
+ '#abff57',
+ '#c4ff57',
+ '#ddff57',
+ '#f7ff57',
+ '#ffee57',
+ '#ffd557',
+ '#ffbc57',
+ '#ffa357',
+ '#ff8957',
+ '#ff7057',
+ '#ff5757',
+ '#b8b8b8',
+];
+
+export function useRainbowColors() {
+ return useMediaQuery('(prefers-color-scheme: dark)')
+ ? rainbowColors_dark
+ : rainbowColors_light;
+}
diff --git a/src/utils/styling.ts b/src/utils/styling.ts
deleted file mode 100644
index 4c0559a..0000000
--- a/src/utils/styling.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import type { ApexOptions } from 'apexcharts';
-
-/** sets the background color of an element based on the score */
-export const getScoreColor = (
- value: number,
- outOf: number,
- inverted: boolean,
-) => {
- value = (inverted ? outOf - value : value) / outOf;
- const hue = (value * 120).toString(10);
- return ['hsl(', hue, ',100%,85%)'].join('');
-};
-
-/** Apex styling options for the profile grade distribution chart */
-export const gradeChartOptions: ApexOptions = {
- plotOptions: {
- bar: {
- distributed: true,
- },
- },
- noData: {
- text: 'Grade data unavailable for professor',
- align: 'center',
- verticalAlign: 'middle',
- },
- dataLabels: {
- enabled: false,
- },
- legend: {
- show: false,
- },
- colors: [
- '#79ff57',
- '#92ff57',
- '#abff57',
- '#c4ff57',
- '#ddff57',
- '#f7ff57',
- '#ffee57',
- '#ffd557',
- '#ffbc57',
- '#ffa357',
- '#ff8957',
- '#ff7057',
- '#ff5757',
- '#b8b8b8',
- ],
- chart: {
- toolbar: {
- show: false,
- },
- id: 'grade-distribution',
- },
- grid: {
- yaxis: {
- lines: {
- show: false,
- },
- },
- },
- xaxis: {
- categories: [
- 'A+',
- 'A',
- 'A-',
- 'B+',
- 'B',
- 'B-',
- 'C+',
- 'C',
- 'C-',
- 'D+',
- 'D',
- 'D-',
- 'F',
- 'W',
- ],
- },
- yaxis: {
- labels: {
- formatter: (value) => Number(value).toFixed(0) + '%',
- },
- },
-};
-
-/** Apex styling options for the profile grade distribution chart */
-export const ratingsChartOptions: ApexOptions = {
- dataLabels: {
- enabled: false,
- },
- chart: {
- toolbar: {
- show: false,
- },
- id: 'ratings-distribution',
- },
- noData: {
- text: 'RMP data unavailable for professor',
- align: 'center',
- verticalAlign: 'middle',
- },
- grid: {
- padding: {
- bottom: -95,
- },
- },
- plotOptions: {
- pie: {
- startAngle: -90,
- endAngle: 90,
- offsetY: 10,
- },
- },
- colors: ['#5ae630', '#91e630', '#e6d230', '#ffa357', '#ff5757'],
- labels: ['5', '4', '3', '2', '1'],
-};
-
-export const miniGradeChartOptions: ApexOptions = {
- plotOptions: {
- bar: {
- distributed: true,
- },
- },
- noData: {
- text: 'Grade data unavailable for professor',
- align: 'center',
- verticalAlign: 'middle',
- },
- dataLabels: {
- enabled: false,
- },
- legend: {
- show: false,
- },
- colors: [
- '#79ff57',
- '#92ff57',
- '#abff57',
- '#c4ff57',
- '#ddff57',
- '#f7ff57',
- '#ffee57',
- '#ffd557',
- '#ffbc57',
- '#ffa357',
- '#ff8957',
- '#ff7057',
- '#ff5757',
- '#b8b8b8',
- ],
- chart: {
- toolbar: {
- show: false,
- },
- id: 'grade-distribution',
- },
- grid: {
- padding: {
- top: -20,
- },
- yaxis: {
- lines: {
- show: false,
- },
- },
- },
- xaxis: {
- categories: [
- 'A+',
- 'A',
- 'A-',
- 'B+',
- 'B',
- 'B-',
- 'C+',
- 'C',
- 'C-',
- 'D+',
- 'D',
- 'D-',
- 'F',
- 'W',
- ],
- },
- yaxis: {
- show: false,
- labels: {
- formatter: (value) => Number(value).toFixed(0) + '%',
- },
- },
-};
diff --git a/tailwind.config.js b/tailwind.config.js
index 0a84276..847e8ec 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,16 +1,43 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ['./**/*.tsx'],
+ important: true,
+ content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
- colors: {
- 'blue-dark': '#1C2A6D',
- 'blue-dark-hover': '#17235C',
- gray: '#D9D9D9',
- 'gray-light': '#EFEFEF',
- 'gray-dark': '#9B9B9B',
- white: '#FFFFFF',
- 'purple-dark': '#939FDB',
- 'purple-light': '#D0D3EA',
+ extend: {
+ colors: {
+ haiti: '#090b2c', // brand black
+ persimmon: {
+ 50: '#ffe5de',
+ 100: '#ffcabd',
+ 200: '#ffb09d',
+ 300: '#ff947e',
+ 400: '#ff7760',
+ 500: '#ff5743', // brand accent, danger
+ 600: '#d14a39',
+ 700: '#a43d2e',
+ 800: '#793025',
+ 900: '#51231b',
+ },
+ royal: '#573dff', // brand secondary (dark)
+ royalDark: '#3c2ab2',
+ cornflower: {
+ 50: '#eae4ff',
+ 100: '#d3caff', // ~periwinkle
+ 200: '#bcb0fe',
+ 300: '#a297fd',
+ 400: '#857efc',
+ 500: '#6266fa', // brand primary
+ 600: '#5455cc',
+ 700: '#45449f', // ~royal
+ 800: '#363475',
+ 900: '#28254d',
+ },
+ periwinkle: '#c2c8ff', // brand secondary (light)
+ shade: '#101828', // drop shadow color from shipfaster ui
+ },
+ fontFamily: {
+ kallisto: ['Kallisto', 'Roboto', 'sans-serif'],
+ },
},
fontFamily: {
main: ['Inter', 'sans-serif'],
diff --git a/tsconfig.json b/tsconfig.json
index 80fdeb1..756338a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
{
"extends": "plasmo/templates/tsconfig.base",
- "exclude": ["node_modules"],
+ "exclude": ["node_modules", ".plasmo"],
"include": [".plasmo/index.d.ts", ".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
"compilerOptions": {
"paths": {
+ {searchQueryLabel(course)} +
+ {grades.state === 'done' && ( ++ {'Overall grade: ' + grades.data.letter_grade} +
+ )} + { - return ( -
-
- );
-};
diff --git a/src/components/HorizontalScores.tsx b/src/components/HorizontalScores.tsx
deleted file mode 100644
index 29a33da..0000000
--- a/src/components/HorizontalScores.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-
-import { getScoreColor } from '~utils/styling';
-
-interface Scores {
- rmpScore: number;
- diffScore: number;
- wtaPercent: number;
-}
-
-export const HorizontalScores = ({
- rmpScore,
- diffScore,
- wtaPercent,
-}: Scores) => {
- return (
-
- 
-
-
- Powered by Nebula Labs
- -
-
- );
-};
diff --git a/src/components/Landing.tsx b/src/components/Landing.tsx
index f946e11..f636cb9 100644
--- a/src/components/Landing.tsx
+++ b/src/components/Landing.tsx
@@ -1,53 +1,163 @@
-import skedgeLogo from 'data-base64:../../assets/icon.png';
-import React from 'react';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { Button, IconButton } from '@mui/material';
+import { Storage } from '@plasmohq/storage';
+import gradient from 'data-base64:../../assets/gradient.png';
+import tutorial1 from 'data-base64:../../assets/tutorial1.png';
+import tutorial2 from 'data-base64:../../assets/tutorial2.png';
+import React, { useEffect, useState } from 'react';
-import { Card } from './Card';
-import { Footer } from './Footer';
+import { TRENDS_URL } from '~data/config';
-const SURVEY_URL =
- 'https://docs.google.com/forms/d/e/1FAIpQLScGIXzlYgsx1SxHYTTCwRaMNVYNRe6I67RingPRVzcT1tLwSg/viewform?usp=sf_link';
-const GALAXY_URL = 'https://www.utdallas.edu/galaxy/';
-
-export const Landing = () => {
- const navigativeToScheduler = (): void => {
- window.open(GALAXY_URL, '_blank');
- };
-
- const navigateToSurvey = (): void => {
- window.open(SURVEY_URL, '_blank');
- };
+const STORAGE_KEY = 'page';
+const ExplanatoryPage = ({
+ src,
+ title,
+ description,
+ prev,
+ next,
+}: {
+ src: string;
+ title: string;
+ description: string;
+ prev?: number;
+ next?: number;
+}) => {
return (
- - RMP -
-- DIFF -
-- WTA -
-- {rmpScore ? rmpScore.toFixed(1) : 'NA'} -
-- {diffScore ? diffScore.toFixed(1) : 'NA'} -
-- {wtaPercent ? Math.round(wtaPercent) : 'NA'}% -
-
- 
-
);
};
+
+const storage = new Storage({
+ area: 'local',
+});
+
+const Landing = () => {
+ const [page, setPage] = useState(0);
+ useEffect(() => {
+ storage.get(STORAGE_KEY).then((item) => {
+ if (typeof item !== 'undefined') {
+ setPage(Number(item));
+ } else {
+ setPage(0);
+ }
+ });
+ storage.watch({
+ [STORAGE_KEY]: (c) => {
+ setPage(c.newValue);
+ },
+ });
+ }, []);
+
+ switch (page) {
+ case 0:
+ return (
+ Welcome to sk.edge 👋
-- your registration assistant by students, for students -
-- Log into Schedule Planner and click Options on a course - to get started! -
-- Got feedback? Let us know{' '} - - ! -
-
+ 
+
+ );
+ case 1:
+ return (
+
+
+ + POWERED BY{' '} + + NEBULA LABS + +
++ SKEDGE +
++ FROM{' '} + + UTD TRENDS + +
++ Explore and compare past grades, professor ratings, and reviews to + find the perfect class. +
+ +{professorData.name}
- {!professorData.loading && ( - - )} -
-
-
-
-
-
- );
-};
diff --git a/src/components/ProfessorOverview.tsx b/src/components/ProfessorOverview.tsx
new file mode 100644
index 0000000..785c5d2
--- /dev/null
+++ b/src/components/ProfessorOverview.tsx
@@ -0,0 +1,176 @@
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { IconButton, Skeleton } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+
+import SingleGradesInfo from '~components/SingleGradesInfo';
+import SingleProfInfo from '~components/SingleProfInfo';
+import { TRENDS_URL } from '~data/config';
+import type { RMPInterface } from '~data/fetchFromRmp';
+import fetchWithCache, {
+ cacheIndexProfessor,
+ expireTime,
+} from '~data/fetchWithCache';
+import type { GenericFetchedData, GradesType } from '~pages';
+import { type SearchQuery, searchQueryLabel } from '~utils/SearchQuery';
+
+const fallbackSrc = 'https://profiles.utdallas.edu/img/default.png';
+
+interface ProfessorInterface {
+ _id: string;
+ email: string;
+ first_name: string;
+ image_uri: string;
+ last_name: string;
+ office: {
+ building: string;
+ room: string;
+ map_uri: string;
+ };
+ //office_hours: any[];
+ phone_number: string;
+ profile_uri: string;
+ sections: string[];
+ titles: string[];
+}
+
+type ProfessorOverviewProps = {
+ professor: SearchQuery;
+ grades: GenericFetchedData- {name} -
- {score !== undefined ? ( -- {score} -
- ) : ( -- NA -
- )} -
+ setPage('list')}
+ >
+
+ {profData.state === 'loading' ? (
+ 
{
+ setSrc(fallbackSrc);
+ }}
+ />
+ )}
+
+ );
+};
+
+export default ProfessorOverview;
diff --git a/src/components/ProfileFooter.tsx b/src/components/ProfileFooter.tsx
deleted file mode 100644
index ea6c406..0000000
--- a/src/components/ProfileFooter.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-export const ProfileFooter = ({
- name,
- rmpId,
-}: {
- name: string;
- rmpId: number;
-}) => {
- return (
-
- );
-};
diff --git a/src/components/ProfileGrades.tsx b/src/components/ProfileGrades.tsx
deleted file mode 100644
index c7e2840..0000000
--- a/src/components/ProfileGrades.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import Chart from 'react-apexcharts';
-
-import { gradeChartOptions } from '~utils/styling';
-
-export interface GradeDistribution {
- name: string;
- series: ApexAxisChartSeries;
-}
-
-export const ProfileGrades = ({
- series,
- total,
-}: {
- series: GradeDistribution;
- total: number;
-}) => {
- return (
- <>
-
+ {profData.state === 'loading' && (
+ <>
+
+ + {searchQueryLabel(professor)} +
+ {profData.data.email !== '' && ( + + {profData.data.email} + + )} + + {profData.data.office.map_uri !== '' && + profData.data.office.building !== '' && + profData.data.office.room !== '' && ( ++ Office:{' '} + + + {profData.data.office.building + + ' ' + + profData.data.office.room} + + +
+ )} + {profData.data.profile_uri !== '' && ( + + Faculty Profile + + )} + + )} +- {'Grades Distribution (' + total + ')'} -
-
-
-
- );
-};
diff --git a/src/components/ProfileHeader.tsx b/src/components/ProfileHeader.tsx
deleted file mode 100644
index 1aa7e7b..0000000
--- a/src/components/ProfileHeader.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { TiArrowBack } from 'react-icons/ti';
-import { NavigateFunction, useNavigate } from 'react-router-dom';
-
-import type { ProfessorProfileInterface } from '~data/builder';
-
-export const ProfileHeader = ({
- name,
- profilePicUrl,
- profiles,
-}: {
- name: string;
- profilePicUrl: string;
- profiles: ProfessorProfileInterface[];
-}) => {
- const navigation: NavigateFunction = useNavigate();
-
- const returnToSections = (): void => {
- navigation('/', { state: profiles });
- };
-
- return (
-
-
-
- - {name.split(' ').at(0) + ' ' + name.split(' ').at(-1)} -
-
- 
-
-
-
-
-
- );
-};
diff --git a/src/components/RmpTag.tsx b/src/components/RmpTag.tsx
deleted file mode 100644
index ea4bd4a..0000000
--- a/src/components/RmpTag.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-interface Props {
- text: string;
-}
-
-export const RmpTag = ({ text }: Props) => {
- return (
- - {'Ratings Distribution (' + total + ')'} -
-
-
- - {text} -
- ); -}; diff --git a/src/components/SearchResultsTable.tsx b/src/components/SearchResultsTable.tsx new file mode 100644 index 0000000..775987e --- /dev/null +++ b/src/components/SearchResultsTable.tsx @@ -0,0 +1,374 @@ +import KeyboardArrowIcon from '@mui/icons-material/KeyboardArrowRight'; +import PersonIcon from '@mui/icons-material/Person'; +import { + Badge, + Collapse, + IconButton, + Paper, + Skeleton, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Tooltip, + Typography, +} from '@mui/material'; +import React, { useState } from 'react'; + +import Rating from '~components/Rating'; +import SingleGradesInfo from '~components/SingleGradesInfo'; +import SingleProfInfo from '~components/SingleProfInfo'; +import TableSortLabel from '~components/TableSortLabel'; +import type { RMPInterface } from '~data/fetchFromRmp'; +import type { GenericFetchedData, GradesType } from '~pages'; +import { useRainbowColors } from '~utils/colors'; +import { + convertToCourseOnly, + convertToProfOnly, + type SearchQuery, + searchQueryLabel, +} from '~utils/SearchQuery'; + +type RowProps = { + course: SearchQuery; + grades: GenericFetchedData
+ *
+
+
+
+
+
+
+
+ );
+ }
+
+ const percents = convertNumbersToPercents(grades.data);
+
+ let trendsLink = TRENDS_URL + 'dashboard?searchTerms=';
+ const courseOnly = convertToCourseOnly(course);
+ const profOnly = convertToProfOnly(course);
+ const courseValid = Object.keys(courseOnly).length !== 0;
+ const profValid = Object.keys(profOnly).length !== 0;
+ if (courseValid) {
+ trendsLink += encodeURIComponent(searchQueryLabel(courseOnly));
+ }
+ if (courseValid && profValid) {
+ trendsLink += encodeURIComponent(',');
+ }
+ if (profValid) {
+ trendsLink += encodeURIComponent(searchQueryLabel(profOnly));
+ }
+
+ return (
+
+
+
+ Grades:
+ GPA:
+
+ );
+}
+
+export default SingleGradesInfo;
diff --git a/src/components/SingleProfInfo.tsx b/src/components/SingleProfInfo.tsx
new file mode 100644
index 0000000..b6eef84
--- /dev/null
+++ b/src/components/SingleProfInfo.tsx
@@ -0,0 +1,83 @@
+import { Grid, Skeleton } from '@mui/material';
+import React from 'react';
+
+import type { RMPInterface } from '~data/fetchFromRmp';
+import type { GenericFetchedData } from '~pages';
+
+type Props = {
+ rmp: GenericFetchedData
+ Number(value).toFixed(0).toLocaleString()}
+ tooltipFormatter={(value, { dataPointIndex }) =>
+ Number(value).toFixed(0).toLocaleString() +
+ ' (' +
+ percents[dataPointIndex].toFixed(2) +
+ '%)'
+ }
+ series={[
+ {
+ name: searchQueryLabel(course),
+ data: grades.data.grade_distribution,
+ },
+ ]}
+ />
+
+
+
+
+ + Grades: {grades.data.total.toLocaleString()} +
++ GPA:{' '} + {grades.data.gpa === -1 ? 'None' : grades.data.gpa.toFixed(3)} +
+
+
Professor rating
+
+
Difficulty
+
+
Ratings given
+
+
Would take again
+{rmp.data.avgRating}
+Professor rating
+{rmp.data.avgDifficulty}
+Difficulty
++ {rmp.data.numRatings.toLocaleString()} +
+Ratings given
++ {rmp.data.wouldTakeAgainPercent.toFixed(0) + '%'} +
+Would take again
+
- {onCoursebook &&
- profiles.map((item, index) => (
-
- );
-};
diff --git a/src/pages/ProfessorProfile.tsx b/src/pages/ProfessorProfile.tsx
deleted file mode 100644
index c3466ba..0000000
--- a/src/pages/ProfessorProfile.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { Card } from '~components/Card';
-import { HorizontalScores } from '~components/HorizontalScores';
-import { ProfileFooter } from '~components/ProfileFooter';
-import { ProfileGrades } from '~components/ProfileGrades';
-import { ProfileHeader } from '~components/ProfileHeader';
-import { RmpRatings } from '~components/RmpRatings';
-import { RmpTag } from '~components/RmpTag';
-import type { ProfessorProfileInterface } from '~data/builder';
-
-export const ProfessorProfile = () => {
- const {
- state,
- }: {
- state: {
- professorData: ProfessorProfileInterface;
- profiles: ProfessorProfileInterface[];
- };
- } = useLocation();
- const { professorData, profiles } = state;
-
- const compareArrays = (a, b) => {
- return JSON.stringify(a) === JSON.stringify(b);
- };
-
- return (
-
-
- ))}
- {!onCoursebook &&
-
- {/* spacer */}
-
-
- );
-};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1e4f1be..d4d2764 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,12 +1,348 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
-
-import { CoursePage } from './CoursePage';
-import { ProfessorProfile } from './ProfessorProfile';
-
-export const Routing = () => (
-
- {' '}
- {/* RMP Tag area */}
- {professorData.rmpTags
- ?.slice(0, 5)
- .map((item: string, index: number) => (
-
- {professorData.ratingsDistribution.length > 0 &&
- !compareArrays(
- professorData.ratingsDistribution,
- Array(5).fill(0),
- ) && (
-
+ {page === 'landing' &&
+ );
+};
+
+export default Index;
diff --git a/src/popup.tsx b/src/popup.tsx
index 5e89f67..ffdcef3 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -1,15 +1,64 @@
import '~/style.css';
+import { useMediaQuery } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import resolveConfig from 'tailwindcss/resolveConfig';
-import { Routing } from '~/pages';
+import Index from '~/pages';
+import { neededOrigins } from '~data/config';
+
+import tailwindConfig from '../tailwind.config.js';
+
+const realBrowser = process.env.PLASMO_BROWSER === 'chrome' ? chrome : browser;
+async function checkPermissions() {
+ const currentPermissions: { origins?: string[] } =
+ await realBrowser.permissions.getAll();
+ if (
+ typeof currentPermissions.origins === 'undefined' ||
+ neededOrigins.filter(
+ (origin) => !currentPermissions.origins.includes(origin),
+ ).length !== 0
+ ) {
+ const popupURL = await realBrowser.runtime.getURL('tabs/permissions.html');
+ realBrowser.windows.create({
+ url: popupURL,
+ type: 'popup',
+ width: 400,
+ height: 600,
+ });
+ }
+}
+checkPermissions();
+
+const fullConfig = resolveConfig(tailwindConfig);
function IndexPopup() {
+ const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+ const muiTheme = createTheme({
+ palette: {
+ mode: prefersDarkMode ? 'dark' : 'light',
+ //copied from tailwind.config.js
+ primary: {
+ main: fullConfig.theme.colors.royal,
+ },
+ secondary: {
+ main: fullConfig.theme.colors.royal,
+ light: fullConfig.theme.colors.periwinkle,
+ },
+ error: {
+ main: fullConfig.theme.colors.persimmon['500'],
+ },
+ },
+ typography: {
+ fontFamily: 'inherit',
+ },
+ });
+
return (
-
+
+ {page !== 'list' && (
+
+
+
+
+ )}
+
+ )}
+
+
+ );
+}
+export default PermissionsPls;
diff --git a/src/utils/SearchQuery.tsx b/src/utils/SearchQuery.tsx
new file mode 100644
index 0000000..6bdbb12
--- /dev/null
+++ b/src/utils/SearchQuery.tsx
@@ -0,0 +1,76 @@
+export type SearchQuery = {
+ prefix?: string;
+ number?: string;
+ profFirst?: string;
+ profLast?: string;
+};
+
+export type Professor = {
+ profFirst: string;
+ profLast: string;
+};
+
+export type Course = {
+ prefix: string;
+ number: string;
+};
+
+export function convertToProfOnly(
+ searchQuery: SearchQuery,
+): Professor | RecordSkedge needs permissions to run
++ We need access to Schedule Planner and the sources we get our data from. +
++ Please click the button below to grant permissions. +
+ + {granted && ( +
+ Thank you!
+
You can close this window now.
+