Merge pull request #940 from bounswe/FRONTEND-924

Frontend 924: implementation of resume/start
bounswe · Dec 16, 2024 · 5da9c0c · 5da9c0c
2 parents 8a14c16 + 065811b
commit 5da9c0c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 39 deletions.
diff --git a/frontend/src/pages/quiz-details.tsx b/frontend/src/pages/quiz-details.tsx
@@ -44,7 +44,7 @@ export default function QuizDetails() {
     const [isLiked, setIsLiked] = useState(quizData?.is_liked);
     const [likes, setLikes] = useState(quizData?.like_count);
     const [isBookmarked, setIsBookmarked] = useState(quizData?.is_bookmarked);
-    const [hasAttempted, setHasAttempted] = useState(quizData?.is_solved);
+    const [hasAttempted, setHasAttempted] = useState(quizData?.has_unfinished_progress);
 
     useEffect(() => {
         if (quizID) {
@@ -62,7 +62,7 @@ export default function QuizDetails() {
                     setIsLiked(response.data.quiz.is_liked);
                     setLikes(response.data.quiz.like_count);
                     setIsBookmarked(response.data.quiz.is_bookmarked);
-                    setHasAttempted(response.data.quiz.is_solved);
+                    setHasAttempted(response.data.has_unfinished_progress);
                 })
                 .catch((error) => {
                     console.error("Error fetching quiz data:", error);
@@ -200,15 +200,10 @@ export default function QuizDetails() {
                                 </div>
 
                                 <div className="w-full flex flex-row justify-start gap-3 items-center">
-                                    <Button color="primary" variant="solid" onClick={() => navigate(`/quiz/${quizData?.id}`)}
+                                    <Button color="primary" variant="solid" onClick={() => navigate(`/quiz/${quizData?.id}`, { state: { isNotResuming: true } })}
                                         className="w-1/3 items-center text-center mt-3">
                                         Start Quiz
                                     </Button>
-                                    {hasAttempted && (
-                                        <Button color="primary" variant="faded" onClick={() => navigate(`/quiz/${quizData?.id}`)} className="w-1/4 items-center text-center mt-3">
-                                            Resume Quiz
-                                        </Button>
-                                    )}
                                 </div>
                             </div>
                         </CardBody>

diff --git a/frontend/src/pages/quiz.tsx b/frontend/src/pages/quiz.tsx
@@ -2,7 +2,7 @@ import { Button } from "@nextui-org/react";
 import Navbar from "../components/common/navbar.tsx";
 import QuestionCard from "../components/quiz/question-card.tsx";
 import React, { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 import SidebarLayout from "../components/quiz/navigation.tsx";
 import { usePageTitle } from "../components/common/usePageTitle.ts";
 import { BASE_URL } from "../lib/baseURL.ts";
@@ -20,6 +20,10 @@ enum Answer {
 
 export default function Quiz() {
   const { quizID } = useParams<{ quizID: any }>();
+
+  const location = useLocation();
+  const { isNotResuming } = location.state || {};
+
   const [quizData, setQuizData] = useState<any>(null);
   const [currentPage, setCurrentPage] = React.useState(1);
   const [answers, setAnswers] = useState(Array(10).fill(Answer.None));
@@ -30,35 +34,32 @@ export default function Quiz() {
   usePageTitle("Quiz");
 
   useEffect(() => {
-    if (quizID) {
-      setIsLoading(true);
-      axios
-        .post(
-          `${BASE_URL}/quiz/start/`,
-          {
-            quiz_id: quizID,
+    axios
+      .post(
+        `${BASE_URL}/quiz/start/`,
+        {
+          quiz_id: quizID,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
           },
-          {
-            headers: {
-              Authorization: `Bearer ${token}`,
-            },
-          }
-        )
-        .then((response) => {
-          console.log(response.data);
-          setQuizData(response.data); // Store response data
-          const initialAnswers = response.data.questions.map(
-            (question: any) => question.previous_answer || Answer.None
-          );
-          setAnswers(initialAnswers);
-        })
-        .catch((error) => {
-          console.log(error);
-        })
-        .finally(() => {
-          setIsLoading(false);
-        });
-    }
+        }
+      )
+      .then((response) => {
+        console.log(response.data);
+        setQuizData(response.data); // Store response data
+        const initialAnswers = response.data.questions.map(
+          (question: any) => question.previous_answer || Answer.None
+        );
+        setAnswers(initialAnswers);
+      })
+      .catch((error) => {
+        console.log(error);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
   }, [quizID]);
 
   const currentQuestion = quizData?.questions[currentPage - 1];
@@ -70,7 +71,6 @@ export default function Quiz() {
   return (
     <div className="h-screen w-screen flex flex-col">
       <Navbar />
-
       <SidebarLayout
         id={quizID}
         quiz_progress_id={quizData?.quiz_progress_id}
@@ -94,7 +94,7 @@ export default function Quiz() {
             )}
             {isLoading ? (
               <div className="mt-5"><QuizDetailsCardSkeleton /></div>
-              
+
             ) : (
               <div className="flex flex-col items-center py-4">
                 <h1 className="font-semibold text-4xl mt-3 mb-4 text-blue-900">

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -117,6 +117,7 @@ export type QuizDetail = {
   tags: string[];
   quiz_result_id: number;
   is_solved: boolean;
+  has_unfinished_progress: boolean;
 };
 
 export type QuizDetailsResponse = {