diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx index e3779993f893b37d3fad9eb915ee32072c65a1c6..cfe38accf9ccc6e74642ed7ce4ce0d9c6a464000 100644 --- a/src/components/Challenge/ChallengeCardOnGoing.tsx +++ b/src/components/Challenge/ChallengeCardOnGoing.tsx @@ -1,7 +1,7 @@ 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'}> diff --git a/src/components/Challenge/challengeCardOnGoing.scss b/src/components/Challenge/challengeCardOnGoing.scss index 9f884695eb1931a6da63f41b940932f4bbb891d5..9b6a8843a4e1a90c386cfbe68e5ca01014b23bb9 100644 --- a/src/components/Challenge/challengeCardOnGoing.scss +++ b/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 { diff --git a/src/locales/fr.json b/src/locales/fr.json index 86bc5cc7e8944c620ba07d709fadc1043be853fd..a8fe7894e581597bfb62fbacf3b2f40301216826 100644 --- a/src/locales/fr.json +++ b/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"