Add "My Ratings" Page

apps/web/src/app/myratings/page.tsx

@@ -1,27 +1,42 @@
-import RatingCard from "@/components/shared/RatingCard";
+import { AdvisorRating, CourseRating } from "@/components/shared/RatingCard";
 import { Button } from "@/components/ui/button";
 import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { currentUser } from "@clerk/nextjs/server";
+import { getMyRatings } from "db/queries";
+import { redirect } from "next/navigation";
 
 export default async function Page() {
-	// const ratings = await getMyRatings(userID);
+	const user = await currentUser();
+
+	if (!user || !user.id) {
+		return redirect("/sign-in");
+	}
+
+	const { advisors, courses } = await getMyRatings(user.id);
 
 	return (
-		<div className="mx-8 mt-20 pt-8">
+		<div className="mx-8 mt-20 w-full pt-8">
 			<h1 className="mb-16 text-center font-serif text-5xl font-bold">
 				My Ratings
 			</h1>
-			<div>
+			<div className="text-left">
 				<h2 className="mb-4 px-8 text-4xl font-bold">
-					Professor Ratings
+					Advisor Ratings
 				</h2>
 				<div className="grid grid-cols-1 gap-4 overflow-x-scroll p-8 md:grid-cols-2 lg:grid-cols-3">
-					<RatingCard id="1" />
-					<RatingCard id="2" />
-					<RatingCard id="3" />
-					<RatingCard id="4" />
-					<RatingCard id="5" />
+					{advisors.map((a) => (
+						<AdvisorRating advisor={a} key={a.id} />
+					))}
 				</div>
 			</div>
+			{/* <div className="text-left">
+				<h2 className="mb-4 px-8 text-4xl font-bold">Course Ratings</h2>
+				<div className="grid grid-cols-1 gap-4 overflow-x-scroll p-8 md:grid-cols-2 lg:grid-cols-3">
+					{courses.map((c) => (
+						<CourseRating course={c} />
+					))}
+				</div>
+			</div> */}
 		</div>
 	);
 }

apps/web/src/components/shared/Navbar.tsx

@@ -25,6 +25,7 @@ export default function Navbar() {
 					<Link href={"https://acmutsa.org/"}>ACM</Link>
 					<Link href={"/about"}>About Us</Link>
 					<Link href={"/policy"}>Policies</Link>
+					<Link href={"/myratings"}>My Ratings</Link>
 					<Suspense
 						fallback={
 							<Skeleton className="h-10 w-10 rounded-full" />

apps/web/src/components/shared/RatingCard.tsx

@@ -8,41 +8,110 @@ import {
 	CardTitle,
 } from "../ui/card";
 import { Button } from "../ui/button";
+import NewBookScoreDial from "./NewBookScoreDial";
+import { StarFilledIcon, StarIcon } from "@radix-ui/react-icons";
 
-type RatingCardProps = {
+interface CourseRatingProps {
 	id: string;
-};
+	content: string;
+	createdAt: Date;
+	ratingValue: number;
+	title: string;
+}
+export function CourseRating({
+	course: { id, title, content, createdAt, ratingValue },
+}: {
+	course: CourseRatingProps;
+}) {
+	return (
+		<Card className="min-w-[32ch] max-w-[64ch] transition-shadow duration-200 hover:shadow-xl">
+			<CardHeader>
+				<div className="flex items-center justify-between">
+					<Link href={`/myratings/${id}`}>
+						<CardTitle>{title}</CardTitle>
+					</Link>
+					<span
+						className="inline-flex items-center text-amber-400"
+						aria-hidden="true"
+					>
+						<NewBookScoreDial
+							score={ratingValue}
+						></NewBookScoreDial>
+					</span>
+				</div>
+			</CardHeader>
+			<CardContent>
+				<p>{content}</p>
+			</CardContent>
+			<CardFooter>
+				<div className="flex w-full items-center justify-end">
+					{/* <Link href={`/myratings/${id}/edit`}>
+						<Button variant="outline">Edit</Button>
+					</Link> */}
+					<p className="text-sm italic text-gray-500">
+						{createdAt.toDateString()}
+					</p>
+				</div>
+			</CardFooter>
+		</Card>
+	);
+}
 
-export default function RatingCard({ id }: RatingCardProps) {
+interface AdvisorRatingProps {
+	id: number;
+	content: string | null;
+	createdAt: Date;
+	ratingValue: number;
+	advisor: {
+		name: string;
+	};
+}
+export function AdvisorRating({
+	advisor: {
+		id,
+		content,
+		createdAt,
+		ratingValue,
+		advisor: { name },
+	},
+}: {
+	advisor: AdvisorRatingProps;
+}) {
 	return (
 		<Card className="min-w-[32ch] max-w-[64ch] transition-shadow duration-200 hover:shadow-xl">
 			<CardHeader>
 				<div className="flex items-center justify-between">
 					<Link href={`/myratings/${id}`}>
-						<CardTitle>Course Title</CardTitle>
+						<CardTitle>{name}</CardTitle>
 					</Link>
 					<span
-						className="inline-flex items-center text-amber-500"
+						className="inline-flex items-center text-utsa-blue"
 						aria-hidden="true"
 					>
-						{Array.from({ length: 5 }).map((_, index) => (
-							<Star key={index} size={16} />
+						{Array.from({
+							length: Math.floor(ratingValue),
+						}).map((i, _) => (
+							<StarFilledIcon width={24} />
+						))}
+						{Array.from({
+							length: Math.ceil(5 - ratingValue),
+						}).map((i, _) => (
+							<StarIcon width={24} />
 						))}
 					</span>
 				</div>
 			</CardHeader>
 			<CardContent>
-				<p>
-					Lorem ipsum dolor sit amet consectetur adipisicing elit.
-					Quisquam, quos.
-				</p>
+				<p>{content}</p>
 			</CardContent>
 			<CardFooter>
-				<div className="flex w-full items-center justify-between">
-					<Link href={`/myratings/${id}/edit`}>
+				<div className="flex w-full items-center justify-end">
+					{/* <Link href={`/myratings/${id}/edit`}>
 						<Button variant="outline">Edit</Button>
-					</Link>
-					<p className="text-sm italic text-gray-500">11/11/11</p>
+					</Link> */}
+					<p className="text-sm italic text-gray-500">
+						{createdAt.toDateString()}
+					</p>
 				</div>
 			</CardFooter>
 		</Card>

packages/db/queries.ts

@@ -1,6 +1,11 @@
 import { db } from "./index";
 import { eq, sql } from "drizzle-orm";
-import { courses, instructors, ratings } from "./schema";
+import {
+	advisorRatings,
+	courseInstructorRatings,
+	courses,
+	instructors,
+} from "./schema";
 import { type CourseScrapeData } from "./types";
 
 export async function insertCourses(courseList: CourseScrapeData[]) {
@@ -62,16 +67,26 @@ export async function insertCourses(courseList: CourseScrapeData[]) {
 			.returning({ title: courses.title, crn: courses.crn });
 
 		console.log(
-			`[Scraper] [Completed] ${dbCourse[0].title} with crn ${dbCourse[0].crn} for instuctor ID ${instr_id}`,
+			`[Scraper] [Completed] ${dbCourse[0].title} with crn ${dbCourse[0].crn} for instructor ID ${instr_id}`,
 		);
 	}
 }
 
 export async function getMyRatings(userID: string) {
-	const myRatings = await db.query.ratings.findMany({
-		where: eq(ratings.authorID, userID),
+	const advisors = await db.query.advisorRatings.findMany({
+		where: eq(advisorRatings.authorID, userID),
+		with: {
+			advisor: {
+				columns: {
+					name: true,
+				},
+			},
+		},
 	});
-	return myRatings;
+	const courses = await db.query.courseInstructorRatings.findMany({
+		where: eq(courseInstructorRatings.authorID, userID),
+	});
+	return { advisors, courses };
 }
 
 export async function clearCourses() {