Merge pull request #84 from stamford-syntax-club/fe/add-term-sec

Author: chinathaip

.github/workflows/dev.yaml

@@ -32,9 +32,8 @@ jobs:
                   node-version: 18
 
             - name: Setup pnpm
-              uses: pnpm/action-setup@v2.2.2
+              uses: pnpm/action-setup@v4
               with:
-                  version: 8
                   run_install: false
 
             - name: Install turbo

.github/workflows/test.yaml

@@ -15,9 +15,8 @@ jobs:
               uses: actions/checkout@v3
 
             - name: Setup pnpm
-              uses: pnpm/action-setup@v2.2.2
+              uses: pnpm/action-setup@v4
               with:
-                  version: 8
                   run_install: false
 
             - name: Install turbo

apps/web/app/courses/[courseCode]/page.tsx

@@ -167,10 +167,12 @@ export default function CourseReview({ params }: CourseReviewProps): JSX.Element
 								<MyReviewCard
 									key={`my_review_card_${review.id}`}
 									review={review}
-									onEditReview={(id, academicYear, description, rating) =>
+									onEditReview={(id, section, term, academicYear, description, rating) =>
 										apiClient
 											.submitEditedReview(
 												id,
+												section,
+												term,
 												academicYear,
 												description,
 												rating,
@@ -218,9 +220,16 @@ export default function CourseReview({ params }: CourseReviewProps): JSX.Element
 			</Title>
 			<WriteReviewForm
 				courseCode={params.courseCode}
-				onSubmit={(academicYear, description, rating) =>
+				onSubmit={(section, term, academicYear, description, rating) =>
 					apiClient
-						.submitNewReview(academicYear, description, rating, sessionData?.access_token || "")
+						.submitNewReview(
+							section,
+							term,
+							academicYear,
+							description,
+							rating,
+							sessionData?.access_token || ""
+						)
 						.then((result) => {
 							handleSubmitResponse(result);
 							return result.color === "green";

apps/web/components/core/application-navbar.tsx

@@ -18,16 +18,16 @@ export const navItems = [
 		href: "/my-reviews",
 		icon: <IconHistory />
 	},
+	{
+		label: "Guidelines",
+		href: "/guidelines",
+		icon: <IconCheckbox />
+	},
 	{
 		label: "Resources",
 		href: "https://center.stamford.dev/resources",
 		newTab: true,
 		icon: <IconBooks />
-	},
-	{
-		label: "Guidelines",
-		href: "/guidelines",
-		icon: <IconCheckbox />
 	}
 ];
 

apps/web/components/ui/review-card.tsx

@@ -20,7 +20,14 @@ import WriteReviewForm from "./write-review-form";
 
 interface ReviewCardProps {
 	review: Review;
-	onEditReview?: (id: number, academicYear: string, description: string, rating: number) => void;
+	onEditReview?: (
+		id: number,
+		section: string,
+		term: string,
+		academicYear: string,
+		description: string,
+		rating: number
+	) => void;
 	onDeleteReview?: (id: number) => void;
 }
 
@@ -71,7 +78,9 @@ export function ReviewCard({ review }: ReviewCardProps): JSX.Element {
 				<Flex direction="column" justify="flex-start" ml="3" gap="4" w="100%">
 					<Rating size="md" value={review.rating} fractions={2} defaultValue={0} readOnly />
 					<Text fw={800} size="sm">
-						Academic Year: {review.academicYear}
+						Academic Year:{" "}
+						{review.term ? `${review.term}/${review.academicYear}` : `${review.academicYear}`}
+						{review.section && ` - Section: ${review.section}`}
 					</Text>
 					<Spoiler maxHeight={75} showLabel="Show more" hideLabel="Hide">
 						<TypographyStylesProvider mt="md">
@@ -131,7 +140,9 @@ export function MyReviewCard({ review, onEditReview, onDeleteReview }: ReviewCar
 
 						<Rating size="md" value={review.rating} fractions={2} defaultValue={0} readOnly />
 						<Text fw={800} size="md">
-							Academic Year: {review.academicYear}
+							Academic Year:{" "}
+							{review.term ? `${review.term}/${review.academicYear}` : `${review.academicYear}`}
+							{review.section && ` - Section: ${review.section}`}
 						</Text>
 						<Spoiler maxHeight={75} showLabel="Show more" hideLabel="Hide">
 							<TypographyStylesProvider mt="sm">
@@ -169,9 +180,9 @@ export function MyReviewCard({ review, onEditReview, onDeleteReview }: ReviewCar
 			>
 				{/* Modal content */}
 				<WriteReviewForm
-					onSubmit={(academicYear, description, rating) => {
+					onSubmit={(section, term, academicYear, description, rating) => {
 						// when user submit their edited review
-						if (onEditReview) onEditReview(review.id, academicYear, description, rating);
+						if (onEditReview) onEditReview(review.id, section, term, academicYear, description, rating);
 						closeEdit();
 						return Promise.resolve(true);
 					}}

apps/web/components/ui/write-review-form.tsx

@@ -10,17 +10,15 @@ import { MarkdownEditor } from "@components/ui/markdown-editor";
 import type { Review } from "types/reviews";
 import Link from "next/link";
 
-const academicYearOptions = [
-	{ value: "2020", label: "2020" },
-	{ value: "2021", label: "2021" },
-	{ value: "2022", label: "2022" },
-	{ value: "2023", label: "2023" },
-	{ value: "2024", label: "2024" }
-];
-
 interface WriteReviewFormProps {
 	courseCode?: string;
-	onSubmit: (academicYear: string, description: string, rating: number) => Promise<boolean>;
+	onSubmit: (
+		section: string,
+		term: string,
+		academicYear: string,
+		description: string,
+		rating: number
+	) => Promise<boolean>;
 	previousReview?: Review;
 }
 
@@ -33,7 +31,7 @@ const reviewGuidelines = [
 	{
 		text: (
 			<div>
-				Kindly refrain from mentioning names and write your reviews with respect.{" "}
+				Constructive criticism is encouraged.{" "}
 				<span className="underline">
 					<Link href="/guidelines" target="_blank">
 						Click here to learn more
@@ -48,6 +46,8 @@ const reviewGuidelines = [
 
 // Keys for local storage
 const reviewFormKeys = (courseCode: string) => ({
+	sectionKey: `reviewFormSection_${courseCode}`,
+	termKey: `reviewFormTerm_${courseCode}`,
 	academicYearKey: `reviewFormAcademicYear_${courseCode}`,
 	ratingKey: `reviewFormRating_${courseCode}`,
 	descriptionKey: `reviewFormDescription_${courseCode}`
@@ -57,6 +57,8 @@ export default function WriteReviewForm({ courseCode, onSubmit, previousReview }
 	const reviewKeys = useMemo(() => reviewFormKeys(courseCode || ""), [courseCode]);
 	const [academicYear, setAcademicYear] = useState<string | null>(previousReview?.academicYear || null);
 	const [rating, setRating] = useState(previousReview?.rating || 0);
+	const [term, setTerm] = useState<string | null>(null);
+	const [section, setSection] = useState<string | null>(null);
 
 	const markdownEditor = useEditor({
 		extensions: [
@@ -78,10 +80,14 @@ export default function WriteReviewForm({ courseCode, onSubmit, previousReview }
 
 	useEffect(() => {
 		if (!previousReview) {
+			const savedSection = localStorage.getItem(reviewKeys.sectionKey);
+			const savedTerm = localStorage.getItem(reviewKeys.termKey);
 			const savedAcademicYear = localStorage.getItem(reviewKeys.academicYearKey);
 			const savedRating = localStorage.getItem(reviewKeys.ratingKey);
 			const savedDescription = localStorage.getItem(reviewKeys.descriptionKey);
 
+			if (savedSection) setSection(savedSection);
+			if (savedTerm) setTerm(savedTerm);
 			if (savedAcademicYear) setAcademicYear(savedAcademicYear);
 			if (savedRating) setRating(parseFloat(savedRating));
 			if (savedDescription && markdownEditor) markdownEditor.commands.setContent(savedDescription);
@@ -91,6 +97,8 @@ export default function WriteReviewForm({ courseCode, onSubmit, previousReview }
 	useEffect(() => {
 		if (rating) localStorage.setItem(reviewKeys.ratingKey, rating.toString());
 		if (academicYear) localStorage.setItem(reviewKeys.academicYearKey, academicYear);
+		if (section) localStorage.setItem(reviewKeys.sectionKey, section);
+		if (term) localStorage.setItem(reviewKeys.termKey, term);
 		if (markdownEditor) {
 			const saveMarkdown = () => {
 				localStorage.setItem(reviewKeys.descriptionKey, markdownEditor.storage.markdown.getMarkdown());
@@ -100,29 +108,44 @@ export default function WriteReviewForm({ courseCode, onSubmit, previousReview }
 				markdownEditor.off("update", saveMarkdown);
 			};
 		}
-	}, [markdownEditor, academicYear, reviewKeys, rating]);
+	}, [markdownEditor, academicYear, reviewKeys, rating, section, term]);
 
 	const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
 		e.preventDefault();
 		const currentDescription = markdownEditor?.storage.markdown.getMarkdown() || "";
 
-		if (!academicYear || !currentDescription || !rating) {
+		const missingFields: string[] = [];
+		const fields = [
+			{ name: "academicYear", label: "academic year" },
+			{ name: "currentDescription", label: "review descriptions" },
+			{ name: "rating", label: "ratings" },
+			{ name: "section", label: "section" },
+			{ name: "term", label: "term" }
+		];
+
+		fields.forEach((field) => {
+			if (!eval(field.name)) {
+				missingFields.push(field.label);
+			}
+		});
+
+		if (missingFields.length > 0) {
 			notifications.show({
 				title: "Hold on! Your review still contains some missing fields",
 				color: "red",
-				message:
-					"Make sure you have filled all the fields such as academic year, ratings, and review descriptions",
+				message: `Please fill in the following fields: ${missingFields.join(", ")}`,
 				autoClose: 5000
 			});
 			return;
 		}
-
-		onSubmit(academicYear, currentDescription, rating).then((success) => {
+		onSubmit(section!!, term!!, academicYear!!, currentDescription, rating).then((success) => {
 			if (success) {
 				resetForm();
 				localStorage.removeItem(reviewKeys.academicYearKey);
 				localStorage.removeItem(reviewKeys.ratingKey);
 				localStorage.removeItem(reviewKeys.descriptionKey);
+				localStorage.removeItem(reviewKeys.termKey);
+				localStorage.removeItem(reviewKeys.sectionKey);
 			}
 		});
 	};
@@ -139,13 +162,30 @@ export default function WriteReviewForm({ courseCode, onSubmit, previousReview }
 			))}
 
 			<Paper w="100%" h="100%">
-				<Flex direction="row" gap="sm" my="sm">
+				<Flex align="end" wrap="wrap" direction="row" gap="xs" my="sm">
+					<Select
+						className="w-[100px]"
+						data={["1", "2", "3", "4", "5"]}
+						value={section}
+						label="Section"
+						onChange={setSection}
+						placeholder="Section"
+					/>
+					<Select
+						className="w-[100px]"
+						data={["1", "2", "3"]}
+						value={term}
+						label="Term"
+						onChange={setTerm}
+						placeholder="Term"
+					/>
 					<Select
-						data={academicYearOptions}
+						className="w-[100px]"
+						data={["2021", "2022", "2023", "2024", "2025"]}
 						value={academicYear}
-						defaultSearchValue={academicYear || undefined}
+						label="Year"
 						onChange={setAcademicYear}
-						placeholder="Academic year"
+						placeholder="Year"
 					/>
 					<Rating size="lg" defaultValue={0} fractions={2} value={rating} onChange={setRating} />
 				</Flex>

apps/web/lib/api/api.ts

@@ -82,6 +82,8 @@ export default class CourseComposeAPIClient {
 	}
 
 	async submitNewReview(
+		section: string,
+		term: string,
 		academicYear: string,
 		description: string,
 		rating: number,
@@ -90,6 +92,8 @@ export default class CourseComposeAPIClient {
 		const data = await fetch(this.reviewEndpoint, {
 			method: "POST",
 			body: JSON.stringify({
+				section: parseInt(section),
+				term: parseInt(term),
 				academic_year: parseInt(academicYear),
 				description,
 				rating
@@ -143,6 +147,8 @@ export default class CourseComposeAPIClient {
 
 	async submitEditedReview(
 		id: number,
+		section: string,
+		term: string,
 		academicYear: string,
 		description: string,
 		rating: number,
@@ -152,6 +158,8 @@ export default class CourseComposeAPIClient {
 			method: "PUT",
 			body: JSON.stringify({
 				id,
+				section: parseInt(section),
+				term: parseInt(term),
 				academic_year: parseInt(academicYear),
 				description,
 				rating

apps/web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "web",
-	"version": "1.2.1",
+	"version": "1.2.2",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --turbo",

apps/web/types/reviews.ts

@@ -3,6 +3,8 @@ export interface Review {
 	academicYear: string;
 	description: string;
 	isOwner: boolean;
+	term: number;
+	section: number;
 	rating: number;
 	status: string;
 	rejectedReason: string;