QuizFinish.tsx

import Button from '@material-ui/core/Button'
import starResult from 'assets/icons/visu/quiz/starResult.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserChallengeUpdateFlag } from 'enums'
import { UserChallenge } from 'models'
import React, { useCallback, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import { useAppDispatch } from 'store/hooks'
import './quizFinish.scss'

const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
  const { t } = useI18n()
  const client = useClient()
  const navigate = useNavigate()
  const dispatch = useAppDispatch()
  const challengeService = useMemo(() => new ChallengeService(client), [client])

  const retryQuiz = useCallback(async () => {
    const userChallengeUpdated = await challengeService.updateUserChallenge(
      userChallenge,
      UserChallengeUpdateFlag.QUIZ_RESET
    )
    dispatch(updateUserChallengeList(userChallengeUpdated))
  }, [dispatch, userChallenge, challengeService])

  const goBack = async () => {
    const userChallengeUpdated = await challengeService.updateUserChallenge(
      userChallenge,
      UserChallengeUpdateFlag.QUIZ_UPDATE,
      userChallenge.quiz
    )
    dispatch(updateUserChallengeList(userChallengeUpdated))
    navigate('/challenges')
  }
  return (
    <div className="quiz-container">
      <div className="quiz-finish-container">
        <div>
          <div className="score-final-title">{t('quiz.score_final')}</div>
          <div className="score-final">
            <span>{userChallenge.quiz.result}</span> / 5
          </div>
          <div className="score-label">{t('quiz.earn')}</div>
          <div className="score-stars">
            {userChallenge.quiz.result}
            <StyledIcon className="quiz-icon" icon={starResult} size={30} />
          </div>
        </div>
        {userChallenge.quiz.result === 5 ? (
          <div className="button-start">
            <Button
              aria-label={t('quiz.accessibility.button_end_quiz')}
              onClick={goBack}
              className="btnSecondary"
            >
              {t('quiz.button_end_quiz')}
            </Button>
          </div>
        ) : (
          <div className="button-start">
            <Button
              aria-label={t('quiz.accessibility.button_go_back')}
              onClick={goBack}
              className="btnSecondary"
            >
              {t('quiz.button_go_back')}
            </Button>
            <Button
              aria-label={t('quiz.accessibility.button_try_again')}
              onClick={retryQuiz}
              className="btnSecondary"
            >
              {t('quiz.button_try_again')}
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}

export default QuizFinish