From 0061ab5d66e55d67fab4a6df3dc9b66051a491ef Mon Sep 17 00:00:00 2001
From: andrewtan2000 <andrew_tan2000@hotmail.com>
Date: Mon, 26 Aug 2024 18:53:59 +0800
Subject: [PATCH] ES Linting Fixes for Quiz Attempt

---
 app/(main)/quiz/page.tsx | 29 +++++++++++++++++++----------
 service/QuizService.tsx  |  4 ++--
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/(main)/quiz/page.tsx b/app/(main)/quiz/page.tsx
index 4a13084..afb5fca 100644
--- a/app/(main)/quiz/page.tsx
+++ b/app/(main)/quiz/page.tsx
@@ -26,7 +26,7 @@ const QuizPage: React.FC = () => {
 
     const [quiz, setQuiz] = useState<Quiz.ApiResponse | null>(null);
     const [isQuizOngoing, setIsQuizOngoing] = useState<boolean>(true);
-    const [selectedOptions, setSelectedOptions] = useState<{ [key: number]: number | null }>({});
+    const [selectedOptions, setSelectedOptions] = useState<{ [key: number]: number | 0 }>({});
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState<number>(0);
     const [isDisabled, setIsDisabled] = useState(false);
 
@@ -50,9 +50,9 @@ const QuizPage: React.FC = () => {
                 }
                 setQuiz(responseData);
                 // Initialize selectedOptions with keys for each mcq.id set to null
-                const initialSelectedOptions: { [key: number]: number | null } = {};
+                const initialSelectedOptions: { [key: number]: number | 0 } = {};
                 responseData.mcqs.forEach((mcq) => {
-                    initialSelectedOptions[mcq.id] = null;
+                    initialSelectedOptions[mcq.id] = 0;
                 });
                 setSelectedOptions(initialSelectedOptions);
             } catch (error) {
@@ -96,9 +96,9 @@ const QuizPage: React.FC = () => {
                 status: 'abandoned' // Assuming 'status' is a field in your quiz object
             }));
             // Reset selected options
-            const initialSelectedOptions: { [key: number]: number | null } = {};
+            const initialSelectedOptions: { [key: number]: number | 0 } = {};
             quiz.mcqs.forEach((mcq: any) => {
-                initialSelectedOptions[mcq.id] = null;
+                initialSelectedOptions[mcq.id] = 0;
             });
             setSelectedOptions(initialSelectedOptions);
         } catch (error) {
@@ -348,16 +348,25 @@ const QuizPage: React.FC = () => {
                                 <div className="flex flex-wrap gap-2">
                                     {currentQuestionIndex < quiz.mcqs.length - 1 ? (
                                         <Button label="Next Question" onClick={() => {
-                                            submitAttempt(quiz.id, currentQuestionIndex, selectedOptions[currentQuestion.id]);
-                                            handleNextQuestion();
+                                            if (quiz.id !== undefined && selectedOptions[currentQuestion.id] !== null) {
+                                                submitAttempt(quiz.id, currentQuestionIndex + 1, selectedOptions[currentQuestion.id]);
+                                                handleNextQuestion();
+                                            } else {
+                                                console.error("Quiz ID is undefined or selected option is null");
+                                            }
+                                            console.log(`Next question: ${selectedOptions[currentQuestion.id]}`);
                                         }}></Button>
                                     ) : (
                                         <>
                                             <div>
                                                 <p>No more questions in this quiz. Do you want to submit?</p>
-                                                <Button label="Submit Quiz" onClick={() =>
-                                                    submitAttempt(quiz.id, currentQuestionIndex, selectedOptions[currentQuestion.id])
-                                                }></Button>
+                                                <Button label="Submit Quiz" onClick={() => {
+                                                    if (quiz.id !== undefined && selectedOptions[currentQuestion.id] !== null) {
+                                                        submitAttempt(quiz.id, currentQuestionIndex + 1, selectedOptions[currentQuestion.id]);
+                                                    } else {
+                                                        console.error("Quiz ID is undefined or selected option is null");
+                                                    }
+                                                }}></Button>
                                             </div>
                                         </>
                                     )}
diff --git a/service/QuizService.tsx b/service/QuizService.tsx
index 99d0676..6a45f8c 100644
--- a/service/QuizService.tsx
+++ b/service/QuizService.tsx
@@ -53,7 +53,7 @@ export const QuizService = {
     }
   },
 
-  getQuizCompleted: async (): Promise<Quiz.ApiResponse> => {
+  getQuizCompleted: async (): Promise<Quiz.CompletedResponse> => {
     try {
       console.log('Fetching data from API...');
       const response = await fetch(
@@ -65,7 +65,7 @@ export const QuizService = {
           credentials: "include"
         }
       );
-      const responseData: Quiz.ApiResponse = await response.json();
+      const responseData: Quiz.CompletedResponse = await response.json();
       console.log('Data fetched successfully:', responseData);
       return responseData;
     } catch (error) {