From b90d57ad84635ad4f1883a30f980f0ce192cec4f Mon Sep 17 00:00:00 2001
From: andrewtan2000 <andrew_tan2000@hotmail.com>
Date: Tue, 6 Aug 2024 22:43:09 +0800
Subject: [PATCH] use fetch in favour of axios

---
 .env                     |  2 +-
 app/(main)/quiz/page.tsx | 29 +++++++++++++----------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/.env b/.env
index e21a844..4edc870 100644
--- a/.env
+++ b/.env
@@ -4,7 +4,7 @@ NEXT_PUBLIC_IDP_AuthorizeEndpoint = $NEXT_PUBLIC_COGNITO_URL/oauth2/authorize
 NEXT_PUBLIC_IDP_Tokendpoint = $NEXT_PUBLIC_COGNITO_URL/oauth2/token
 NEXT_PUBLIC_QUEMISTRY_DOMAIN =https://dkraju438qs82.cloudfront.net
 NEXT_PUBLIC_RedirectUrl = $NEXT_PUBLIC_QUEMISTRY_DOMAIN/auth/google
-NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL=https://dummyUrl
+NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL=http://localhost:81/v1
 NEXT_PUBLIC_QUEMISTRY_AUTH_URL = $NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL/auth
 NEXT_PUBLIC_QUEMISTRY_QUESTIONS_URL = $NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL/questions
 NEXT_PUBLIC_QUEMISTRY_USER_URL = $NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL/user
diff --git a/app/(main)/quiz/page.tsx b/app/(main)/quiz/page.tsx
index 6024620..268c3ff 100644
--- a/app/(main)/quiz/page.tsx
+++ b/app/(main)/quiz/page.tsx
@@ -1,9 +1,7 @@
-// app/quiz/page.tsx
 'use client';
 
 import React, { useEffect, useState } from 'react';
 import { Button } from 'primereact/button';
-import axios from 'axios';
 
 interface Option {
   no: number;
@@ -56,24 +54,21 @@ const QuizPage: React.FC = () => {
     const fetchData = async () => {
       try {
         console.log('Fetching data from API...');
-        const response = await axios.get<ApiResponse>(
-          'http://localhost:80/v1/quizzes/2',
+        const response = await fetch(
+          'http://localhost:80/v1/quizzes/2?pageNumber=0&pageSize=60',
           {
-            params: {
-              pageNumber: 0,
-              pageSize: 60,
-            },
             headers: {
               'x-user-id': '12asd',
             },
           }
         );
-        console.log('Data fetched successfully:', response.data);
-        setData(response.data);
+        const responseData: ApiResponse = await response.json();
+        console.log('Data fetched successfully:', responseData);
+        setData(responseData);
 
         // Initialize selectedOptions with keys for each mcq.id set to null
         const initialSelectedOptions: { [key: number]: number | null } = {};
-        response.data.mcqs.forEach((mcq) => {
+        responseData.mcqs.forEach((mcq) => {
           initialSelectedOptions[mcq.id] = null;
         });
         setSelectedOptions(initialSelectedOptions);
@@ -87,15 +82,17 @@ const QuizPage: React.FC = () => {
 
   const submitAttempt = async (mcqId: number) => {
     try {
-      await axios.put(
+      await fetch(
         `http://localhost/v1/quizzes/2/mcqs/${mcqId}/attempt`,
         {
-          attempt: 1,
-        },
-        {
+          method: 'PUT',
           headers: {
+            'Content-Type': 'application/json',
             'x-user-id': '12asd',
           },
+          body: JSON.stringify({
+            attempt: 1,
+          }),
         }
       );
       console.log(`Attempt submitted for MCQ ID: ${mcqId}`);
@@ -166,7 +163,7 @@ const QuizPage: React.FC = () => {
                     <>
                       <div>
                         <p>No more questions in this quiz. Do you want to submit?</p>
-                        <Button label="Submit Quiz" onClick={submitAttempt}></Button>
+                        <Button label="Submit Quiz" onClick={() => submitAttempt(currentQuestion.id)}></Button>
                       </div>
                     </>
                   )}