Merge pull request #51 from UTDNebula/load-profs-independently

Load profs independently

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/data/builder.ts

@@ -1,4 +1,4 @@
-import type { ShowCourseTabPayload } from '~background';
+import { CourseHeader } from '~content';
 import { requestProfessorFromRmp } from '~data/fetchFromRmp';
 
 import { SCHOOL_ID } from './config';
@@ -14,122 +14,90 @@ export interface ProfessorProfileInterface {
   rmpTags: string[];
   gradeDistributions: GradeDistribution[];
   ratingsDistribution: number[];
+  loading: boolean;
 }
 
 interface GradeDistribution {
   name: string;
   series: ApexAxisChartSeries;
 }
 
-function combineAndNormalizeGrades(gradeData) {
-  const totalGrades = [];
+export async function buildProfessorProfile(
+  header: CourseHeader,
+  professor: string,
+): ProfessorProfileInterface {
+  const parts = professor.split(' ');
+  const professorSplit = {
+    profFirst: parts[0],
+    profLast: parts[parts.length - 1],
+  };
 
-  //combine academic sections
-  gradeData = gradeData.map((professor) =>
-    professor === null
-      ? null
-      : professor.reduce(
-          (accumulator, academicSession) => {
-            return accumulator.map(
-              (value, index) =>
-                value + academicSession.grade_distribution[index] ?? 0,
-            );
-          },
-          [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        ),
-  );
-
-  //divide by total
-  gradeData = gradeData.map((professor) => {
-    if (professor === null) {
-      totalGrades.push(0);
-      return null;
-    }
-    const total = professor.reduce(
-      (accumulator, grade) => grade + accumulator,
-      0,
-    );
-    totalGrades.push(total);
-    return professor.map((grade) => (grade / total) * 100);
-  });
+  let nebulaProfessor, nebulaGrades, rmp;
 
-  return [totalGrades, gradeData];
-}
-
-export async function buildProfessorProfiles(payload: ShowCourseTabPayload) {
-  let { professors } = payload;
-  professors = professors.map((prof) => {
-    const parts = prof.split(' ');
-    return {
-      profFirst: parts[0],
-      profLast: parts[parts.length - 1],
-    };
-  });
-
-  let nebulaProfessors, nebulaGrades, rmps;
-
-  const nebulaProfessorsPromises = Promise.all(
-    professors.map(fetchNebulaProfessor),
-  ).then((result) => (nebulaProfessors = result));
+  const nebulaProfessorsPromise = fetchNebulaProfessor(professorSplit).then(
+    (result) => (nebulaProfessor = result),
+  );
 
-  const nebulaGradesPromises = Promise.all(
-    professors.map(fetchNebulaGrades),
-  ).then((result) => (nebulaGrades = result));
+  const nebulaGradesPromise = fetchNebulaGrades(professorSplit).then(
+    (result) => (nebulaGrades = result),
+  );
 
-  const rmpsPromises = Promise.all(
-    professors.map((prof) =>
-      requestProfessorFromRmp({
-        professorName: prof.profFirst + ' ' + prof.profLast,
-        schoolId: SCHOOL_ID,
-      }),
-    ),
-  ).then((result) => (rmps = result));
+  const rmpsPromise = requestProfessorFromRmp({
+    professorName: professorSplit.profFirst + ' ' + professorSplit.profLast,
+    schoolId: SCHOOL_ID,
+  }).then((result) => (rmp = result));
 
   await Promise.all([
-    nebulaProfessorsPromises,
-    nebulaGradesPromises,
-    rmpsPromises,
+    nebulaProfessorsPromise,
+    nebulaGradesPromise,
+    rmpsPromise,
   ]);
 
-  let totalGrades = [];
-  [totalGrades, nebulaGrades] = combineAndNormalizeGrades(nebulaGrades);
+  let totalGrades = 0;
+  if (nebulaGrades !== null) {
+    //combine academic sections
+    nebulaGrades = nebulaGrades.reduce(
+      (accumulator, academicSession) => {
+        return accumulator.map(
+          (value, index) =>
+            value + academicSession.grade_distribution[index] ?? 0,
+        );
+      },
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    );
 
-  const professorProfiles: ProfessorProfileInterface[] = [];
-  for (let i = 0; i < professors.length; i++) {
-    professorProfiles.push({
-      name: professors[i].profFirst + ' ' + professors[i].profLast,
-      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),
-      gradeDistribution: [
-        {
-          name: professors[i].profFirst + ' ' + professors[i].profLast,
-          data: nebulaGrades[i] ?? [],
-        },
-      ],
-      totalGrades: totalGrades[i],
-      ratingsDistribution: rmps[i]
-        ? Object.values(rmps[i].ratingsDistribution).reverse().slice(1)
-        : [],
-      totalRatings: rmps[i]?.ratingsDistribution?.total ?? 0,
-    });
+    //divide by total
+    totalGrades = nebulaGrades.reduce(
+      (accumulator, grade) => grade + accumulator,
+      0,
+    );
+    nebulaGrades = nebulaGrades.map((grade) => (grade / totalGrades) * 100);
   }
-  return professorProfiles;
+
+  return {
+    name: professor,
+    profilePicUrl: nebulaProfessor?.image_uri,
+    rmpId: rmp?.legacyId,
+    rmpScore: rmp?.avgRating !== 0 ? rmp?.avgRating : undefined,
+    diffScore: rmp?.avgDifficulty !== 0 ? rmp?.avgDifficulty : undefined,
+    wtaScore:
+      rmp?.wouldTakeAgainPercent !== -1
+        ? rmp?.wouldTakeAgainPercent
+        : undefined,
+    rmpTags: rmp?.teacherRatingTags
+      .sort((a, b) => a.tagCount - b.tagCount)
+      .map((tag) => tag.tagName),
+    gradeDistribution: [
+      {
+        name: professor,
+        data: nebulaGrades ?? [],
+      },
+    ],
+    totalGrades: totalGrades,
+    ratingsDistribution: rmp
+      ? Object.values(rmp.ratingsDistribution).reverse().slice(1)
+      : [],
+    totalRatings: rmp?.ratingsDistribution?.total ?? 0,
+    loading: false,
+  };
 }