Add a filter by course or professor to reviews (#429)

* draft * works * compare roadmap with prev state * Update site/package.json Co-authored-by: Jacob Sommer <[email protected]> * check empty roadmap * new dropdowns * sort alphabetically, include review counts * Update site/src/component/Review/Review.tsx Co-authored-by: Jacob Sommer <[email protected]> * Update site/src/component/Review/Review.tsx Co-authored-by: Jacob Sommer <[email protected]> * prettier * prettier --------- Co-authored-by: Jacob Sommer <[email protected]>
icssc · Feb 22, 2024 · 0ef268c · 0ef268c
1 parent 80436d4
commit 0ef268c
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git a/site/src/component/Review/Review.tsx b/site/src/component/Review/Review.tsx
@@ -25,6 +25,7 @@ const Review: FC<ReviewProps> = (props) => {
   const reviewData = useAppSelector(selectReviews);
   const [voteColors, setVoteColors] = useState([]);
   const [sortingOption, setSortingOption] = useState<SortingOption>(SortingOption.MOST_RECENT);
+  const [filterOption, setFilterOption] = useState('');
   const [showOnlyVerifiedReviews, setShowOnlyVerifiedReviews] = useState(false);
 
   const getColors = async (vote: VoteColorsRequest) => {
@@ -102,6 +103,16 @@ const Review: FC<ReviewProps> = (props) => {
     sortedReviews = reviewData.slice(0);
   }
 
+  if (filterOption.length > 0) {
+    if (props.course) {
+      // filter course reviews by specific professor
+      sortedReviews = sortedReviews.filter((review) => review.professorID === filterOption);
+    } else if (props.professor) {
+      // filter professor reviews by specific course
+      sortedReviews = sortedReviews.filter((review) => review.courseID === filterOption);
+    }
+  }
+
   switch (sortingOption) {
     case SortingOption.MOST_RECENT:
       sortedReviews.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
@@ -118,6 +129,20 @@ const Review: FC<ReviewProps> = (props) => {
       break;
   }
 
+  // calculate frequencies of professors or courses in list of reviews
+  let reviewFreq = new Map<string, number>();
+  if (props.course) {
+    reviewFreq = sortedReviews.reduce(
+      (acc, review) => acc.set(review.professorID, (acc.get(review.professorID) || 0) + 1),
+      reviewFreq,
+    );
+  } else if (props.professor) {
+    reviewFreq = sortedReviews.reduce(
+      (acc, review) => acc.set(review.courseID, (acc.get(review.courseID) || 0) + 1),
+      reviewFreq,
+    );
+  }
+
   const openReviewForm = () => {
     dispatch(setFormStatus(true));
     document.body.style.overflow = 'hidden';
@@ -146,6 +171,58 @@ const Review: FC<ReviewProps> = (props) => {
               value={sortingOption}
               onChange={(_, s) => setSortingOption(s.value as SortingOption)}
             />
+            {props.course && (
+              <Dropdown
+                placeholder="Professor"
+                scrolling
+                selection
+                options={
+                  // include option for filter to be empty
+                  [{ text: 'All Professors', value: '' }].concat(
+                    // map course's instructors to dropdown options
+                    Object.keys(props.course?.instructors)
+                      .map((profID) => {
+                        const name = `${props.course?.instructors[profID].name} (${reviewFreq.get(profID) || 0})`;
+                        return {
+                          text: name,
+                          value: profID,
+                        };
+                      })
+                      .sort((a, b) => a.text.localeCompare(b.text)),
+                  )
+                }
+                value={filterOption}
+                onChange={(_, s) => setFilterOption(s.value as string)}
+              />
+            )}
+            {props.professor && (
+              <Dropdown
+                placeholder="Course"
+                scrolling
+                selection
+                options={
+                  // include option for filter to be empty
+                  [{ text: 'All Courses', value: '' }].concat(
+                    // map professor's courses to dropdown options
+                    Object.keys(props.professor?.courses)
+                      .map((courseID) => {
+                        const name =
+                          props.professor?.courses[courseID].department +
+                          ' ' +
+                          props.professor?.courses[courseID].courseNumber +
+                          ` (${reviewFreq.get(courseID) || 0})`;
+                        return {
+                          text: name,
+                          value: courseID,
+                        };
+                      })
+                      .sort((a, b) => a.text.localeCompare(b.text)),
+                  )
+                }
+                value={filterOption}
+                onChange={(_, s) => setFilterOption(s.value as string)}
+              />
+            )}
             <div id="checkbox">
               <Checkbox
                 label="Show verified reviews only"

diff --git a/site/src/pages/CoursePage/CoursePage.scss b/site/src/pages/CoursePage/CoursePage.scss
@@ -7,7 +7,7 @@
 }
 
 .course-page-section {
-  max-width: 42vw;
+  max-width: 45vw;
   background-color: var(--overlay1);
   border-radius: var(--border-radius);
   padding: 3rem;