add star display for quiz

src/components/Challenge/ChallengeCardOnGoing.tsx

@@ -111,20 +111,21 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
       </div>
       <div
         className={classNames('smallCard', {
-          ['finished']: userChallenge.progress >= 5,
+          ['finished']: userChallenge.quiz.result >= 5,
         })}
         onClick={goQuiz}
       >
-        <span onClick={winStarts}>
-          <StyledIcon
-            className="cardIcon"
-            icon={userChallenge.progress >= 5 ? circleChecked : circleUnchecked}
-            size={25}
-          />
-        </span>
+        <StyledIcon
+          className="cardIcon"
+          icon={
+            userChallenge.quiz.result >= 5 ? circleChecked : circleUnchecked
+          }
+          size={25}
+        />
+        {console.log('result', userChallenge.quiz.result)}
         <div className="content">
           <span>{t('challenge.card.ongoing.quiz')}</span>
-          <StarsContainer starNumber={userChallenge.progress >= 5 ? 5 : 2} />
+          <StarsContainer result={userChallenge.quiz.result} />
         </div>
       </div>
       <div
@@ -140,7 +141,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
         />
         <div className="content">
           <span>{t('challenge.card.ongoing.mission')}</span>
-          <StarsContainer starNumber={userChallenge.progress >= 10 ? 5 : 3} />
+          <StarsContainer result={0} />
         </div>
       </div>
       <div
@@ -156,7 +157,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
         />
         <div className="content">
           <span>{t('challenge.card.ongoing.action')}</span>
-          <StarsContainer starNumber={userChallenge.progress >= 15 ? 5 : 4} />
+          <StarsContainer result={0} />
         </div>
       </div>
       {userChallenge.progress >= userChallenge.target &&

src/components/Challenge/StarsContainer.tsx

-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import starIcon from 'assets/icons/visu/challenge/star.svg'
 import starFilled from 'assets/icons/visu/challenge/starFilled.svg'
 import starFinished from 'assets/icons/visu/challenge/starFinished.svg'
 
 interface StarsContainerProps {
-  starNumber?: number
+  result: number
 }
 
 const StarsContainer: React.FC<StarsContainerProps> = ({
-  starNumber,
+  result,
 }: StarsContainerProps) => {
-  const renderStars = (number: number) => {
-    if (starNumber) {
-      if (starNumber === 5) return starFinished
-      if (starNumber <= number) return starIcon
-      else return starFilled
-    } else return starFilled
-  }
+  const [elements] = useState<string[]>([])
+  useEffect(() => {
+    const renderStars = () => {
+      for (let i = 0; i < 5; i++) {
+        if (result === 5) elements.push(starFinished)
+        else if (i < result) elements.push(starFilled)
+        else if (i >= result) elements.push(starIcon)
+      }
+    }
+    renderStars()
+  }, [result, elements])
+
   return (
     <div className="stars">
-      <StyledIcon className="star" icon={renderStars(1)} />
-      <StyledIcon className="star" icon={renderStars(2)} />
-      <StyledIcon className="star" icon={renderStars(3)} />
-      <StyledIcon className="star" icon={renderStars(4)} />
-      <StyledIcon className="star" icon={renderStars(5)} />
+      {elements.map((star, i) => {
+        return <StyledIcon key={i} className="star" icon={star} />
+      })}
     </div>
   )
 }

src/services/challenge.service.ts

@@ -26,8 +26,6 @@ import DuelService from 'services/duel.service'
 import QuizService from 'services/quiz.service'
 import ConsumptionDataManager from 'services/consumption.service'
 import { getRelationship } from 'utils/utils'
-import quizService from 'services/quiz.service'
-import { UserQuizState } from 'enum/userQuiz.enum'
 
 export default class ChallengeService {
   private readonly _client: Client