Merge branch 'develop' into gcal

UTDNebula · Dec 11, 2024 · 0fa72a4 · 0fa72a4
2 parents 53459a1 + 565aefc
commit 0fa72a4
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/CourseOverview.tsx b/src/components/CourseOverview.tsx
@@ -1,3 +1,4 @@
+import { Skeleton } from '@mui/material';
 import React from 'react';
 
 import { TRENDS_URL } from '~data/config';
@@ -12,25 +13,30 @@ type CourseOverviewProps = {
 const CourseOverview = ({ header, grades }: CourseOverviewProps) => {
   const isCourse = typeof header !== 'string';
   return (
-    <div className="flex flex-col gap-2">
-      <p className="text-2xl font-bold text-center">
+    <div className="flex flex-col items-center gap-2">
+      <p className="text-2xl font-bold">
         {isCourse ? searchQueryLabel(header) : header}
       </p>
       {isCourse && (
         <>
-          {typeof grades !== 'undefined' && grades.state === 'done' && (
-            <p className="text-lg font-semibold text-center">
-              {'Overall grade: ' + grades.data.letter_grade}
-            </p>
-          )}
+          {(grades.state === 'loading' && (
+            <Skeleton variant="rounded">
+              <p className="text-lg font-semibold">Overall grade: A+</p>
+            </Skeleton>
+          )) ||
+            (grades.state === 'done' && (
+              <p className="text-lg font-semibold">
+                {'Overall grade: ' + grades.data.letter_grade}
+              </p>
+            ))}
           <a
             href={
               TRENDS_URL +
               'dashboard?searchTerms=' +
               encodeURIComponent(searchQueryLabel(header))
             }
             target="_blank"
-            className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600 text-center"
+            className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
             rel="noreferrer"
           >
             See on Trends

diff --git a/src/components/SearchResultsTable.tsx b/src/components/SearchResultsTable.tsx
@@ -82,16 +82,34 @@ function Row({
         className="cursor-pointer"
       >
         <TableCell className="border-b-0 pb-0" colSpan={6}>
-          <Typography
-            onClick={
-              (e) => e.stopPropagation() // prevents opening/closing the card when clicking on the text
+          <Tooltip
+            title={
+              typeof course.profFirst !== 'undefined' &&
+              typeof course.profLast !== 'undefined' &&
+              (rmp !== undefined &&
+              rmp.state === 'done' &&
+              rmp.data.teacherRatingTags.length > 0
+                ? 'Tags: ' +
+                  rmp.data.teacherRatingTags
+                    .sort((a, b) => b.tagCount - a.tagCount)
+                    .slice(0, 3)
+                    .map((tag) => tag.tagName)
+                    .join(', ')
+                : 'No Tags Available')
             }
-            className="leading-tight text-lg text-gray-600 dark:text-gray-200"
+            placement="top"
           >
-            {searchQueryLabel(
-              showProfNameOnly ? convertToProfOnly(course) : course,
-            )}
-          </Typography>
+            <Typography
+              onClick={
+                (e) => e.stopPropagation() // prevents opening/closing the card when clicking on the text
+              }
+              className="leading-tight text-lg text-gray-600 dark:text-gray-200 cursor-text w-fit"
+            >
+              {searchQueryLabel(
+                showProfNameOnly ? convertToProfOnly(course) : course,
+              )}
+            </Typography>
+          </Tooltip>
         </TableCell>
       </TableRow>
       <TableRow
@@ -129,17 +147,17 @@ function Row({
             </IconButton>
           </Tooltip>
         </TableCell>
-        <TableCell align="right" className="border-b-0">
+        <TableCell align="center" className="border-b-0">
           {(fallbackToProfOnly &&
             (typeof grades === 'undefined' || grades.state === 'error') &&
             (((typeof backupGrades === 'undefined' ||
               backupGrades.state === 'error') && <></>) ||
               (backupGrades.state === 'loading' && (
                 <Skeleton
                   variant="rounded"
-                  className="rounded-full px-5 py-2 ml-auto"
+                  className="rounded-full px-5 py-2 w-16 block mx-auto"
                 >
-                  <Typography className="text-base">A</Typography>
+                  <Typography className="text-base w-6">A+</Typography>
                 </Skeleton>
               )) ||
               (backupGrades.state === 'done' && (
@@ -168,7 +186,7 @@ function Row({
                     }
                   >
                     <Typography
-                      className="text-base text-black rounded-full px-5 py-2 inline"
+                      className="text-base text-black text-center rounded-full px-5 py-2 w-16 block mx-auto"
                       sx={{
                         backgroundColor: gpaToColor(backupGrades.data.gpa),
                       }}
@@ -181,9 +199,9 @@ function Row({
             (grades.state === 'loading' && (
               <Skeleton
                 variant="rounded"
-                className="rounded-full px-5 py-2 ml-auto"
+                className="rounded-full px-5 py-2 w-16 block mx-auto"
               >
-                <Typography className="text-base">A</Typography>
+                <Typography className="text-base w-6">A+</Typography>
               </Skeleton>
             )) ||
             (grades.state === 'done' && (
@@ -192,7 +210,7 @@ function Row({
                 placement="top"
               >
                 <Typography
-                  className="text-base text-black rounded-full px-5 py-2 inline"
+                  className="text-base text-black text-center rounded-full px-5 py-2 w-16 block mx-auto"
                   sx={{ backgroundColor: gpaToColor(grades.data.gpa) }}
                 >
                   {grades.data.letter_grade}
@@ -201,10 +219,10 @@ function Row({
             )) ||
             null}
         </TableCell>
-        <TableCell align="right" className="border-b-0">
+        <TableCell align="center" className="border-b-0">
           {((typeof rmp === 'undefined' || rmp.state === 'error') && <></>) ||
             (rmp.state === 'loading' && (
-              <Skeleton variant="rounded" className="rounded-full ml-auto">
+              <Skeleton variant="rounded" className="rounded-full">
                 <Rating sx={{ fontSize: 25 }} readOnly />
               </Skeleton>
             )) ||

diff --git a/src/components/SingleProfInfo.tsx b/src/components/SingleProfInfo.tsx
@@ -1,5 +1,6 @@
-import { Grid, Skeleton } from '@mui/material';
-import React from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Chip, Collapse, Grid, IconButton, Skeleton } from '@mui/material';
+import React, { useState } from 'react';
 
 import type { RMPInterface } from '~data/fetchFromRmp';
 import type { GenericFetchedData } from '~pages';
@@ -9,39 +10,54 @@ type Props = {
 };
 
 function SingleProfInfo({ rmp }: Props) {
+  const [showMore, setShowMore] = useState(false);
+
   if (typeof rmp === 'undefined' || rmp.state === 'error') {
     return null;
   }
+
   if (rmp.state === 'loading') {
     return (
       <Grid container spacing={2} className="p-4">
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">5.0</p>
+          </Skeleton>
           <p>Professor rating</p>
         </Grid>
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">5.0</p>
+          </Skeleton>
           <p>Difficulty</p>
         </Grid>
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">1,000</p>
+          </Skeleton>
           <p>Ratings given</p>
         </Grid>
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">99%</p>
+          </Skeleton>
           <p>Would take again</p>
         </Grid>
+        <Grid item xs={12}>
+          <Skeleton variant="rounded">
+            <p>Visit Rate My Professors</p>
+          </Skeleton>
+        </Grid>
       </Grid>
     );
   }
+
+  const topTags = rmp.data.teacherRatingTags.sort(
+    (a, b) => b.tagCount - a.tagCount,
+  );
+  const first5 = topTags.slice(0, 5);
+  const next5 = topTags.slice(5, 10);
+
   return (
     <Grid container spacing={2} className="p-4">
       <Grid item xs={6}>
@@ -64,6 +80,46 @@ function SingleProfInfo({ rmp }: Props) {
         </p>
         <p>Would take again</p>
       </Grid>
+
+      {first5.length > 0 && (
+        <Grid item xs={12}>
+          <div className="flex gap-y-1 flex-wrap">
+            {first5.map((tag, index) => (
+              <Chip
+                key={index}
+                label={`${tag.tagName} (${tag.tagCount})`}
+                variant="outlined"
+                className="mr-1"
+              />
+            ))}
+            {next5.length > 0 && (
+              <>
+                {next5.map((tag, index) => (
+                  <Collapse key={index} in={showMore} orientation="horizontal">
+                    <Chip
+                      label={`${tag.tagName} (${tag.tagCount})`}
+                      variant="outlined"
+                      className="mr-1"
+                    />
+                  </Collapse>
+                ))}
+                <IconButton
+                  size="small"
+                  aria-label="show more"
+                  onClick={() => setShowMore(!showMore)}
+                >
+                  <ExpandMoreIcon
+                    className={
+                      'transition ' + (showMore ? 'rotate-90' : '-rotate-90')
+                    }
+                  />
+                </IconButton>
+              </>
+            )}
+          </div>
+        </Grid>
+      )}
+
       <Grid item xs={12}>
         <a
           href={