Merge branch 'develop' into fix/top-tags

package.json

@@ -100,7 +100,8 @@
       "storage",
       "scripting",
       "webNavigation",
-      "tabs"
+      "tabs",
+      "nativeMessaging"
     ],
     "host_permissions": [
       "https://utdallas.collegescheduler.com/terms/*/courses/*",

src/background.ts

@@ -1,6 +1,6 @@
 import { Storage } from '@plasmohq/storage';
 
-import { CourseHeader, scrapeCourseData } from '~content';
+import { CourseHeader, listenForTableChange, scrapeCourseData } from '~content';
 
 export interface ShowCourseTabPayload {
   header: CourseHeader;
@@ -21,6 +21,7 @@ chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
       details.url,
     )
   ) {
+    //Scrape data
     chrome.scripting.executeScript(
       {
         target: {
@@ -38,6 +39,15 @@ chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
         }
       },
     );
+    //Listen for table change to rescrape data
+    chrome.tabs.sendMessage(details.tabId, 'disconnectObserver');
+    chrome.scripting.executeScript({
+      target: {
+        tabId: details.tabId,
+      },
+      func: listenForTableChange,
+    });
+    //Store tab info
     chrome.action.setBadgeText({ text: '!' });
     chrome.action.setBadgeBackgroundColor({ color: 'green' });
     courseTabId = details.tabId;
@@ -48,6 +58,27 @@ chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
   }
 });
 
+/** Rescrape data on table change */
+chrome.runtime.onMessage.addListener(function (message) {
+  if (message === 'tableChange') {
+    chrome.scripting.executeScript(
+      {
+        target: {
+          tabId: courseTabId,
+        },
+        func: scrapeCourseData,
+      },
+      async function (resolve) {
+        if (resolve && resolve[0] && resolve[0].result) {
+          const result: ShowCourseTabPayload = resolve[0].result;
+          scrapedCourseData = result;
+          await storage.set('scrapedCourseData', scrapedCourseData);
+        }
+      },
+    );
+  }
+});
+
 /** Sets the icon to be active if we're on a course tab */
 chrome.tabs.onActivated.addListener(async () => {
   const cachedTabUrl: string = await storage.get('courseTabUrl');

src/components/MiniGrades.tsx

@@ -1,9 +1,29 @@
 import React from 'react';
 import Chart from 'react-apexcharts';
+import { Rings } from 'react-loader-spinner';
 
 import { miniGradeChartOptions } from '~utils/styling';
 
-export const MiniGrades = ({ series }: { series: ApexAxisChartSeries }) => {
+export const MiniGrades = ({
+  series,
+  loading,
+}: {
+  series: ApexAxisChartSeries;
+  loading: boolean;
+}) => {
+  if (loading) {
+    return (
+      <Rings
+        height="100%"
+        width="100%"
+        color="#1C2A6D"
+        radius="6"
+        wrapperClass="block mx-auto w-full h-full"
+        visible={true}
+        ariaLabel="rings-loading"
+      />
+    );
+  }
   return (
     <Chart
       options={miniGradeChartOptions}

src/components/MiniProfessor.tsx

@@ -25,42 +25,69 @@ export const MiniProfessor = ({
     <>
       <header className="h-10 rounded-t-2xl bg-blue-dark py-2 pr-3 pl-[14px] flex">
         <h3 className="text-white">{professorData.name}</h3>
-        <button onClick={toProfessorProfile} className="ml-auto">
-          <FaUser
-            size={24}
-            color="white"
-            className="px-1.5 hover:bg-blue-dark-hover rounded-lg transition duration-250 ease-in-out"
-          />
-        </button>
+        {!professorData.loading && (
+          <button onClick={toProfessorProfile} className="ml-auto">
+            <FaUser
+              size={24}
+              color="white"
+              className="px-1.5 hover:bg-blue-dark-hover rounded-lg transition duration-250 ease-in-out"
+            />
+          </button>
+        )}
       </header>
       <Card>
         <div className="grid grid-cols-12 grid-rows-3 gap-2">
           <MiniScore
             name="RMP"
             title="Overall Quality"
-            score={professorData.rmpScore}
+            score={
+              professorData.loading
+                ? '...'
+                : typeof professorData.rmpScore !== 'undefined'
+                ? professorData.rmpScore.toFixed(1)
+                : undefined
+            }
             maxScore={5}
             inverted={false}
             className="col-span-4 row-span-1 col-start-1"
           />
           <MiniScore
             name="DIFF"
             title="Level of Difficulty"
-            score={professorData.diffScore}
+            score={
+              professorData.loading
+                ? '...'
+                : typeof professorData.diffScore !== 'undefined'
+                ? professorData.diffScore.toFixed(1)
+                : undefined
+            }
             maxScore={5}
             inverted={true}
             className="col-span-4 row-span-1 row-start-2"
           />
           <MiniScore
             name="WTA"
             title="Would take again"
-            score={professorData.wtaScore}
+            score={
+              professorData.loading
+                ? '...'
+                : typeof professorData.wtaScore !== 'undefined'
+                ? Math.round(professorData.wtaScore) + '%'
+                : undefined
+            }
             maxScore={100}
             inverted={false}
             className="col-span-4 row-span-1 row-start-3"
           />
-          <div className="col-span-8 row-span-3 col-start-5 max-h-[124px]">
-            <MiniGrades series={professorData.gradeDistribution} />
+          <div className="col-span-8 row-span-3 col-start-5 max-h-32">
+            <MiniGrades
+              series={
+                professorData?.gradeDistribution ?? [
+                  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+                ]
+              }
+              loading={professorData.loading}
+            />
           </div>
         </div>
       </Card>

src/components/MiniScore.tsx

@@ -26,10 +26,13 @@ export const MiniScore = ({
       </h3>
       {score !== undefined ? (
         <h1
-          style={{ backgroundColor: getScoreColor(score, maxScore, inverted) }}
+          style={{
+            transition: 'background-color 300ms',
+            backgroundColor: getScoreColor(parseInt(score), maxScore, inverted),
+          }}
           className="text-blue-dark text-center py-0.5 rounded-r-xl col-span-7"
         >
-          {name === 'WTA' ? Math.round(score) + '%' : score.toFixed(1)}
+          {score}
         </h1>
       ) : (
         <h1

src/content.ts

@@ -85,9 +85,41 @@ export async function scrapeCourseData() {
       });
       const courseRowCells = courseRow.querySelector('tr');
       courseRowCells.insertBefore(newTd, courseRowCells.children[7]);
+      //Increase Disabled Reasons row colspan if necessary
+      const sectionDisabled = courseRow.querySelector('tr:nth-child(3) > td');
+      if (sectionDisabled !== null) {
+        sectionDisabled.colSpan = sectionDisabled.colSpan + 1;
+      }
       // collapse section details
       sectionDetailsButton.click();
     });
     return [...new Set(professors)];
   }
 }
+
+/** This listens for clicks on the buttons that switch between the enabled and disabled professor tabs and reports back to background.ts */
+export function listenForTableChange() {
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (
+        mutation.type === 'attributes' &&
+        mutation.attributeName === 'class'
+      ) {
+        //button corresponding to shown table is given an active class
+        if (mutation.target.classList.contains('active')) {
+          chrome.runtime.sendMessage('tableChange');
+        }
+      }
+    }
+  });
+  observer.observe(document.body, {
+    attributes: true,
+    subtree: true,
+  });
+  //remove observer when ordered by backgroud.ts to avoid duplicates
+  chrome.runtime.onMessage.addListener(function (message) {
+    if (message === 'disconnectObserver') {
+      observer.disconnect();
+    }
+  });
+}