diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..2991d05
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,8 @@
+.cache
+.husky
+.plasmo
+.vscode
+package-lock.json
+pnpm-lock.yaml
+build
+assets
diff --git a/.github/workflows/lint-check.yml b/.github/workflows/lint-check.yml
new file mode 100644
index 0000000..b84a529
--- /dev/null
+++ b/.github/workflows/lint-check.yml
@@ -0,0 +1,26 @@
+name: Lint and Formatting Check
+
+on: push
+
+jobs:
+ main:
+ name: Run ESLint + Prettier
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Check out Git repository
+ uses: actions/checkout@v3
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: '18'
+
+ - name: Install Next for ESLint and Prettier
+ run: npm install next prettier
+
+ - name: Run ESLint
+ run: npm run lint:check
+
+ - name: Run Prettier
+ run: npm run format:check
diff --git a/.github/workflows/submit.yml b/.github/workflows/submit.yml
index b82c91d..3f20013 100644
--- a/.github/workflows/submit.yml
+++ b/.github/workflows/submit.yml
@@ -1,4 +1,4 @@
-name: "Submit to Web Store"
+name: 'Submit to Web Store'
on:
workflow_dispatch:
@@ -22,7 +22,7 @@ jobs:
uses: actions/setup-node@v3.4.1
with:
node-version: 16.x
- cache: "pnpm"
+ cache: 'pnpm'
- name: Build and zip extension artifact
run: pnpm package
- name: Browser Platform Publish
diff --git a/.gitignore b/.gitignore
index a08786b..71b2dcd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,7 @@ keys.json
# typescript
.tsbuildinfo
+
+# lint cache
+.eslintcache
+*.cache
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000..d24fdfc
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..976762f
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,10 @@
+.cache
+.husky
+.next
+.plasmo
+.vscode
+package.json
+package-lock.json
+pnpm-lock.yaml
+build
+assets
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
deleted file mode 100644
index ee0bf6b..0000000
--- a/.prettierrc.cjs
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @type {import('prettier').Options}
- */
-module.exports = {
- printWidth: 80,
- tabWidth: 2,
- useTabs: false,
- semi: false,
- singleQuote: false,
- trailingComma: "none",
- bracketSpacing: true,
- bracketSameLine: true,
- plugins: [require.resolve("@plasmohq/prettier-plugin-sort-imports")],
- importOrder: ["^@plasmohq/(.*)$", "^~(.*)$", "^[./]"],
- importOrderSeparation: true,
- importOrderSortSpecifiers: true
-}
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..ecb3d9c
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+ printWidth: 80,
+ semi: true,
+ singleQuote: true,
+ tabWidth: 2,
+ trailingComma: 'all',
+ useTabs: false,
+};
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..4f11a03
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+///
- {children}
-
- )
-}
\ No newline at end of file
+import React from 'react';
+
+interface Props {
+ children: React.ReactNode;
+}
+
+export const Card = ({ children }: Props) => {
+ return {children}
;
+};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 8aa3f36..13b305c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,17 +1,24 @@
-import nebulaLogo from "data-base64:../../assets/nebula-logo.svg"
+import nebulaLogo from 'data-base64:../../assets/nebula-logo.svg';
+import React from 'react';
export const Footer = () => {
-
- const navigateToNebula = (): void => {
- window.open("https://www.utdnebula.com/", "_blank")
- }
-
return (
Powered by Nebula Labs
-
+
+
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/HorizontalScores.tsx b/src/components/HorizontalScores.tsx
index 3b4cd59..adc8764 100644
--- a/src/components/HorizontalScores.tsx
+++ b/src/components/HorizontalScores.tsx
@@ -1,4 +1,6 @@
-import { getScoreColor } from "~utils/styling";
+import React from 'react';
+
+import { getScoreColor } from '~utils/styling';
interface Scores {
rmpScore: number;
@@ -6,15 +8,38 @@ interface Scores {
wtaPercent: number;
}
-export const HorizontalScores = ({ rmpScore, diffScore, wtaPercent } : Scores) => {
+export const HorizontalScores = ({
+ rmpScore,
+ diffScore,
+ wtaPercent,
+}: Scores) => {
return (
-
RMP
+
+ RMP
+
DIFF
- WTA
- {rmpScore ? rmpScore.toFixed(1) : "NA"}
- {diffScore ? diffScore.toFixed(1) : "NA"}
- {wtaPercent ? Math.round(wtaPercent) : "NA"}%
+
+ WTA
+
+
+ {rmpScore ? rmpScore.toFixed(1) : 'NA'}
+
+
+ {diffScore ? diffScore.toFixed(1) : 'NA'}
+
+
+ {wtaPercent ? Math.round(wtaPercent) : 'NA'}%
+
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/Landing.tsx b/src/components/Landing.tsx
index a1f72b6..f946e11 100644
--- a/src/components/Landing.tsx
+++ b/src/components/Landing.tsx
@@ -1,33 +1,53 @@
-import { Card } from "./Card"
-import { Footer } from "./Footer"
-import skedgeLogo from "data-base64:../../assets/icon.png"
+import skedgeLogo from 'data-base64:../../assets/icon.png';
+import React from 'react';
-const SURVEY_URL = "https://docs.google.com/forms/d/e/1FAIpQLScGIXzlYgsx1SxHYTTCwRaMNVYNRe6I67RingPRVzcT1tLwSg/viewform?usp=sf_link"
-const GALAXY_URL = "https://www.utdallas.edu/galaxy/"
+import { Card } from './Card';
+import { Footer } from './Footer';
-export const Landing = () => {
+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")
- }
+ window.open(GALAXY_URL, '_blank');
+ };
const navigateToSurvey = (): void => {
- window.open(SURVEY_URL, "_blank")
- }
+ window.open(SURVEY_URL, '_blank');
+ };
- return(
+ 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 here !
-
+
+ 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{' '}
+
+ here
+
+ !
+
+
To Galaxy!
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/LinkButton.tsx b/src/components/LinkButton.tsx
index 9050d55..63fbd97 100644
--- a/src/components/LinkButton.tsx
+++ b/src/components/LinkButton.tsx
@@ -1,8 +1,6 @@
+import React from 'react';
+
// left as an exercise for the reader
export const LinkButton = () => {
- return (
-
-
-
- )
-}
\ No newline at end of file
+ return
;
+};
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index ac9d8c3..7fac997 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,9 +1,10 @@
-import { Rings } from "react-loader-spinner"
+import React from 'react';
+import { Rings } from 'react-loader-spinner';
export const Loading = () => {
return (
- {
ariaLabel="rings-loading"
/>
- )
-}
+ );
+};
diff --git a/src/components/MiniGrades.tsx b/src/components/MiniGrades.tsx
index 832d707..236ab1b 100644
--- a/src/components/MiniGrades.tsx
+++ b/src/components/MiniGrades.tsx
@@ -1,14 +1,25 @@
-import { useState } from "react";
-import Chart from "react-apexcharts"
-import { miniGradeChartOptions } from "~utils/styling";
-import type { GradeDistribution } from "./ProfileGrades"
+import React from 'react';
+import Chart from 'react-apexcharts';
-export const MiniGrades = ({ gradeDistributionData } : { gradeDistributionData: GradeDistribution }) => {
- const config = JSON.parse(JSON.stringify(miniGradeChartOptions))
+import { miniGradeChartOptions } from '~utils/styling';
+
+import type { GradeDistribution } from './ProfileGrades';
+
+export const MiniGrades = ({
+ gradeDistributionData,
+}: {
+ gradeDistributionData: GradeDistribution;
+}) => {
+ const config = JSON.parse(JSON.stringify(miniGradeChartOptions));
config.title.text = gradeDistributionData.name;
return (
<>
-
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/MiniScore.tsx b/src/components/MiniScore.tsx
index 9f8d40b..0485cd3 100644
--- a/src/components/MiniScore.tsx
+++ b/src/components/MiniScore.tsx
@@ -1,18 +1,41 @@
-import { getScoreColor } from "~utils/styling";
+import React from 'react';
+
+import { getScoreColor } from '~utils/styling';
interface MiniScoreProps {
- name: "RMP" | "DIFF" | "WTA";
+ name: 'RMP' | 'DIFF' | 'WTA';
score: number;
maxScore: number;
inverted: boolean;
}
-export const MiniScore = ({ name, score, maxScore, inverted } : MiniScoreProps) => {
-
- return(
+export const MiniScore = ({
+ name,
+ score,
+ maxScore,
+ inverted,
+}: MiniScoreProps) => {
+ return (
-
{name}
- {score !== undefined && {name === "WTA" ? Math.round(score) : score.toFixed(1)} }
- {score === undefined && NA }
+
+ {name}
+
+ {score !== undefined && (
+
+ {name === 'WTA' ? Math.round(score) : score.toFixed(1)}
+
+ )}
+ {score === undefined && (
+
+ NA
+
+ )}
- )}
\ No newline at end of file
+ );
+};
diff --git a/src/components/ProfileGrades.tsx b/src/components/ProfileGrades.tsx
index 007193f..786c19f 100644
--- a/src/components/ProfileGrades.tsx
+++ b/src/components/ProfileGrades.tsx
@@ -1,42 +1,64 @@
-import Chart from "react-apexcharts"
-import { useState } from "react"
-import { AiFillCaretLeft, AiFillCaretRight } from "react-icons/ai"
-import { gradeChartOptions } from "~utils/styling";
+import React, { useState } from 'react';
+import Chart from 'react-apexcharts';
+import { AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai';
+
+import { gradeChartOptions } from '~utils/styling';
export interface GradeDistribution {
name: string;
series: ApexAxisChartSeries;
}
-export const ProfileGrades = ({ gradeDistributionData } : { gradeDistributionData: GradeDistribution[] }) => {
+export const ProfileGrades = ({
+ gradeDistributionData,
+}: {
+ gradeDistributionData: GradeDistribution[];
+}) => {
const [page, setPage] = useState(0);
const prevPage = () => {
if (page === 0) {
- setPage(gradeDistributionData.length - 1)
+ setPage(gradeDistributionData.length - 1);
} else {
- setPage(page - 1)
+ setPage(page - 1);
}
- }
+ };
const nextPage = () => {
if (page === gradeDistributionData.length - 1) {
- setPage(0)
+ setPage(0);
} else {
- setPage(page + 1)
+ setPage(page + 1);
}
- }
+ };
return (
<>
- {gradeDistributionData[page].name}
-
+
+
+ {gradeDistributionData[page].name}
+
+
+
-
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/ProfileHeader.tsx b/src/components/ProfileHeader.tsx
index 2ee6622..0a97bf4 100644
--- a/src/components/ProfileHeader.tsx
+++ b/src/components/ProfileHeader.tsx
@@ -1,33 +1,72 @@
-import { TiArrowBack } from "react-icons/ti"
-import { FaExternalLinkAlt } from "react-icons/fa"
-import { NavigateFunction, useNavigate } from "react-router-dom"
-import type { ProfessorProfileInterface } from "~data/builder";
+import React from 'react';
+import { FaExternalLinkAlt } from 'react-icons/fa';
+import { TiArrowBack } from 'react-icons/ti';
+import { NavigateFunction, useNavigate } from 'react-router-dom';
-export const ProfileHeader = ({ name, profilePicUrl, rmpId, profiles } : { name: string, profilePicUrl: string, rmpId: number, profiles: ProfessorProfileInterface[] }) => {
+import type { ProfessorProfileInterface } from '~data/builder';
+
+export const ProfileHeader = ({
+ name,
+ profilePicUrl,
+ rmpId,
+ profiles,
+}: {
+ name: string;
+ profilePicUrl: string;
+ rmpId: number;
+ profiles: ProfessorProfileInterface[];
+}) => {
const navigation: NavigateFunction = useNavigate();
const returnToSections = (): void => {
- navigation("/", { state: profiles })
- }
+ navigation('/', { state: profiles });
+ };
const navigativeToRmp = (): void => {
- window.open('https://www.ratemyprofessors.com/professor/' + rmpId, '_blank')
- }
+ window.open(
+ 'https://www.ratemyprofessors.com/professor/' + rmpId,
+ '_blank',
+ );
+ };
return (
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/RmpRatings.tsx b/src/components/RmpRatings.tsx
index 13b1ff9..ae2b1aa 100644
--- a/src/components/RmpRatings.tsx
+++ b/src/components/RmpRatings.tsx
@@ -1,15 +1,28 @@
-import Chart from "react-apexcharts"
-import { ratingsChartOptions } from "~utils/styling";
+import React from 'react';
+import Chart from 'react-apexcharts';
-export const RmpRatings = ({ ratingsDistributionData } : { ratingsDistributionData: number[] }) => {
+import { ratingsChartOptions } from '~utils/styling';
+
+export const RmpRatings = ({
+ ratingsDistributionData,
+}: {
+ ratingsDistributionData: number[];
+}) => {
return (
- Ratings Distribution
+
+ Ratings Distribution
+
-
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/RmpTag.tsx b/src/components/RmpTag.tsx
index b1c8c17..ea4bd4a 100644
--- a/src/components/RmpTag.tsx
+++ b/src/components/RmpTag.tsx
@@ -1,5 +1,13 @@
-export const RmpTag = ({ text }) => {
+import React from 'react';
+
+interface Props {
+ text: string;
+}
+
+export const RmpTag = ({ text }: Props) => {
return (
- {text}
- )
-}
\ No newline at end of file
+
+ {text}
+
+ );
+};
diff --git a/src/content.ts b/src/content.ts
index cd27a0f..25e0e78 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -5,8 +5,8 @@ export interface CourseHeader {
// Plasmo CS config export
export const config = {
- matches: ["https://utdallas.collegescheduler.com/terms/*/courses/*"]
-}
+ matches: ['https://utdallas.collegescheduler.com/terms/*/courses/*'],
+};
/**
* This script runs when we select a course in the Scheduler
@@ -15,13 +15,15 @@ export const config = {
* - It injects the instructor names into the section table
*/
export async function scrapeCourseData() {
-
- let [ header, professors ] = await Promise.all([getCourseInfo(), injectAndGetProfessorNames()]);
+ const [header, professors] = await Promise.all([
+ getCourseInfo(),
+ injectAndGetProfessorNames(),
+ ]);
return { header: header, professors: professors };
-
+
/** Gets the first element from the DOM specified by selector */
function waitForElement(selector: string): Promise {
- return new Promise(resolve => {
+ return new Promise((resolve) => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
@@ -33,57 +35,59 @@ export async function scrapeCourseData() {
});
observer.observe(document.body, {
childList: true,
- subtree: true
+ subtree: true,
});
});
}
-
+
/** Gets the course prefix and number from the course page */
async function getCourseInfo(): Promise {
const course = await waitForElement('h1');
- const courseData = course.innerText.split(" ");
+ const courseData = course.innerText.split(' ');
return { subjectPrefix: courseData[0], courseNumber: courseData[1] };
}
-
+
/** Gets all professor names and then injects them into the section table */
async function injectAndGetProfessorNames(): Promise {
- const courseTable = await waitForElement('table')
+ const courseTable = await waitForElement('table');
const professors: string[] = [];
const courseRows = courseTable.querySelectorAll('tbody');
-
+
// add Professor header to the table
const tableHeaders = courseTable.querySelector('thead > tr');
const newHeader = document.createElement('th');
newHeader.innerText = 'Instructor(s)';
tableHeaders.insertBefore(newHeader, tableHeaders.children[7]);
-
- courseRows.forEach(courseRow => {
+
+ courseRows.forEach((courseRow) => {
// get professor name from course row
- const sectionDetailsButton = courseRow.querySelector('tr > td > button');
+ const sectionDetailsButton =
+ courseRow.querySelector('tr > td > button');
// expand section details to load the details
sectionDetailsButton.click();
const sectionDetails = courseRow.querySelector('tr:nth-child(2)');
const sectionDetailsList = sectionDetails.querySelectorAll('li');
let professor = '';
- sectionDetailsList.forEach(li => {
- const detailLabelText = li.querySelector('strong > span').innerText;
+ sectionDetailsList.forEach((li) => {
+ const detailLabelText =
+ li.querySelector('strong > span').innerText;
if (detailLabelText.includes('Instructor')) {
- professor = li.innerText.split(":")[1].trim();
+ professor = li.innerText.split(':')[1].trim();
}
});
// append professor name to the table
const newTd = document.createElement('td');
newTd.innerText = professor;
// this is in case we have multiple instructions per section
- const sectionProfessors = professor.split(",")
- sectionProfessors.forEach(sectionProfessor => {
+ const sectionProfessors = professor.split(',');
+ sectionProfessors.forEach((sectionProfessor) => {
professors.push(sectionProfessor.trim());
- })
+ });
const courseRowCells = courseRow.querySelector('tr');
courseRowCells.insertBefore(newTd, courseRowCells.children[7]);
// collapse section details
sectionDetailsButton.click();
});
- return [... new Set(professors)];
- };
-}
\ No newline at end of file
+ return [...new Set(professors)];
+ }
+}
diff --git a/src/data/builder.ts b/src/data/builder.ts
index 974367f..4548de5 100644
--- a/src/data/builder.ts
+++ b/src/data/builder.ts
@@ -1,7 +1,12 @@
-import type { ShowCourseTabPayload } from "~background";
-import { fetchNebulaCourse, fetchNebulaProfessor, fetchNebulaSections } from "./fetch";
-import { requestProfessorsFromRmp } from "~data/fetchFromRmp";
-import { SCHOOL_ID } from "./config";
+import type { ShowCourseTabPayload } from '~background';
+import { requestProfessorsFromRmp } from '~data/fetchFromRmp';
+
+import { SCHOOL_ID } from './config';
+import {
+ fetchNebulaCourse,
+ fetchNebulaProfessor,
+ fetchNebulaSections,
+} from './fetch';
export interface ProfessorProfileInterface {
name: string;
@@ -24,39 +29,82 @@ const compareArrays = (a, b) => {
return JSON.stringify(a) === JSON.stringify(b);
};
-export async function buildProfessorProfiles (payload: ShowCourseTabPayload) {
+export async function buildProfessorProfiles(payload: ShowCourseTabPayload) {
const { header, professors } = payload;
- const nebulaCourse = await fetchNebulaCourse(header)
- const nebulaProfessors = await Promise.all(professors.map(professor => {
- const nameArray = professor.split(' ')
- const firstName = nameArray[0]
- const lastName = nameArray[nameArray.length - 1]
- return fetchNebulaProfessor({ firstName: firstName, lastName: lastName})
- }))
- const nebulaSections = await Promise.all(nebulaProfessors.map(professor => {
- if (professor?._id === undefined || !nebulaCourse) return null
- return fetchNebulaSections({ courseReference: nebulaCourse._id, professorReference: professor._id })
- }))
- const rmps = await requestProfessorsFromRmp({ professorNames: professors.map(prof => prof.split(' ')[0] + " " + prof.split(' ').at(-1)), schoolId: SCHOOL_ID })
- let professorProfiles: ProfessorProfileInterface[] = []
+ const nebulaCourse = await fetchNebulaCourse(header);
+ const nebulaProfessors = await Promise.all(
+ professors.map((professor) => {
+ const nameArray = professor.split(' ');
+ const firstName = nameArray[0];
+ const lastName = nameArray[nameArray.length - 1];
+ return fetchNebulaProfessor({ firstName: firstName, lastName: lastName });
+ }),
+ );
+ const nebulaSections = await Promise.all(
+ nebulaProfessors.map((professor) => {
+ if (professor?._id === undefined || !nebulaCourse) return null;
+ return fetchNebulaSections({
+ courseReference: nebulaCourse._id,
+ professorReference: professor._id,
+ });
+ }),
+ );
+ const rmps = await requestProfessorsFromRmp({
+ professorNames: professors.map(
+ (prof) => prof.split(' ')[0] + ' ' + prof.split(' ').at(-1),
+ ),
+ schoolId: SCHOOL_ID,
+ });
+ const professorProfiles: ProfessorProfileInterface[] = [];
for (let i = 0; i < professors.length; i++) {
- const sectionsWithGrades = []
+ const sectionsWithGrades = [];
for (let j = 0; j < nebulaSections[i]?.length; j++) {
const section = nebulaSections[i][j];
- if (section.grade_distribution && section.grade_distribution.length !== 0 && !compareArrays(section.grade_distribution, Array(14).fill(0)))
- sectionsWithGrades.push(section)
+ if (
+ section.grade_distribution &&
+ section.grade_distribution.length !== 0 &&
+ !compareArrays(section.grade_distribution, Array(14).fill(0))
+ )
+ sectionsWithGrades.push(section);
}
professorProfiles.push({
name: professors[i],
profilePicUrl: nebulaProfessors[i]?.image_uri,
rmpId: rmps[i]?.legacyId,
- rmpScore: rmps[i]?.avgRating ? (rmps[i]?.avgRating === 0 ? undefined : rmps[i]?.avgRating) : undefined,
- diffScore: rmps[i]?.avgDifficulty ? (rmps[i].avgDifficulty === 0 ? undefined : rmps[i]?.avgDifficulty) : undefined,
- wtaScore: rmps[i]?.wouldTakeAgainPercent ? (rmps[i]?.wouldTakeAgainPercent === -1 ? undefined : rmps[i]?.wouldTakeAgainPercent) : undefined,
- rmpTags: rmps[i]?.teacherRatingTags.sort((a, b) => a.tagCount - b.tagCount).map(tag => tag.tagName),
- gradeDistributions: sectionsWithGrades.length > 0 ? sectionsWithGrades.map(section => ({ name: [nebulaCourse.subject_prefix, nebulaCourse.course_number, section.section_number, section.academic_session.name].join(' '), series: [{name: "Students", data: section.grade_distribution}] })) : [{name: "No Data", series: [{name: "Students", data: []}]}],
- ratingsDistribution: rmps[i] ? Object.values(rmps[i].ratingsDistribution).reverse().slice(1) : []
- })
+ rmpScore: rmps[i]?.avgRating
+ ? rmps[i]?.avgRating === 0
+ ? undefined
+ : rmps[i]?.avgRating
+ : undefined,
+ diffScore: rmps[i]?.avgDifficulty
+ ? rmps[i].avgDifficulty === 0
+ ? undefined
+ : rmps[i]?.avgDifficulty
+ : undefined,
+ wtaScore: rmps[i]?.wouldTakeAgainPercent
+ ? rmps[i]?.wouldTakeAgainPercent === -1
+ ? undefined
+ : rmps[i]?.wouldTakeAgainPercent
+ : undefined,
+ rmpTags: rmps[i]?.teacherRatingTags
+ .sort((a, b) => a.tagCount - b.tagCount)
+ .map((tag) => tag.tagName),
+ gradeDistributions:
+ sectionsWithGrades.length > 0
+ ? sectionsWithGrades.map((section) => ({
+ name: [
+ nebulaCourse.subject_prefix,
+ nebulaCourse.course_number,
+ section.section_number,
+ section.academic_session.name,
+ ].join(' '),
+ series: [{ name: 'Students', data: section.grade_distribution }],
+ }))
+ : [{ name: 'No Data', series: [{ name: 'Students', data: [] }] }],
+ ratingsDistribution: rmps[i]
+ ? Object.values(rmps[i].ratingsDistribution).reverse().slice(1)
+ : [],
+ });
}
- return professorProfiles
-}
\ No newline at end of file
+ return professorProfiles;
+}
diff --git a/src/data/config.ts b/src/data/config.ts
index aa1a3fd..643e151 100644
--- a/src/data/config.ts
+++ b/src/data/config.ts
@@ -1,32 +1,33 @@
-import type { RMPRatingInterface } from "~data/interfaces";
export const HEADERS = {
- "Authorization": "Basic dGVzdDp0ZXN0",
- "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36",
- "Content-Type": "application/json"
-}
+ Authorization: 'Basic dGVzdDp0ZXN0',
+ 'User-Agent':
+ 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36',
+ 'Content-Type': 'application/json',
+};
export const PROFESSOR_QUERY = {
- "query":"query RatingsListQuery($id: ID!) {node(id: $id) {... on Teacher {legacyId school {id} courseCodes {courseName courseCount} firstName lastName numRatings avgDifficulty avgRating department wouldTakeAgainPercent teacherRatingTags { tagCount tagName } ratingsDistribution { total r1 r2 r3 r4 r5 } }}}",
- "variables": {}
-}
+ query:
+ 'query RatingsListQuery($id: ID!) {node(id: $id) {... on Teacher {legacyId school {id} courseCodes {courseName courseCount} firstName lastName numRatings avgDifficulty avgRating department wouldTakeAgainPercent teacherRatingTags { tagCount tagName } ratingsDistribution { total r1 r2 r3 r4 r5 } }}}',
+ variables: {},
+};
export const NEBULA_FETCH_OPTIONS = {
- method: "GET",
+ method: 'GET',
headers: {
- "x-api-key": unRegister("EM~eW}G<}4qx41fp{H=I]OZ5MF6T:1x{ | null {
+export async function fetchNebulaCourse(
+ params: FetchCourseParameters,
+): Promise | null {
try {
- const res = await fetch(`https://api.utdnebula.com/course?course_number=${params.courseNumber}&subject_prefix=${params.subjectPrefix}`, NEBULA_FETCH_OPTIONS);
+ const res = await fetch(
+ `https://api.utdnebula.com/course?course_number=${params.courseNumber}&subject_prefix=${params.subjectPrefix}`,
+ NEBULA_FETCH_OPTIONS,
+ );
const json = await res.json();
- if (json.data == null) throw new Error("Null data");
+ if (json.data == null) throw new Error('Null data');
const data: CourseInterface = json.data[0];
return data;
} catch (error) {
@@ -13,11 +25,16 @@ export async function fetchNebulaCourse(params: FetchCourseParameters): Promise<
}
}
-export async function fetchNebulaProfessor(params: FetchProfessorParameters): Promise | null {
+export async function fetchNebulaProfessor(
+ params: FetchProfessorParameters,
+): Promise | null {
try {
- const res = await fetch(`https://api.utdnebula.com/professor?first_name=${params.firstName}&last_name=${params.lastName}`, NEBULA_FETCH_OPTIONS);
+ const res = await fetch(
+ `https://api.utdnebula.com/professor?first_name=${params.firstName}&last_name=${params.lastName}`,
+ NEBULA_FETCH_OPTIONS,
+ );
const json = await res.json();
- if (json.data == null) throw new Error("Null data");
+ if (json.data == null) throw new Error('Null data');
const data: ProfessorInterface = json.data[0];
return data;
} catch (error) {
@@ -25,14 +42,19 @@ export async function fetchNebulaProfessor(params: FetchProfessorParameters): Pr
}
}
-export async function fetchNebulaSections(params: FetchSectionParameters): Promise | null {
+export async function fetchNebulaSections(
+ params: FetchSectionParameters,
+): Promise | null {
try {
- const res = await fetch(`https://api.utdnebula.com/section?course_reference=${params.courseReference}&professors=${params.professorReference}`, NEBULA_FETCH_OPTIONS);
+ const res = await fetch(
+ `https://api.utdnebula.com/section?course_reference=${params.courseReference}&professors=${params.professorReference}`,
+ NEBULA_FETCH_OPTIONS,
+ );
const json = await res.json();
- if(json.data == null) throw new Error("Null data");
+ if (json.data == null) throw new Error('Null data');
const data: SectionInterface[] = json.data;
return data;
- } catch(error) {
+ } catch (error) {
return null;
}
}
@@ -40,4 +62,4 @@ export async function fetchNebulaSections(params: FetchSectionParameters): Promi
// Test function. Commented out. Uncomment to test.
// console.log(await fetchNebulaCourse({courseNumber: "4337", subjectPrefix: "CS"}));
// console.log(await fetchNebulaProfessor({firstName: "Scott", lastName: "Dollinger"}));
-// console.log(await fetchNebulaSections({ courseReference: "623fedfabf28b6d88d6c7742", professorReference: "623fc346b8bc16815e8679a9" }))
\ No newline at end of file
+// console.log(await fetchNebulaSections({ courseReference: "623fedfabf28b6d88d6c7742", professorReference: "623fc346b8bc16815e8679a9" }))
diff --git a/src/data/fetchFromRmp.ts b/src/data/fetchFromRmp.ts
index 1d4e068..a6d6bbc 100644
--- a/src/data/fetchFromRmp.ts
+++ b/src/data/fetchFromRmp.ts
@@ -1,170 +1,213 @@
-import { HEADERS, PROFESSOR_QUERY, RMP_GRAPHQL_URL } from "~data/config";
-import type { RMPRatingInterface } from "~data/interfaces";
+import { HEADERS, PROFESSOR_QUERY, RMP_GRAPHQL_URL } from '~data/config';
function reportError(context, err) {
- console.error("Error in " + context + ": " + err);
+ console.error('Error in ' + context + ': ' + err);
}
function getProfessorUrl(professorName: string, schoolId: string): string {
- return `https://www.ratemyprofessors.com/search/professors/${schoolId}?q=${encodeURIComponent(professorName)}}`
+ return `https://www.ratemyprofessors.com/search/professors/${schoolId}?q=${encodeURIComponent(
+ professorName,
+ )}}`;
}
-function getProfessorUrls(professorNames: string[], schoolId: string): string[] {
- const professorUrls = []
- for (let i = 0; i < professorNames.length; i++) {
- professorUrls.push(getProfessorUrl(professorNames[i], schoolId))
- }
- return professorUrls
+function getProfessorUrls(
+ professorNames: string[],
+ schoolId: string,
+): string[] {
+ const professorUrls = [];
+ for (let i = 0; i < professorNames.length; i++) {
+ professorUrls.push(getProfessorUrl(professorNames[i], schoolId));
+ }
+ return professorUrls;
}
function getProfessorIds(texts: string[], professorNames: string[]): string[] {
- const professorIds = []
- const lowerCaseProfessorNames = professorNames.map(name => name.toLowerCase())
- texts.forEach(text => {
- let pendingMatch = null;
- const regex = /"legacyId":(\d+).*?"numRatings":(\d+).*?"firstName":"(.*?)","lastName":"(.*?)"/g;
- let allMatches: string[] = text.match(regex);
- let 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() + " ")
- let numRatings = parseInt(match[2]);
- if (lowerCaseProfessorNames.includes(match[3].split(' ')[0].toLowerCase() + " " + match[4].toLowerCase()) && numRatings >= highestNumRatings) {
- pendingMatch = match[1];
- }
- }
- }
+ const professorIds = [];
+ const lowerCaseProfessorNames = professorNames.map((name) =>
+ name.toLowerCase(),
+ );
+ texts.forEach((text) => {
+ 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 (
+ lowerCaseProfessorNames.includes(
+ match[3].split(' ')[0].toLowerCase() +
+ ' ' +
+ match[4].toLowerCase(),
+ ) &&
+ numRatings >= highestNumRatings
+ ) {
+ pendingMatch = match[1];
+ }
}
-
- professorIds.push(pendingMatch);
- })
- return professorIds
+ }
+ }
+
+ professorIds.push(pendingMatch);
+ });
+ return professorIds;
}
function getGraphQlUrlProp(professorId: string) {
- HEADERS["Referer"] = `https://www.ratemyprofessors.com/ShowRatings.jsp?tid=${professorId}`
- PROFESSOR_QUERY["variables"]["id"] = btoa(`Teacher-${professorId}`)
- return {
- method: "POST",
- headers: HEADERS,
- body: JSON.stringify(PROFESSOR_QUERY)
- }
+ HEADERS[
+ 'Referer'
+ ] = `https://www.ratemyprofessors.com/ShowRatings.jsp?tid=${professorId}`;
+ PROFESSOR_QUERY['variables']['id'] = btoa(`Teacher-${professorId}`);
+ return {
+ method: 'POST',
+ headers: HEADERS,
+ body: JSON.stringify(PROFESSOR_QUERY),
+ };
}
function getGraphQlUrlProps(professorIds: string[]) {
- const graphQlUrlProps = []
- professorIds.forEach(professorId => {
- graphQlUrlProps.push(getGraphQlUrlProp(professorId))
- })
- return graphQlUrlProps
+ const graphQlUrlProps = [];
+ professorIds.forEach((professorId) => {
+ graphQlUrlProps.push(getGraphQlUrlProp(professorId));
+ });
+ return graphQlUrlProps;
}
-function wait(delay){
- return new Promise((resolve) => setTimeout(resolve, delay));
+function wait(delay) {
+ return new Promise((resolve) => setTimeout(resolve, delay));
}
function fetchRetry(url: string, delay: number, tries: number, fetchOptions) {
- function onError(err){
- let triesLeft: number = tries - 1;
- if(!triesLeft){
- throw err;
- }
- return wait(delay).then(() => fetchRetry(url, delay, triesLeft, fetchOptions));
+ function onError(err) {
+ const triesLeft: number = tries - 1;
+ if (!triesLeft) {
+ throw err;
}
- return fetch(url,fetchOptions).catch(onError);
+ return wait(delay).then(() =>
+ fetchRetry(url, delay, triesLeft, fetchOptions),
+ );
+ }
+ return fetch(url, fetchOptions).catch(onError);
}
// If using orderedFetchOpts, make sure that it is an array and that the index of the fetch options corresponds to the index of the response in the responses array.
-async function validateResponses(responses: any[], orderedFetchOpts: any[]) {
- for (const [key, value] of Object.entries(responses)) {
- let notOk = value?.status !== 200;
- if (notOk && value && value.url) {
- let details = {
- status: value.status,
- statusText: value.statusText,
- redirected: value.redirected,
- url: value.url
- }
- reportError("validateResponses", "Status not OK for fetch request. Details are: "+JSON.stringify(details));
- let fetchOptions = orderedFetchOpts[key] || {}; // If we don't have fetch options, we just use an empty object.
- responses[key] = await fetchRetry(value?.url, 200, 3, fetchOptions);
- }
- };
- return responses;
+async function validateResponses(responses, orderedFetchOpts) {
+ for (const [key, value] of Object.entries(responses)) {
+ const notOk = value?.status !== 200;
+ if (notOk && value && value.url) {
+ const details = {
+ status: value.status,
+ statusText: value.statusText,
+ redirected: value.redirected,
+ url: value.url,
+ };
+ reportError(
+ 'validateResponses',
+ 'Status not OK for fetch request. Details are: ' +
+ JSON.stringify(details),
+ );
+ const fetchOptions = orderedFetchOpts[key] || {}; // If we don't have fetch options, we just use an empty object.
+ responses[key] = await fetchRetry(value?.url, 200, 3, fetchOptions);
+ }
+ }
+ return responses;
}
-export async function fetchWithGraphQl(graphQlUrlProps: any[]) {
- try {
- let responses = await validateResponses(await Promise.all(graphQlUrlProps.map(u=>fetch(RMP_GRAPHQL_URL, u))),graphQlUrlProps);
- // We now have all the responses. So, we consider all the responses, and collect the ratings.
- let ratings: RMPRatingInterface [] = await Promise.all(responses.map(res => res.json()));
- for (let i = 0; i < ratings.length; i++) {
- if (ratings[i] != null && ratings[i].hasOwnProperty("data") && ratings[i]["data"].hasOwnProperty("node")) {
- ratings[i] = ratings[i]["data"]["node"];
- }
- }
- return ratings;
- }
- catch (err) {
- reportError("fetchWithGraphQl",err);
- return [];
+export async function fetchWithGraphQl(graphQlUrlProps) {
+ try {
+ const responses = await validateResponses(
+ await Promise.all(graphQlUrlProps.map((u) => fetch(RMP_GRAPHQL_URL, u))),
+ graphQlUrlProps,
+ );
+ // We now have all the responses. So, we consider all the responses, and collect the ratings.
+ const ratings: RMPRatingInterface[] = await Promise.all(
+ responses.map((res) => res.json()),
+ );
+ for (let i = 0; i < ratings.length; i++) {
+ if (
+ ratings[i] != null &&
+ Object.prototype.hasOwnProperty.call(ratings[i], 'data') &&
+ Object.prototype.hasOwnProperty.call(ratings[i]['data'], 'node')
+ ) {
+ ratings[i] = ratings[i]['data']['node'];
+ }
}
+ return ratings;
+ } catch (err) {
+ reportError('fetchWithGraphQl', err);
+ return [];
+ }
}
export interface RmpRequest {
- professorNames: string[],
- schoolId: string
+ professorNames: string[];
+ schoolId: string;
}
-export async function requestProfessorsFromRmp(request: RmpRequest): Promise {
-
- // make a list of urls for promises
- const professorUrls = getProfessorUrls(request.professorNames, request.schoolId)
-
- // fetch professor ids from each url
- try {
- let responses = await validateResponses(await Promise.all(professorUrls.map(u=>(fetch(u)))), []);
-
- let texts = await Promise.all(responses.map(res => res.text()));
- const professorIds = getProfessorIds(texts, request.professorNames)
-
- // create fetch objects for each professor id
- const graphQlUrlProps = getGraphQlUrlProps(professorIds)
-
- // fetch professor info by id with graphQL
- let professors = await fetchWithGraphQl(graphQlUrlProps);
- return professors;
- } catch (error) {
- reportError("requestProfessorsFromRmp", error);
- return [];
- };
+
+export async function requestProfessorsFromRmp(
+ request: RmpRequest,
+): Promise {
+ // make a list of urls for promises
+ const professorUrls = getProfessorUrls(
+ request.professorNames,
+ request.schoolId,
+ );
+
+ // fetch professor ids from each url
+ try {
+ const responses = await validateResponses(
+ await Promise.all(professorUrls.map((u) => fetch(u))),
+ [],
+ );
+
+ const texts = await Promise.all(responses.map((res) => res.text()));
+ const professorIds = getProfessorIds(texts, request.professorNames);
+
+ // create fetch objects for each professor id
+ const graphQlUrlProps = getGraphQlUrlProps(professorIds);
+
+ // fetch professor info by id with graphQL
+ const professors = await fetchWithGraphQl(graphQlUrlProps);
+ return professors;
+ } catch (error) {
+ reportError('requestProfessorsFromRmp', error);
+ return [];
+ }
}
interface RMPInterface {
- avgDifficulty: number;
- avgRating: number;
- courseCodes: {
- courseCount: number;
- courseName: string;
- }[];
- department: string;
- firstName: string;
- lastName: string;
- legacyId: number;
- numRatings: number;
- ratingsDistribution: {
- r1: number;
- r2: number;
- r3: number;
- r4: number;
- r5: number;
- total: number;
- };
- school: {
- id: string;
- };
- teacherRatingTags: {
- tagCount: number;
- tagName: string;
- }[];
- wouldTakeAgainPercent: number;
-}
\ No newline at end of file
+ avgDifficulty: number;
+ avgRating: number;
+ courseCodes: {
+ courseCount: number;
+ courseName: string;
+ }[];
+ department: string;
+ firstName: string;
+ lastName: string;
+ legacyId: number;
+ numRatings: number;
+ ratingsDistribution: {
+ r1: number;
+ r2: number;
+ r3: number;
+ r4: number;
+ r5: number;
+ total: number;
+ };
+ school: {
+ id: string;
+ };
+ teacherRatingTags: {
+ tagCount: number;
+ tagName: string;
+ }[];
+ wouldTakeAgainPercent: number;
+}
diff --git a/src/data/interfaces.ts b/src/data/interfaces.ts
index ffb2597..518bb3a 100644
--- a/src/data/interfaces.ts
+++ b/src/data/interfaces.ts
@@ -1,7 +1,9 @@
+//TODO: Fix these any types
+
export interface FetchProfessorParameters {
firstName: string;
lastName: string;
-};
+}
export interface FetchCourseParameters {
subjectPrefix: string;
@@ -11,9 +13,10 @@ export interface FetchCourseParameters {
export interface FetchSectionParameters {
courseReference: string;
professorReference: string;
-};
+}
interface Requisites {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
options: any[];
required: number;
type: string;
@@ -44,7 +47,7 @@ export interface CourseInterface {
interface Office {
building: string;
room: string;
- map_uri: string
+ map_uri: string;
}
export interface ProfessorInterface {
@@ -55,6 +58,7 @@ export interface ProfessorInterface {
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;
@@ -70,52 +74,56 @@ export interface SectionInterface {
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
-};
+ courseCount: number;
+ courseName: string;
+}
export interface RatingsDistributionInterface {
- r1: number,
- r2: number,
- r3: number,
- r4: number,
- r5: number,
- total: number
-};
+ r1: number;
+ r2: number;
+ r3: number;
+ r4: number;
+ r5: number;
+ total: number;
+}
export interface TeacherRatingTag {
- tagCount: number,
- tagName: string
+ 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
-
+ 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/pages/CoursePage.tsx b/src/pages/CoursePage.tsx
new file mode 100644
index 0000000..f2d0133
--- /dev/null
+++ b/src/pages/CoursePage.tsx
@@ -0,0 +1,57 @@
+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 { Loading } from '~components/Loading';
+import { MiniProfessor } from '~components/MiniProfessor';
+import {
+ buildProfessorProfiles,
+ 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 [loading, setLoading] = useState(true);
+ const [profiles, setProfiles] = useState(null);
+
+ useEffect(() => {
+ if (!state) {
+ setLoading(true);
+ getCourseData().then((payload) => {
+ buildProfessorProfiles(payload)
+ .then((profiles) => {
+ setProfiles(profiles);
+ })
+ .finally(() => setLoading(false));
+ });
+ } else {
+ setProfiles(state);
+ setLoading(false);
+ }
+ }, []);
+
+ return (
+
+ {!loading &&
+ profiles &&
+ profiles.map((item, index) => (
+
+
+ ))}
+ {loading &&
}
+ {!loading && !profiles &&
}
+
+
+
+
{/* spacer */}
+
+ {' '}
+ {/* RMP Tag area */}
+ {professorData.rmpTags
+ ?.slice(0, 4)
+ .map((item: string, index: number) => (
+
+ {professorData.ratingsDistribution.length > 0 &&
+ !compareArrays(
+ professorData.ratingsDistribution,
+ Array(5).fill(0),
+ ) && (
+
+
+
+);
diff --git a/src/popup.tsx b/src/popup.tsx
index e9813de..5e89f67 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -1,13 +1,16 @@
-import { MemoryRouter } from "react-router-dom"
-import { Routing } from "~/routes"
-import "~/style.css"
+import '~/style.css';
+
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { Routing } from '~/pages';
function IndexPopup() {
return (
- )
+ );
}
-export default IndexPopup
\ No newline at end of file
+export default IndexPopup;
diff --git a/src/routes/CoursePage.tsx b/src/routes/CoursePage.tsx
deleted file mode 100644
index 47b0eb4..0000000
--- a/src/routes/CoursePage.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { sendToBackground } from "@plasmohq/messaging";
-import { useEffect, useState } from "react";
-import { Rings } from "react-loader-spinner";
-import { useLocation } from "react-router-dom";
-import type { ShowCourseTabPayload } from "~background";
-import { Landing } from "~components/Landing";
-import { Loading } from "~components/Loading";
-import { MiniProfessor } from "~components/MiniProfessor"
-import type { GradeDistribution } from "~components/ProfileGrades";
-import { buildProfessorProfiles, 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 [ loading, setLoading ] = useState(true)
- const [ profiles, setProfiles ] = useState(null)
-
- useEffect(() => {
- if (!state) {
- setLoading(true)
- getCourseData().then(payload => {
- buildProfessorProfiles(payload).then(profiles => {
- setProfiles(profiles)
- }).finally(() => setLoading(false))
- })
- } else {
- setProfiles(state)
- setLoading(false)
- }
- }, [])
-
- return(
-
- { !loading && profiles &&
- profiles.map((item, index) =>
)
- }
- { loading &&
}
- { !loading && !profiles &&
}
-
-
-
-
{/* spacer */}
- {/* RMP Tag area */}
- {professorData.rmpTags?.slice(0, 4).map((item: string, index: number) =>
-
- { professorData.ratingsDistribution.length > 0 && !compareArrays(professorData.ratingsDistribution, Array(5).fill(0)) &&
-
- }
-
-
-
-)
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 42a0f65..2c85cf6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,38 +1,36 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@layer base {
-
/* For big scores, numbers */
h1 {
- @apply text-2xl font-main font-bold
+ @apply text-2xl font-main font-bold;
}
/* For card title, profile name, etc. */
h2 {
- @apply text-xl font-main font-semibold
+ @apply text-xl font-main font-semibold;
}
/* Smaller headings */
h3 {
- @apply text-base font-main font-semibold
+ @apply text-base font-main font-semibold;
}
/* ex. RMP tags */
h4 {
- @apply text-sm font-main font-light
+ @apply text-sm font-main font-light;
}
-
+
/* Subtitles */
h6 {
- @apply text-xs font-main font-medium text-gray-dark
+ @apply text-xs font-main font-medium text-gray-dark;
}
p {
- @apply text-base font-main font-normal
+ @apply text-base font-main font-normal;
}
-
}
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/src/utils/styling.ts b/src/utils/styling.ts
index 5fac1d4..63685ae 100644
--- a/src/utils/styling.ts
+++ b/src/utils/styling.ts
@@ -1,29 +1,33 @@
-import type { ApexOptions } from "apexcharts";
+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) => {
+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("");
-}
+ return ['hsl(', hue, ',100%,85%)'].join('');
+};
/** Apex styling options for the profile grade distribution chart */
export const gradeChartOptions: ApexOptions = {
plotOptions: {
bar: {
- distributed: true
- }
+ distributed: true,
+ },
},
noData: {
- text: "No grade data found",
- align: "center",
- verticalAlign: "middle",
+ text: 'No grade data found',
+ align: 'center',
+ verticalAlign: 'middle',
},
dataLabels: {
- enabled: false
+ enabled: false,
},
legend: {
- show: false
+ show: false,
},
colors: [
'#79ff57',
@@ -43,97 +47,106 @@ export const gradeChartOptions: ApexOptions = {
],
chart: {
toolbar: {
- show: false
+ show: false,
},
- id: 'grade-distribution'
+ id: 'grade-distribution',
},
grid: {
padding: {
left: 20,
- right: 20
+ right: 20,
},
yaxis: {
lines: {
- show: false
- }
- }
+ show: false,
+ },
+ },
},
xaxis: {
- categories: ['A+', 'A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F', 'W']
+ categories: [
+ 'A+',
+ 'A',
+ 'A-',
+ 'B+',
+ 'B',
+ 'B-',
+ 'C+',
+ 'C',
+ 'C-',
+ 'D+',
+ 'D',
+ 'D-',
+ 'F',
+ 'W',
+ ],
},
yaxis: {
- show: false
- }
-}
+ show: false,
+ },
+};
/** Apex styling options for the profile grade distribution chart */
export const ratingsChartOptions: ApexOptions = {
dataLabels: {
- enabled: false
+ enabled: false,
},
chart: {
toolbar: {
- show: false
+ show: false,
},
- id: 'ratings-distribution'
+ id: 'ratings-distribution',
},
noData: {
- text: "No data found",
- align: "center",
- verticalAlign: "middle",
+ text: 'No data found',
+ align: 'center',
+ verticalAlign: 'middle',
},
grid: {
padding: {
- bottom: -95
- }
+ bottom: -95,
+ },
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
- offsetY: 10
- }
+ offsetY: 10,
+ },
},
- colors: [
- '#5ae630',
- '#91e630',
- '#e6d230',
- '#ffa357',
- '#ff5757',
- ],
- labels: ['5', '4', '3', '2', '1']
-}
+ colors: ['#5ae630', '#91e630', '#e6d230', '#ffa357', '#ff5757'],
+ labels: ['5', '4', '3', '2', '1'],
+};
export const miniGradeChartOptions: ApexOptions = {
plotOptions: {
bar: {
- distributed: true
- }
+ distributed: true,
+ },
},
title: {
- text: "Undefined",
+ text: 'Undefined',
align: 'center',
margin: 0,
offsetX: 0,
offsetY: 0,
floating: true,
style: {
- fontSize: '12px',
- fontWeight: 'semibold',
- fontFamily: "Inter",
- color: '#9B9B9B'
+ fontSize: '12px',
+ fontWeight: 'semibold',
+ fontFamily: 'Inter',
+ color: '#9B9B9B',
},
},
noData: {
- text: "No grade data found",
- align: "center",
- verticalAlign: "middle",
+ text: 'No grade data found',
+ align: 'center',
+ verticalAlign: 'middle',
},
dataLabels: {
- enabled: false
+ enabled: false,
},
legend: {
- show: false
+ show: false,
},
colors: [
'#79ff57',
@@ -153,26 +166,41 @@ export const miniGradeChartOptions: ApexOptions = {
],
chart: {
toolbar: {
- show: false
+ show: false,
},
- id: 'grade-distribution'
+ id: 'grade-distribution',
},
grid: {
padding: {
left: 15,
right: 5,
- bottom: -5
+ bottom: -5,
},
yaxis: {
lines: {
- show: false
- }
- }
+ show: false,
+ },
+ },
},
xaxis: {
- categories: ['A+', 'A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F', 'W']
+ categories: [
+ 'A+',
+ 'A',
+ 'A-',
+ 'B+',
+ 'B',
+ 'B-',
+ 'C+',
+ 'C',
+ 'C-',
+ 'D+',
+ 'D',
+ 'D-',
+ 'F',
+ 'W',
+ ],
},
yaxis: {
- show: false
- }
-}
\ No newline at end of file
+ show: false,
+ },
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index b725ddc..0a84276 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,21 +1,20 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ["./**/*.tsx"],
+ content: ['./**/*.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"
+ 'blue-dark': '#1C2A6D',
+ 'blue-dark-hover': '#17235C',
+ gray: '#D9D9D9',
+ 'gray-light': '#EFEFEF',
+ 'gray-dark': '#9B9B9B',
+ white: '#FFFFFF',
+ 'purple-dark': '#939FDB',
+ 'purple-light': '#D0D3EA',
},
fontFamily: {
- main: ["Inter", "sans-serif"]
- }
+ main: ['Inter', 'sans-serif'],
+ },
},
- plugins: []
-}
-
\ No newline at end of file
+ plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
index fa07cbc..80fdeb1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,19 +1,10 @@
{
"extends": "plasmo/templates/tsconfig.base",
- "exclude": [
- "node_modules"
- ],
- "include": [
- ".plasmo/index.d.ts",
- ".plasmo/**/*",
- "./**/*.ts",
- "./**/*.tsx"
- ],
+ "exclude": ["node_modules"],
+ "include": [".plasmo/index.d.ts", ".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
"compilerOptions": {
"paths": {
- "~*": [
- "./src/*"
- ]
+ "~*": ["./src/*"]
},
"baseUrl": "."
}