Added frontend exams fetching

backend/routes/routes.ts

@@ -53,8 +53,8 @@ router.get('/questions/:questionId', async (req: Request, res: Response) => {
     res.status(200).json(nest(question.rows));
 });
 
-// Exam by ID
-router.get('/exams/:examId', async (req: Request, res: Response) => {
+// Exam questions by exam ID
+router.get('/exams/:examId/questions', async (req: Request, res: Response) => {
     const examID = req.params.examId;
     const exam = await db.query(`
     SELECT questionID, questionText, questionType, questionpng
@@ -64,6 +64,17 @@ router.get('/exams/:examId', async (req: Request, res: Response) => {
     res.status(200).json(exam.rows);
 });
 
+// Exam by ID
+router.get('/exams/:examId', async (req: Request, res: Response) => {
+    const examID = req.params.examId;
+    const exams = await db.query(`
+    SELECT examID, examYear, examSemester, examType
+    FROM exams
+    WHERE exams.examID = $1
+    `, [examID]);
+    res.status(200).json(exams.rows[0]);
+});
+
 // A course's exams by code
 router.get('/courses/:courseCode/exams', async (req: Request, res: Response) => {
     const courseCode = req.params.courseCode;

frontend/src/api/useExams.ts

@@ -0,0 +1,17 @@
+'use client'
+import useSWR, { Fetcher } from 'swr';
+import { Exam } from '@/types';
+
+const ENDPOINT = `${process.env.API_URL}/api/courses/`;
+
+const fetcher: Fetcher<Exam[], string> = (...args) => fetch(...args).then(res => res.json())
+
+export default function useExams(courseCode: string) {
+    const { data, error, isLoading } = useSWR(ENDPOINT + courseCode + '/exams', fetcher)
+
+    return {
+        exams: data,
+        isLoading,
+        isError: error
+    }
+}

frontend/src/app/courses/[courseCode]/exams/page.tsx

@@ -1,20 +1,27 @@
-import { useMemo } from 'react';
-import { Course } from '@/types';
+'use client'
+import useExams from '@/api/useExams';
+import Link from 'next/link';
 
 export default function Exams({ params }: { params: { courseCode: string }}) {
-    const course: Course = useMemo(() => {
-        // query backend here
-        return {
-            coursecode: params.courseCode.toUpperCase(),
-            coursename: 'Course Name',
-            coursedescription: 'Some sort of description'
-        }
-    }, [params.courseCode])
+    const { exams, isLoading, isError } = useExams(params.courseCode);
 
     return (
         <main>
-            <h1>Exams for {course.coursecode}</h1>
+            <h1>Exams for {params.courseCode}</h1>
             There will be some cards here
+            {isLoading && <p>Loading...</p>}
+            {!isError && !isLoading && exams?.map(exam => (
+                <>
+                    <hr />
+                    <div key={exam.examid}>
+                        <Link href={`/courses/${params.courseCode}/exams/${exam.examid}`}>
+                            <h2>{exam.examyear} | S{exam.examsemester}</h2>
+                        </Link>
+                        <p>{exam.examtype}</p>
+                    </div>
+                </>
+                ))
+            }
         </main>
     );
 }

frontend/src/components/Navigation.tsx

@@ -11,6 +11,7 @@ import { useIsInsideMobileNavigation } from '@/components/MobileNavigation'
 import { useSectionStore } from '@/components/SectionProvider'
 import { Tag } from '@/components/Tag'
 import { remToPx } from '@/lib/remToPx'
+import useExams from '@/api/useExams';
 
 interface NavGroup {
   title: string
@@ -239,18 +240,18 @@ export const navigation: Array<NavGroup> = [
 ]
 
 export function Navigation(props: React.ComponentPropsWithoutRef<'nav'>) {
-  const {courseCode} = useParams<{courseCode: string}>()
+  const { courseCode } = useParams<{courseCode: string}>()
+  const { exams, isLoading, isError } = useExams(courseCode);
 
   const sideNavigation: Array<NavGroup> = useMemo(() => [
     {
       title: `Exams`,
-      links: [
-        { title: '2023 S1', href: `/courses/${courseCode}/exams/1` },
-        { title: '2022 S1', href: `/courses/${courseCode}/exams/2` },
-        { title: '2021 S1', href: `/courses/${courseCode}/exams/3` },
-      ],
+      links: (!isLoading && !isError && !!exams) ? exams?.map((exam) => ({
+        title: `${exam.examyear} S${exam.examsemester}`,
+        href: `/courses/${courseCode}/exams/${exam.examid}`,
+      })) : []
     },
-  ], [courseCode])
+  ], [courseCode, exams, isLoading, isError])
 
   return (
     <nav {...props}>

frontend/src/types.ts

@@ -2,4 +2,11 @@ export type Course = {
     coursecode: string
     coursename: string
     coursedescription: string
+}
+
+export type Exam = {
+    examid: number
+    examyear: number
+    examsemester: number
+    examtype: string
 }