Merge pull request #297 from UTDNebula/IssueRMPTagsLoadIn

Updated RMP Tags
UTDNebula · Nov 16, 2024 · 86e586b · 86e586b
2 parents 3816683 + 734070b
commit 86e586b
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 14 deletions.
diff --git a/src/components/common/SingleProfInfo/singleProfInfo.tsx b/src/components/common/SingleProfInfo/singleProfInfo.tsx
@@ -1,6 +1,13 @@
-import { Grid2 as Grid, Skeleton } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import {
+  Chip,
+  Collapse,
+  Grid2 as Grid,
+  IconButton,
+  Skeleton,
+} from '@mui/material';
 import Link from 'next/link';
-import React from 'react';
+import React, { useState } from 'react';
 
 import type { RMPInterface } from '@/pages/api/ratemyprofessorScraper';
 import type { GenericFetchedData } from '@/pages/dashboard/index';
@@ -10,12 +17,23 @@ type Props = {
 };
 
 function SingleProfInfo({ rmp }: Props) {
+  const [showMore, setShowMore] = useState(false);
+
   if (typeof rmp === 'undefined' || rmp.state === 'error') {
     return null;
   }
+
   if (rmp.state === 'loading') {
+    const loadingTags = [
+      'Group projects (54)',
+      'Lecture heavy (29)',
+      'Hilarious (13)',
+      'Respected (9)',
+      'Clear grading criteria (9)',
+    ];
     return (
       <Grid container spacing={2} className="p-4">
+        {/* Loading skeletons for each metric */}
         <Grid size={6}>
           <Skeleton variant="rounded">
             <p className="text-xl font-bold">5.0</p>
@@ -40,6 +58,22 @@ function SingleProfInfo({ rmp }: Props) {
           </Skeleton>
           <p>Would take again</p>
         </Grid>
+
+        <Grid size={12}>
+          <div className="flex gap-1 flex-wrap">
+            {loadingTags.map((tag, index) => (
+              <Skeleton key={index} variant="rounded" className="rounded-full">
+                <Chip label={tag} />
+              </Skeleton>
+            ))}
+            <Skeleton variant="rounded" className="rounded-full">
+              <IconButton size="small">
+                <ExpandMoreIcon />
+              </IconButton>
+            </Skeleton>
+          </div>
+        </Grid>
+
         <Grid size={12}>
           <Skeleton variant="rounded">
             <p>Visit Rate My Professors</p>
@@ -48,6 +82,7 @@ function SingleProfInfo({ rmp }: Props) {
       </Grid>
     );
   }
+
   if (rmp.data.numRatings == 0) {
     return (
       <Grid container spacing={2} className="p-4">
@@ -71,6 +106,13 @@ function SingleProfInfo({ rmp }: Props) {
       </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 size={6}>
@@ -93,6 +135,46 @@ function SingleProfInfo({ rmp }: Props) {
         </p>
         <p>Would take again</p>
       </Grid>
+
+      {first5.length > 0 && (
+        <Grid size={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 size={12}>
         <Link
           href={

diff --git a/src/components/search/SearchResultsTable/searchResultsTable.tsx b/src/components/search/SearchResultsTable/searchResultsTable.tsx
@@ -168,20 +168,38 @@ function Row({
           </Tooltip>
         </TableCell>
         <TableCell component="th" scope="row" className="w-full border-b-0">
-          <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 cursor-text w-fit"
+            placement="top"
           >
-            {searchQueryLabel(course) +
-              ((typeof course.profFirst === 'undefined' &&
-                typeof course.profLast === 'undefined') ||
-              (typeof course.prefix === 'undefined' &&
-                typeof course.number === 'undefined')
-                ? ' (Overall)'
-                : '')}
-          </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(course) +
+                ((typeof course.profFirst === 'undefined' &&
+                  typeof course.profLast === 'undefined') ||
+                (typeof course.prefix === 'undefined' &&
+                  typeof course.number === 'undefined')
+                  ? ' (Overall)'
+                  : '')}
+            </Typography>
+          </Tooltip>
         </TableCell>
         <TableCell align="center" className="border-b-0">
           {((typeof grades === 'undefined' || grades.state === 'error') && (