stuff ig

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]/course-profile/page.tsx

@@ -9,11 +9,11 @@ export default function CourseProfile({ params }: { params: { courseCode: string
         <main>
             {isLoading && <p>Loading...</p>}
             {!isError && !isLoading && (
-                <div key={course!.coursecode}>
-                    <Link href={`/courses/${course!.coursecode}/course-profile`}>
-                        <h2>{course!.coursecode} | {course!.coursename}</h2>
+                <div key={course!.courseCode}>
+                    <Link href={`/courses/${course!.courseCode}/course-profile`}>
+                        <h2>{course!.courseCode} | {course!.courseName}</h2>
                     </Link>
-                    <p>{course!.coursedescription}</p>
+                    <p>{course!.courseDescription}</p>
                 </div>
             )}
         </main>

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

@@ -9,17 +9,17 @@ export default function Exam({ params }: { params: { courseCode: string, examId:
 
     return (
         <main>
-            <h1>{`${params.courseCode} ${exam?.examtype}`}</h1>
-            <h2>{`${exam?.examyear} Semester ${exam?.examsemester}`}</h2>
+            <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>
+                    <div key={question.questionId}>
+                        <Link href={`/courses/${params.courseCode}/exams/${params.examId}/${question.questionId}`}>
+                            <h2>{question.questionType}</h2>
                         </Link>
-                        <p>{question.questiontext}</p>
+                        <p>{question.questionText}</p>
                     </div>
                 </>
                 ))

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

@@ -15,9 +15,9 @@ export default function Exams({ params }: { params: { courseCode: string }}) {
                     <hr />
                     <div key={exam.examId}>
                         <Link href={`/courses/${params.courseCode}/exams/${exam.examId}`}>
-                            <h2>{exam.examyear} | S{exam.examsemester}</h2>
+                            <h2>{exam.examYear} | S{exam.examSemester}</h2>
                         </Link>
-                        <p>{exam.examtype}</p>
+                        <p>{exam.examType}</p>
                     </div>
                 </>
                 ))

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

@@ -5,15 +5,15 @@ export default function Notes({ params }: { params: { courseCode: string }}) {
     const course: Course = useMemo(() => {
         // query backend here
         return {
-            coursecode: params.courseCode.toUpperCase(),
-            coursename: 'Course Name',
-            coursedescription: 'Some sort of description'
+            courseCode: params.courseCode.toUpperCase(),
+            courseName: 'Course Name',
+            courseDescription: 'Some sort of description'
         }
     }, [params.courseCode])
 
     return (
         <main>
-            <h1>Study material for {course.coursecode}</h1>
+            <h1>Study material for {course.courseCode}</h1>
             There will be some cards here
         </main>
     );

frontend/src/app/courses/page.tsx

@@ -10,11 +10,11 @@ export default function Courses() {
             {!isError && !isLoading && courses?.map(course => (
                 <>
                     <hr />
-                    <div key={course.coursecode}>
-                        <Link href={`/courses/${course.coursecode}/course-profile`}>
-                            <h2>{course.coursecode} | {course.coursename}</h2>
+                    <div key={course.courseCode}>
+                        <Link href={`/courses/${course.courseCode}/course-profile`}>
+                            <h2>{course.courseCode} | {course.courseName}</h2>
                         </Link>
-                        <p>{course.coursedescription}</p>
+                        <p>{course.courseDescription}</p>
                     </div>
                 </>
                 ))

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/components/Navigation.tsx

@@ -247,7 +247,7 @@ export function Navigation(props: React.ComponentPropsWithoutRef<'nav'>) {
     {
       title: `Exams`,
       links: (!isLoading && !isError && !!exams) ? exams?.map((exam) => ({
-        title: `${exam.examyear} S${exam.examsemester}`,
+        title: `${exam.examYear} S${exam.examSemester}`,
         href: `/courses/${courseCode}/exams/${exam.examId}`,
       })) : []
     },

frontend/src/types.ts

@@ -1,19 +1,33 @@
 export type Course = {
-    coursecode: string
-    coursename: string
-    coursedescription: string
+    courseCode: string
+    courseName: string
+    courseDescription: string
 }
 
 export type Exam = {
     examId: number
-    examyear: number
-    examsemester: number
-    examtype: string
+    examYear: number
+    examSemester: number
+    examType: string
 }
 
 export type Question = {
-    questionid: number
-    questiontext: string
-    questiontype: string
-    questionpng: string
+    questionId: number
+    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[]
 }