Rate my professor (#69)

* backend for RMP database

* frontend to render RMP data

* fix bug: data not changing between sections + N/A before RMP data fully loaded

* feat: added grade distribution for Summer 2024 (#66)

Co-authored-by: Mike Nguyen <34334226+DedsecKnight@users.noreply.github.com>

* Update to actions/cache@v3 (#68)

* feat: added grade distribution for Fall 2024 (#67)

Co-authored-by: Mike Nguyen <34334226+DedsecKnight@users.noreply.github.com>

* testing different layout of RMP info

* changing the professor details container

* changing the professor details container and style

* fix build issues with removing suggested courses section

* fix bug: name not matched

* wokring on UI changes

* RMP data design updated on SectionContent component

* RMP data design updated on SectionContent component

* added color to RMPScore and Difficulty

* updated builtwithlove

* updated tooltip styling

* modified tooltip styling slightly

* Removed extraneous code

* fixed small build isues

* fixed small build isues

* fix bug: some of the courses may not be found so cannot render the instructor's data

---------

Co-authored-by: Evan Wright <emw8105@gmail.com>
Co-authored-by: Mike Nguyen <34334226+DedsecKnight@users.noreply.github.com>
Co-authored-by: Farhan Jamil <32781195+FarhanJamil0001@users.noreply.github.com>
Co-authored-by: FarhanJamil0001 <farrigalaxy321@gmail.com>
Co-authored-by: jor-dango <jtan208295@gmail.com>

Author: 5 people

client/public/rmp-logo.png

@@ -61,6 +61,16 @@ const TrendsText = styled.p`
   margin-bottom: 0;
 `;
 
+const BuiltWithLove = styled.p`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-size: 1.2rem;
+  margin: 0.5rem 0;
+  font-weight: 550;
+`;
+
 const NebulaLogo = styled.img`
   height: 1.375rem;
   filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.6));
@@ -90,11 +100,10 @@ function Core({ children }: CoreProps) {
           <NebulaLogo src="/nebula-logo.svg" />
           <TrendsText>Compare everything in one place with <b>UTD Trends</b></TrendsText>
         </TrendsLink>
-        <p>
+        <BuiltWithLove>
           Built with <HeartTwoTone twoToneColor="#eb2f96" /> by{" "}
-          <a href="https://www.acmutd.co" target={"blank"}>ACM Dev</a>. Raw data available{" "}
-          <a href="https://github.com/acmutd/utd-grades/tree/master/raw_data" target={"blank"}>for download</a>.
-        </p>
+          <a href="https://www.acmutd.co" target={"blank"}>ACM Dev</a>
+        </BuiltWithLove>
         <p>
           Designed by <a href="https://www.arimilli.io" target={"blank"}>Bharat Arimilli</a>. Thanks to{" "}
           <a href="https://garrettgu.com/" target={"blank"}>Garrett Gu</a>,{" "}
@@ -103,6 +112,9 @@ function Core({ children }: CoreProps) {
           <Popover content={donors}>
             <span style={{ textDecoration: "underline" }}>donors</span>.
           </Popover>
+
+          <a href="https://github.com/acmutd/utd-grades/tree/master/raw_data" target={"blank"}> Raw data available for download</a>
+
         </p>
       </Footer>
     </Container>

client/src/components/Core.tsx

@@ -1,10 +1,12 @@
+import type { RMPInstructor } from "@utd-grades/db";
 import { Col, Row } from "antd";
 import type { NextRouter } from "next/router";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useQuery } from "react-query";
 import { animateScroll as scroll } from "react-scroll";
 import styled from "styled-components";
 import type { SearchQuery } from "../types";
+import { normalizeName } from "../utils/index";
 import { useDb } from "../utils/useDb";
 import Search from "./Search";
 import SearchResultsContent from "./SearchResultsContent";
@@ -53,6 +55,7 @@ export default function Results({ search, sectionId, router }: ResultsProps) {
 
   const { data: db } = useDb();
 
+  // this is to get all of the other sections of the same class (for the side bar)
   const {
     data: sections,
     status: sectionsStatus,
@@ -64,6 +67,7 @@ export default function Results({ search, sectionId, router }: ResultsProps) {
     { enabled: !!db }
   );
 
+  // get the section data
   const {
     data: section,
     status: sectionStatus,
@@ -90,6 +94,58 @@ export default function Results({ search, sectionId, router }: ResultsProps) {
     { enabled: !!section }
   );
 
+  // some professors have the same name so we need to get the whole list
+  const normalName: string[] = normalizeName(
+    `${section?.instructor1?.first} ${section?.instructor1?.last}`
+  );
+
+  const { data: instructors } = useQuery<RMPInstructor[]>(
+    ["instructors", sectionId],
+    async () => {
+      const results = await Promise.all(normalName.map((name) => db!.getInstructorsByName(name)));
+      return results.flat();
+    },
+    { enabled: !!section }
+  );
+
+  // from that list, we need to find the one that holds the session -> update the instructor and course rating
+  const [instructor, setInstructor] = useState<RMPInstructor>();
+  const [courseRating, setCourseRating] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (instructors && section) {
+      // when there is only professor that matches the needed name -> set the instructor to that prof
+      // this helps prevent that some of the courses may not be listed in the RMP data but we still want to the prof data
+
+      // however, if there're 2 profs with the same name and the course we're looking for is not listed in either instructor's RMP courses
+      // then we don't know who to return
+      // this will not be a problem when the new RMP data is updated
+      if (instructors.length === 1) {
+        setInstructor(instructors[0]);
+        const rating = db!.getCourseRating(
+          instructors[0]!.instructor_id,
+          `${section.subject}${section.catalogNumber}`
+        );
+        setCourseRating(rating);
+      } else {
+        for (const ins of instructors) {
+          const rating = db!.getCourseRating(
+            ins.instructor_id,
+            `${section.subject}${section.catalogNumber}`
+          );
+          if (rating) {
+            setInstructor(ins);
+            setCourseRating(rating);
+            break;
+          }
+        }
+      }
+    } else {
+      setInstructor(undefined);
+      setCourseRating(null);
+    }
+  }, [instructors, section, db]);
+
   useEffect(() => {
     // Automatically select section if there is only one choice
     if (sections && sections.length == 1) {
@@ -158,6 +214,8 @@ export default function Results({ search, sectionId, router }: ResultsProps) {
                 <SearchResultsContent
                   section={section!} // FIXME: need to actually do something if these are null
                   relatedSections={relatedSections!}
+                  instructor={instructor!}
+                  courseRating={courseRating}
                   loadingSection={sectionStatus === "loading"}
                   handleRelatedSectionClick={handleRelatedSectionClick}
                   error={sectionError}

client/src/components/SearchResults.tsx

@@ -1,4 +1,4 @@
-import type { Grades } from "@utd-grades/db";
+import type { Grades, RMPInstructor } from "@utd-grades/db";
 import { Spin } from "antd";
 import React from "react";
 import styled from "styled-components";
@@ -27,6 +27,8 @@ const Spinner = styled(Spin)`
 
 interface SearchResultsContentProps {
   section: Grades;
+  instructor: RMPInstructor;
+  courseRating: number | null;
   relatedSections: Grades[];
   loadingSection: boolean;
   handleRelatedSectionClick: (search: string, id: number) => void;
@@ -35,17 +37,21 @@ interface SearchResultsContentProps {
 
 export default function SearchResultsContent({
   section,
-  relatedSections,
+  instructor,
+  courseRating,
+  // relatedSections,
   loadingSection,
-  handleRelatedSectionClick,
+  // handleRelatedSectionClick,
   error,
 }: SearchResultsContentProps) {
   if (section) {
     return (
       <SectionContent
         section={section}
-        relatedSections={relatedSections}
-        handleRelatedSectionClick={handleRelatedSectionClick}
+        instructor={instructor}
+        courseRating={courseRating}
+        // relatedSections={relatedSections}
+        // handleRelatedSectionClick={handleRelatedSectionClick}
       />
     );
   } else if (loadingSection) {