Added frontend exam & questions fetching

frontend/src/api/useExam.ts

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

frontend/src/api/useQuestions.ts

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

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

@@ -1,21 +1,29 @@
-import { useMemo } from 'react';
+'use client'
+import useExam from '@/api/useExam';
+import useQuestions from '@/api/useQuestions';
+import Link from 'next/link';
 
 export default function Exam({ params }: { params: { courseCode: string, examId: number }}) {
-    const exam = useMemo(() => {
-        // query backend here
-        return {
-            examid: params.examId,
-            examyear: 2023,
-            examsemester: 1,
-            examtype: 'Final'
-        }
-    }, [params.examId])
+    const { exam, isLoading, isError } = useExam(params.examId);
+    const { questions, isLoading: isLoadingQuestions, isError: isErrorQuestions } = useQuestions(params.examId);
 
     return (
         <main>
-            <h1>{`${params.courseCode} ${exam.examtype}`}</h1>
-            <h2>{`${exam.examyear} Semester ${exam.examsemester}`}</h2>
-            There will be some questions here
+            <h1>{`${params.courseCode} ${exam?.examtype}`}</h1>
+            <h2>{`${exam?.examyear} Semester ${exam?.examsemester}`}</h2>
+            {isLoadingQuestions && <p>Loading...</p>}
+            {!isErrorQuestions && !isLoadingQuestions && questions?.map(question => (
+                <>
+                    <hr />
+                    <div key={question.questionid}>
+                        <Link href={`/courses/${params.courseCode}/exams/${question.questionid}`}>
+                            <h2>{question.questiontype}</h2>
+                        </Link>
+                        <p>{question.questiontext}</p>
+                    </div>
+                </>
+                ))
+            }
         </main>
     );
 }

frontend/src/types.ts

@@ -9,4 +9,11 @@ export type Exam = {
     examyear: number
     examsemester: number
     examtype: string
+}
+
+export type Question = {
+    questionid: number
+    questiontext: string
+    questiontype: string
+    questionpng: string
 }