Refactor for not to pass whole questionSet

leung018 · Nov 7, 2024 · 4e15ddd · 4e15ddd
1 parent d7f57f1
commit 4e15ddd
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/src/app/components/quiz.tsx b/src/app/components/quiz.tsx
@@ -64,7 +64,8 @@ export class MultipleChoiceQuizUIService {
           }
           return (
             <MultipleChoiceQuiz
-              questionSet={questionSet}
+              questionSetName={questionSet.name}
+              questions={questionSet.getCurrentPlayQuestions()}
               onSubmit={() => {
                 this.questionSetRepo.upsertQuestionSet(
                   questionSet.newSwappedChoicesQuestionSet(),
@@ -79,10 +80,12 @@ export class MultipleChoiceQuizUIService {
 }
 
 function MultipleChoiceQuiz({
-  questionSet,
+  questionSetName,
+  questions,
   onSubmit,
 }: {
-  questionSet: QuestionSet
+  questionSetName: string
+  questions: ReadonlyArray<Question>
   onSubmit: () => void
 }) {
   const [score, setScore] = useState<number | null>(null)
@@ -106,7 +109,7 @@ function MultipleChoiceQuiz({
 
   const calculateScore = () => {
     let score = 0
-    questionSet.getCurrentPlayQuestions().forEach((question, questionIndex) => {
+    questions.forEach((question, questionIndex) => {
       if (
         question.mc.correctChoiceIndex ===
         questionToCheckedChoiceMap.get(questionIndex)
@@ -119,8 +122,8 @@ function MultipleChoiceQuiz({
 
   return (
     <div className="p-4">
-      <h1 className="text-xl font-semibold mb-6">{questionSet.name}</h1>
-      {questionSet.getCurrentPlayQuestions().map((question, questionIndex) => (
+      <h1 className="text-xl font-semibold mb-6">{questionSetName}</h1>
+      {questions.map((question, questionIndex) => (
         <QuestionForm
           key={questionIndex}
           question={question}
@@ -143,7 +146,7 @@ function MultipleChoiceQuiz({
       {isSubmitted() && (
         <div className="mt-4">
           <p className="font-bold">
-            Your score: {score}/{questionSet.questions.length}
+            Your score: {score}/{questions.length}
           </p>
         </div>
       )}