Merge branch 'fix/Duel-mini-card-done' into 'dev'

Fix/duel mini card done

See merge request web-et-numerique/llle_project/ecolyo!166

src/components/Challenge/ChallengeCardOnGoing.tsx

 import React, { useEffect, useState } from 'react'
 import { Client, useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { updateUserChallengeList } from 'store/challenge/challenge.actions'
 import './challengeCardOnGoing.scss'
@@ -21,6 +21,7 @@ import circleStar from 'assets/icons/visu/duel/circleStar.svg'
 import duelLocked from 'assets/icons/visu/duel/locked.svg'
 import { UserDuelState } from 'enum/userDuel.enum'
 import classNames from 'classnames'
+import { AppStore } from 'store'
 
 interface ChallengeCardOnGoingProps {
   userChallenge: UserChallenge
@@ -33,7 +34,10 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
   const dispatch = useDispatch()
   const history = useHistory()
   const [challengeIcon, setChallengeIcon] = useState(defaultIcon)
-
+  const [isDone, setisDone] = useState(false)
+  const { currentDataload } = useSelector(
+    (state: AppStore) => state.ecolyo.challenge
+  )
   const winStarts = async () => {
     const challengeService = new ChallengeService(client)
     let progress = 0
@@ -70,6 +74,24 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
     })
   }, [userChallenge])
 
+  useEffect(() => {
+    const challengeService = new ChallengeService(client)
+    let subscribed = true
+    async function setChallengeResult() {
+      const { isDone } = await challengeService.isChallengeDone(
+        userChallenge,
+        currentDataload
+      )
+      if (subscribed) {
+        setisDone(isDone)
+      }
+    }
+    setChallengeResult()
+    return () => {
+      subscribed = false
+    }
+  }, [client, currentDataload, userChallenge])
+
   return (
     <div className="cardContent onGoing">
       <div className="titleBlock">
@@ -134,7 +156,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
             size={60}
           />
         </button>
-      ) : userChallenge.duel.state === UserDuelState.ONGOING ? (
+      ) : userChallenge.duel.state === UserDuelState.ONGOING && !isDone ? (
         <div className={'smallCard duelCard active'} onClick={goDuel}>
           <div className="finalDuel">
             <span>{t('challenge.card.ongoing.duel')}</span>
@@ -145,10 +167,13 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
           </div>
           <StyledIcon className="circleStar" icon={challengeIcon} size={60} />
         </div>
-      ) : userChallenge.duel.state === UserDuelState.DONE ? (
-        <div className={'smallCard duelCard'} onClick={goDuel}>
-          <span>{t('challenge.card.ongoing.duelDone')}</span>
-          <StyledIcon className="duelLocked" icon={duelLocked} size={60} />
+      ) : userChallenge.duel.state === UserDuelState.ONGOING && isDone ? (
+        <div className={'smallCard duelCard active'} onClick={goDuel}>
+          <div className="finalDuel result">
+            <span>{t('challenge.card.ongoing.result')}</span>
+            <span>{t('challenge.card.ongoing.duelDone')}</span>
+          </div>
+          <StyledIcon className="duelLocked" icon={challengeIcon} size={60} />
         </div>
       ) : (
         <div className={'smallCard duelCard'}>

src/components/Challenge/ChallengeView.tsx

@@ -102,7 +102,8 @@ const ChallengeView: React.FC = () => {
     userChallengeList.forEach((challenge: UserChallenge, i: number) => {
       if (
         challenge.state === UserChallengeState.UNLOCKED ||
-        challenge.state === UserChallengeState.ONGOING
+        challenge.state === UserChallengeState.ONGOING ||
+        challenge.state === UserChallengeState.DUEL
       ) {
         setlastChallengeIndex(i)
         if (lastChallengeIndex === 0) return

src/components/Challenge/challengeCardOnGoing.scss

@@ -97,6 +97,13 @@
         margin-left: 0;
       }
     }
+    &.result {
+      span {
+        margin-bottom: 0.2rem;
+        font-weight: 600;
+        font-size: 1rem;
+      }
+    }
   }
 }
 .duelCard {

src/locales/fr.json

@@ -351,7 +351,8 @@
         "mission": "Missions",
         "action": "Actions",
         "duel": "Défi Final",
-        "duelDone": "Résultat du défi final"
+        "result": "Résultat",
+        "duelDone": "du défi final"
       },
       "locked": {
         "desc": "À débloquer en terminant le challenge précédente"