Tragic looking comments

frontend/src/api/useComments.ts

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

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

@@ -0,0 +1,20 @@
+'use client';
+import useComments from '@/api/useComments';
+import Comment from '@/components/Comment';
+
+export default function Question({ params }: { params: { courseCode: string, examId: number, questionId: number }}) {
+    const { comments, isLoading, isError } = useComments(params.questionId);
+
+    return (
+        <main>
+            {isLoading && <p>Loading...</p>}
+            {!isError && !isLoading && comments?.map(comment => (
+                <>
+                    <hr />
+                    <Comment comment={comment} />
+                </>
+                ))
+            }
+        </main>
+    );
+}

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

@@ -16,7 +16,7 @@ export default function Exam({ params }: { params: { courseCode: string, examId:
                 <>
                     <hr />
                     <div key={question.questionId}>
-                        <Link href={`/courses/${params.courseCode}/exams/${question.questionId}`}>
+                        <Link href={`/courses/${params.courseCode}/exams/${params.examId}/${question.questionId}`}>
                             <h2>{question.questionType}</h2>
                         </Link>
                         <p>{question.questionText}</p>

frontend/src/components/Comment.tsx

@@ -0,0 +1,11 @@
+import { Comment as IComment } from '@/types';
+
+export default function Comment({ comment }: { comment: IComment }) {
+    return (
+        <div className="ml-5 block max-w-sm p-1 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700" >
+            <h1 className="p-2">(id: {comment.commentId}) | {comment.commentText}</h1>
+            <p className="pl-8 p-2 ">reply</p>
+            {comment.children?.map((c) => <Comment key={c.commentId} comment={c} />)}
+        </div>
+    )
+}

frontend/src/types.ts

@@ -16,4 +16,18 @@ export type Question = {
     questionText: string
     questionType: string
     questionPng: string
+}
+
+export type Comment = {
+    commentId: number
+    parentCommentId: number | null
+    commentText: string
+    commentPNG: string | null
+    isCorrect: boolean
+    isEndorsed: boolean
+    upvotes: number
+    downvotes: number
+    created_at: string
+    updated_at: string
+    children?: Comment[]
 }