Updated PreviewCard to tsx

Don't forget to mention -- when there's no course possible due to filters, the preview card is deselected.

client/.eslintcache

@@ -36,7 +36,7 @@
     "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Admin/Components/AdminReview.tsx": "34",
     "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Admin/Components/Stats.tsx": "35",
     "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Admin/Components/RaffleWinner.tsx": "36",
-    "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Results/Components/PreviewCard.jsx": "37",
+    "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Results/Components/PreviewCard.tsx": "37",
     "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Results/Components/FilteredResult.tsx": "38",
     "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Results/Components/FilterPopup.tsx": "39",
     "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Globals/majors.ts": "40",
@@ -931,7 +931,7 @@
   [
     "220"
   ],
-  "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Results/Components/PreviewCard.jsx",
+  "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Results/Components/PreviewCard.tsx",
   [],
   "/Users/willzhang/Developments/dti/cureviews-stable/client/src/modules/Results/Components/FilteredResult.tsx",
   [

client/src/modules/Results/Components/PreviewCard.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { lastOfferedSems } from 'common/CourseCard';
+
+import Gauges from '../../Course/Components/Gauges';
+import { Review as ReviewType } from 'common';
+import ReviewCard from '../../Course/Components/ReviewCard';
+
+import styles from '../Styles/CoursePreview.module.css';
+import { Class } from 'common';
+
+const Review = ReviewCard;
+
+export const PreviewCard = ({ course }: PreviewCardProps) => {
+  const [id, setId] = useState('');
+  const [rating, setRating] = useState('-');
+  const [diff, setDiff] = useState('-');
+  const [workload, setWorkload] = useState('-');
+  const [topReview, setTopReview] = useState<ReviewType | {}>();
+  const [numReviews, setNumReviews] = useState(0);
+  const [topReviewLikes, setTopReviewLikes] = useState(0);
+
+  useEffect(() => {
+    updateGauges();
+  }, [course]);
+
+  const updateGauges = () => {
+    if (!course) return;
+
+    setId(course._id);
+    setRating(course.classRating ? String(course.classRating) : '-');
+    setDiff(course.classDifficulty ? String(course.classDifficulty) : '-');
+    setWorkload(course.classWorkload ? String(course.classWorkload) : '-');
+    updateTopReview();
+  };
+
+  const updateTopReview = () => {
+    if (!id) return;
+
+    axios
+      .post(`/api/courses/get-reviews`, { courseId: id })
+      .then((response) => {
+        const reviews = response.data.result;
+        if (reviews && reviews.length > 0) {
+          reviews.sort((a: ReviewType, b: ReviewType) =>
+            (a.likes || 0) < (b.likes || 0) ? 1 : -1
+          );
+          setTopReview(reviews[0]);
+          setTopReviewLikes(reviews[0].likes || 0);
+          setNumReviews(reviews.length);
+        } else {
+          setTopReview({});
+          setNumReviews(0);
+        }
+      });
+  };
+
+  if (!course) {
+    // Return fallback if course is undefined
+    return <></>;
+  }
+
+  const offered = lastOfferedSems(course);
+  return (
+    <div>
+      <div>
+        <div className={styles.coursetitle}>
+          <a href={`/course/${course.classSub.toUpperCase()}/${course.classNum}`}>
+            {course.classTitle}
+          </a>
+        </div>
+        <div className={styles.subtitle}>
+          {course.classSub.toUpperCase() + ' ' + course.classNum + ', ' + offered}
+        </div>
+      </div>
+
+      <Gauges
+        overall={parseFloat(rating)}
+        difficulty={parseFloat(diff)}
+        workload={parseFloat(workload)}
+      />
+
+      {numReviews !== 0 && <div className={styles.topreview}>Top Review</div>}
+
+      <div className={styles.columns}>
+        {numReviews !== 0 && (
+          <Review
+            key={(topReview as ReviewType)._id}
+            review={topReview as ReviewType}
+            reportHandler={() => null}
+            isPreview={true}
+            isProfile={false}
+          />
+        )}
+
+        {numReviews !== 0 && numReviews > 1 && (
+          <a className={styles.reviewsbutton} href={`/course/${course.classSub.toUpperCase()}/${course.classNum}`}>
+            See {numReviews} more review{numReviews > 1 ? 's' : ''}
+          </a>
+        )}
+
+        {numReviews === 0 && <div className={styles.noreviews}>No reviews yet</div>}
+        {(numReviews === 0 || numReviews === 1) && (
+          <a className={styles.reviewsbutton} href={`/course/${course.classSub.toUpperCase()}/${course.classNum}`}>
+            Leave a Review
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface PreviewCardProps {
+  course: Class;
+}
+
+export default PreviewCard;

client/src/modules/Results/Components/ResultsDisplay.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import FilteredResult from './FilteredResult';
-import PreviewCard from './PreviewCard.jsx';
+import PreviewCard from './PreviewCard';
 import FilterPopup from './FilterPopup';
 import Loading from '../../Globals/Loading';