Replace API request using Trends backend

package.json

@@ -105,7 +105,7 @@
     "host_permissions": [
       "https://utdallas.collegescheduler.com/terms/*/courses/*",
       "https://www.ratemyprofessors.com/",
-      "https://api.utdnebula.com/"
+      "https://trends.utdnebula.com/"
     ],
     "browser_specific_settings": {
       "gecko": {

src/components/HorizontalScores.tsx

@@ -15,28 +15,42 @@ export const HorizontalScores = ({
 }: Scores) => {
   return (
     <div className="grid grid-cols-3">
-      <h2 className="bg-blue-dark text-white text-center py-1 rounded-tl-2xl">
+      <h2
+        className="bg-blue-dark text-white text-center py-1 rounded-tl-2xl"
+        title="Overall Quality"
+      >
         RMP
       </h2>
-      <h2 className="bg-blue-dark text-white text-center py-1">DIFF</h2>
-      <h2 className="bg-blue-dark text-white text-center py-1 rounded-tr-2xl">
+      <h2
+        className="bg-blue-dark text-white text-center py-1"
+        title="Level of Difficulty"
+      >
+        DIFF
+      </h2>
+      <h2
+        className="bg-blue-dark text-white text-center py-1 rounded-tr-2xl"
+        title="Would take again"
+      >
         WTA
       </h2>
       <h1
         style={{ backgroundColor: getScoreColor(rmpScore, 5, false) }}
         className="text-blue-dark text-center py-0.5 rounded-bl-2xl"
+        title="Overall Quality"
       >
         {rmpScore ? rmpScore.toFixed(1) : 'NA'}
       </h1>
       <h1
         style={{ backgroundColor: getScoreColor(diffScore, 5, true) }}
         className="text-blue-dark text-center py-0.5"
+        title="Level of Difficulty"
       >
         {diffScore ? diffScore.toFixed(1) : 'NA'}
       </h1>
       <h1
         style={{ backgroundColor: getScoreColor(wtaPercent, 100, false) }}
         className="text-blue-dark text-center py-0.5 rounded-br-2xl"
+        title="Would take again"
       >
         {wtaPercent ? Math.round(wtaPercent) : 'NA'}%
       </h1>

src/components/MiniGrades.tsx

@@ -3,23 +3,13 @@ import Chart from 'react-apexcharts';
 
 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;
+export const MiniGrades = ({ series }: { series: ApexAxisChartSeries }) => {
   return (
-    <>
-      <Chart
-        options={config}
-        series={gradeDistributionData.series}
-        type="bar"
-        height={124}
-      ></Chart>
-    </>
+    <Chart
+      options={miniGradeChartOptions}
+      series={series}
+      type="bar"
+      height={'100%'}
+    ></Chart>
   );
 };

src/components/MiniProfessor.tsx

@@ -34,33 +34,33 @@ export const MiniProfessor = ({
         </button>
       </header>
       <Card>
-        <div className="grid grid-cols-12">
-          <div className="col-span-4">
-            <MiniScore
-              name="RMP"
-              score={professorData.rmpScore}
-              maxScore={5}
-              inverted={false}
-            />
-            <div className="my-2"></div>
-            <MiniScore
-              name="DIFF"
-              score={professorData.diffScore}
-              maxScore={5}
-              inverted={true}
-            />
-            <div className="my-2"></div>
-            <MiniScore
-              name="WTA"
-              score={professorData.wtaScore}
-              maxScore={100}
-              inverted={false}
-            />
-          </div>
-          <div className="col-span-8 max-h-[124px]">
-            <MiniGrades
-              gradeDistributionData={professorData.gradeDistributions[0]}
-            />
+        <div className="grid grid-cols-12 grid-rows-3 gap-2">
+          <MiniScore
+            name="RMP"
+            title="Overall Quality"
+            score={professorData.rmpScore}
+            maxScore={5}
+            inverted={false}
+            className="col-span-4 row-span-1 col-start-1"
+          />
+          <MiniScore
+            name="DIFF"
+            title="Level of Difficulty"
+            score={professorData.diffScore}
+            maxScore={5}
+            inverted={true}
+            className="col-span-4 row-span-1 row-start-2"
+          />
+          <MiniScore
+            name="WTA"
+            title="Would take again"
+            score={professorData.wtaScore}
+            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>
         </div>
       </Card>

src/components/MiniScore.tsx

@@ -4,31 +4,34 @@ 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 (
-    <div className="grid grid-cols-12">
+    <div className={'grid grid-cols-12 ' + className} title={title}>
       <h3 className="bg-blue-dark rounded-l-xl text-white text-center py-1.5 col-span-5">
         {name}
       </h3>
-      {score !== undefined && (
+      {score !== undefined ? (
         <h1
           style={{ backgroundColor: getScoreColor(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)}
+          {name === 'WTA' ? Math.round(score) + '%' : score.toFixed(1)}
         </h1>
-      )}
-      {score === undefined && (
+      ) : (
         <h1
           style={{ backgroundColor: 'white' }}
           className="text-blue-dark text-center py-0.5 rounded-r-xl col-span-7"

src/components/ProfileFooter.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export const ProfileFooter = ({
+  name,
+  rmpId,
+}: {
+  name: string;
+  rmpId: number;
+}) => {
+  return (
+    <footer className="mt-2 flex justify-center gap-2">
+      <a
+        className="border-blue-dark border-2 rounded-full p-2 hover:bg-blue-dark hover:text-white transition"
+        href={'https://www.ratemyprofessors.com/professor/' + rmpId}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Open Rate My Professors
+      </a>
+      <a
+        className="border-blue-dark border-2 rounded-full p-2 hover:bg-blue-dark hover:text-white transition"
+        href={
+          'https://trends.utdnebula.com/dashboard?searchTerms=' +
+          name.split(' ')[0] +
+          '+' +
+          name.split(' ')[name.split(' ').length - 1]
+        }
+        target="_blank"
+        rel="noreferrer"
+      >
+        Open Nebula Trends
+      </a>
+    </footer>
+  );
+};

src/components/ProfileGrades.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Chart from 'react-apexcharts';
-import { AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai';
 
 import { gradeChartOptions } from '~utils/styling';
 
@@ -10,53 +9,25 @@ export interface GradeDistribution {
 }
 
 export const ProfileGrades = ({
-  gradeDistributionData,
+  series,
+  total,
 }: {
-  gradeDistributionData: GradeDistribution[];
+  series: GradeDistribution;
+  total: number;
 }) => {
-  const [page, setPage] = useState(0);
-
-  const prevPage = () => {
-    if (page === 0) {
-      setPage(gradeDistributionData.length - 1);
-    } else {
-      setPage(page - 1);
-    }
-  };
-
-  const nextPage = () => {
-    if (page === gradeDistributionData.length - 1) {
-      setPage(0);
-    } else {
-      setPage(page + 1);
-    }
-  };
-
   return (
     <>
-      <header className="bg-blue-dark rounded-t-2xl grid grid-cols-12">
-        <button
-          onClick={prevPage}
-          className="col-span-2 text-center hover:bg-blue-dark-hover rounded-tl-2xl transition duration-250 ease-in-out flex items-center justify-center"
-        >
-          <AiFillCaretLeft size={20} color="white" />
-        </button>
-        <h2 className="col-span-8 text-center text-white mx-auto py-2">
-          {gradeDistributionData[page].name}
+      <header className="bg-blue-dark rounded-t-2xl flex">
+        <h2 className="flex-auto text-center text-white mx-auto py-2">
+          {'Grades Distribution (' + total + ')'}
         </h2>
-        <button
-          onClick={nextPage}
-          className="col-span-2 text-center hover:bg-blue-dark-hover rounded-tr-2xl transition duration-250 ease-in-out flex items-center justify-center"
-        >
-          <AiFillCaretRight size={20} color="white" />
-        </button>
       </header>
-      <div className="border-blue-dark border-r-2 border-l-2 border-b-2 rounded-b-2xl">
+      <div className="border-blue-dark border-r-2 border-l-2 border-b-2 rounded-b-2xl pr-2">
         <Chart
           options={gradeChartOptions}
-          series={gradeDistributionData[page].series}
+          series={series}
           type="bar"
-          height={150}
+          height={'100%'}
         ></Chart>
       </div>
     </>

src/components/ProfileHeader.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FaExternalLinkAlt } from 'react-icons/fa';
 import { TiArrowBack } from 'react-icons/ti';
 import { NavigateFunction, useNavigate } from 'react-router-dom';
 
@@ -8,12 +7,10 @@ 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();
@@ -22,13 +19,6 @@ export const ProfileHeader = ({
     navigation('/', { state: profiles });
   };
 
-  const navigativeToRmp = (): void => {
-    window.open(
-      'https://www.ratemyprofessors.com/professor/' + rmpId,
-      '_blank',
-    );
-  };
-
   return (
     <header className="relative rounded-t-2xl bg-blue-dark h-32">
       <div className="translate-y-[18px] grid grid-cols-5">
@@ -45,16 +35,6 @@ export const ProfileHeader = ({
         <h2 className="col-span-3 text-center text-white mx-auto my-auto">
           {name.split(' ').at(0) + ' ' + name.split(' ').at(-1)}
         </h2>
-        <button
-          className="justify-center items-center flex"
-          onClick={navigativeToRmp}
-        >
-          <FaExternalLinkAlt
-            size={40}
-            color="white"
-            className="p-3 hover:bg-blue-dark-hover rounded-lg transition duration-250 ease-in-out"
-          />
-        </button>
       </div>
       <div className="absolute top-[66px] left-1/2 -translate-x-1/2 rounded-full h-32 w-32 bg-gray-light">
         <img

src/components/RmpRatings.tsx

@@ -4,23 +4,25 @@ import Chart from 'react-apexcharts';
 import { ratingsChartOptions } from '~utils/styling';
 
 export const RmpRatings = ({
-  ratingsDistributionData,
+  series,
+  total,
 }: {
-  ratingsDistributionData: number[];
+  series: number[];
+  total: number;
 }) => {
   return (
     <div className="my-2">
       <header className="bg-blue-dark rounded-t-2xl flex">
         <h2 className="flex-auto text-center text-white mx-auto py-2">
-          Ratings Distribution
+          {'Ratings Distribution (' + total + ')'}
         </h2>
       </header>
       <div className="border-blue-dark border-r-2 border-l-2 border-b-2 rounded-b-2xl">
         <Chart
           options={ratingsChartOptions}
-          series={ratingsDistributionData}
+          series={series}
           type="donut"
-          height={300}
+          height={'100%'}
         ></Chart>
       </div>
     </div>