Dev-328: View previous semesters offered

backend/config/urls.py

@@ -54,6 +54,7 @@
     path("requirement_info/", requirements.requirement_info, name="requirement_info"),
     path("course/details/", details.course_details, name="course_details"),
     path("course/comments/", details.course_comments_view, name="course_comments"),
+    path("course/terms/", details.course_terms, name="course_terms"),
     path("upload/", upload.upload_file, name="upload_file"),
     path("almost_completed/", almost_completed_api.almost_completed, name="almost_completed"),
     path("program_details/<str:code>/", program_details_api.program_details, name="program_details"),

backend/hoagieplan/api/dashboard/details.py

@@ -218,3 +218,20 @@ def course_comments_view(request):
         return JsonResponse({"error": "Course not found"}, status=404)
 
     return JsonResponse(comments)
+
+
+@api_view(["GET"])
+def course_terms(request):
+    """API endpoint for course terms."""
+    course_id = request.GET.get("course_id", "")
+    if not course_id:
+        return JsonResponse({"error": "Missing course_id parameter"}, status=400)
+    guids = (
+        Course.objects.filter(course_id=course_id)
+        .values_list("guid", flat=True)
+        .order_by("-guid")
+    )
+    terms = [guid[:4] for guid in guids if guid] 
+    return JsonResponse({"terms": terms})
+
+

frontend/components/DashboardSearchItem/DashboardSearchItem.module.css

@@ -104,3 +104,13 @@
 	outline: none;
 	box-shadow: 0 0 0 2px rgba(9, 62, 112, 0.3);
 }
+
+.prevTerms {
+	margin-top: 4px;
+	font-size: 0.75rem;
+	color: #6b7280;
+	font-style: italic;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

frontend/components/DashboardSearchItem/DashboardSearchItem.tsx

@@ -1,7 +1,9 @@
 import type { FC, ReactNode } from 'react';
+import { useEffect, useState } from 'react'; // to store the value of previous terms the course was offered in
 
 import type { Course } from '@/types';
 import { getRatingBackground } from '@/utils/ratingColors';
+import { termsInverse } from '@/utils/terms';
 
 import styles from './DashboardSearchItem.module.css';
 
@@ -22,6 +24,27 @@ export const DashboardSearchItem: FC<DashboardSearchItemProps> = ({
 		}
 	};
 
+	const [prevTerms, setPrevTerms] = useState<string[]>([]);
+
+	useEffect(() => {
+		// to display previous terms the course was offered in
+		if (!course.guid) {
+			return;
+		}
+		const courseId = course.guid.slice(4);
+		const currentTermCode = course.guid.slice(0, 4);
+		fetch(`/api/hoagie/course/terms/?course_id=${courseId}`)
+			.then((res) => res.json())
+			.then((data: { terms: string[] }) => {
+				const prior = data.terms
+					.filter((code) => code <= currentTermCode)
+					.map((code) => termsInverse[code]) // convert term codes to readable format
+					.filter(Boolean);
+				setPrevTerms(prior);
+			})
+			.catch(console.error);
+	}, [course.guid]);
+
 	return (
 		<div className={styles.card} onClick={handleClick}>
 			<div className={styles.content}>
@@ -36,6 +59,7 @@ export const DashboardSearchItem: FC<DashboardSearchItemProps> = ({
 						</div>
 					)}
 				</div>
+				{prevTerms.length > 0 && <div className={styles.prevTerms}>{prevTerms.join(', ')}</div>}
 				{children && <div className={styles.chipContainer}>{children}</div>}
 			</div>
 		</div>