ChallengeCardOnGoing.tsx

import defaultChallengeIcon from 'assets/icons/visu/challenge/CHALLENGE0001.svg'
import circleChecked from 'assets/icons/visu/challenge/circleChecked.svg'
import circleUnchecked from 'assets/icons/visu/challenge/circleUnchecked.svg'
import circleStar from 'assets/icons/visu/duel/circleStar.svg'
import defaultIcon from 'assets/icons/visu/duel/default.svg'
import duelLocked from 'assets/icons/visu/duel/locked.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserActionState } from 'enum/userAction.enum'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { UserDuelState } from 'enum/userDuel.enum'
import { UserExplorationState } from 'enum/userExploration.enum'
import { UserQuizState } from 'enum/userQuiz.enum'
import { UserChallenge } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import { AppStore } from 'store'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
import { getChallengeTitleWithLineReturn, importIconbyId } from 'utils/utils'
import './challengeCardOnGoing.scss'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
import StarsContainer from './StarsContainer'

interface ChallengeCardOnGoingProps {
  userChallenge: UserChallenge
}
const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
  userChallenge,
}: ChallengeCardOnGoingProps) => {
  const client: Client = useClient()
  const { t } = useI18n()
  const dispatch = useDispatch()
  const history = useHistory()
  const [isOneFluidUp, setIsOneFluidUp] = useState<boolean>(true)
  const [challengeIcon, setChallengeIcon] = useState<string>(defaultIcon)
  const [isDone, setisDone] = useState<boolean>(false)
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const {
    challenge: { currentDataload },
    global: { fluidTypes, fluidStatus },
  } = useSelector((state: AppStore) => state.ecolyo)

  const toggleNoFluidModal = useCallback(() => {
    setIsOneFluidUp(prev => !prev)
  }, [])
  const goDuel = async () => {
    setIsLoading(true)
    //Check if at least one fluid is up
    if (fluidTypes.length !== 0) {
      if (userChallenge.duel.state !== UserDuelState.ONGOING) {
        const challengeService = new ChallengeService(client)
        const updatedChallenge = await challengeService.updateUserChallenge(
          userChallenge,
          UserChallengeUpdateFlag.DUEL_UPDATE_THRESHOLD,
          undefined,
          fluidStatus
        )
        dispatch(updateUserChallengeList(updatedChallenge))
      }
      setIsLoading(false)
      history.push('/challenges/duel?id=' + userChallenge.id)
    } else {
      setIsLoading(false)
      toggleNoFluidModal()
    }
  }
  const goQuiz = async () => {
    if (userChallenge.quiz.state !== UserQuizState.ONGOING) {
      const challengeService = new ChallengeService(client)
      const updatedChallenge = await challengeService.updateUserChallenge(
        userChallenge,
        UserChallengeUpdateFlag.QUIZ_RESET
      )
      dispatch(updateUserChallengeList(updatedChallenge))
    }
    if (userChallenge.progress.quizProgress !== 5)
      history.push('/challenges/quiz')
  }
  const goExploration = () => {
    if (userChallenge.progress.explorationProgress !== 5)
      history.push('/challenges/exploration')
  }
  const goAction = () => {
    if (userChallenge.progress.actionProgress !== 5)
      history.push('/challenges/action')
  }

  useEffect(() => {
    let subscribed = true
    async function importIcon() {
      importIconbyId(userChallenge.id, 'challenge').then(icon => {
        if (subscribed) {
          icon ? setChallengeIcon(icon) : setChallengeIcon(defaultChallengeIcon)
        }
      })
    }
    importIcon()
    return () => {
      subscribed = false
    }
  }, [userChallenge])

  useEffect(() => {
    const challengeService = new ChallengeService(client)
    let subscribed = true
    async function setChallengeResult() {
      const isChallengeDone = await challengeService.isChallengeDone(
        userChallenge,
        currentDataload
      )
      if (subscribed) {
        setisDone(isChallengeDone.isDone)
      }
    }
    const unlockDuel = async () => {
      if (
        userChallenge.duel.state === UserDuelState.LOCKED &&
        userChallenge.progress.actionProgress === 5 &&
        userChallenge.progress.quizProgress === 5 &&
        userChallenge.progress.explorationProgress === 5
      ) {
        const updatedChallenge = await challengeService.updateUserChallenge(
          {
            ...userChallenge,
            progress: {
              ...userChallenge.progress,
              explorationProgress: 5,
              actionProgress: 5,
            },
          },
          UserChallengeUpdateFlag.DUEL_UNLOCK
        )
        dispatch(updateUserChallengeList(updatedChallenge))
      }
    }
    unlockDuel()
    setChallengeResult()
    return () => {
      subscribed = false
    }
  }, [client, currentDataload, userChallenge, dispatch])

  return (
    <div className="cardContent onGoing">
      <div className="titleBlock">
        <span className="challengeTitle">
          {getChallengeTitleWithLineReturn(userChallenge.id)}
        </span>
      </div>
      <button
        title={t('challenge.card.ongoing.quiz')}
        tabIndex={userChallenge.progress.quizProgress === 5 ? -1 : 0}
        className={classNames('smallCard', {
          ['finished']: userChallenge.progress.quizProgress === 5,
        })}
        onClick={goQuiz}
      >
        <StyledIcon
          className="cardIcon"
          icon={
            userChallenge.progress.quizProgress === 5
              ? circleChecked
              : circleUnchecked
          }
          size={25}
        />
        <div className="content">
          <span>{t('challenge.card.ongoing.quiz')}</span>
          <StarsContainer result={userChallenge.progress.quizProgress} />
        </div>
      </button>
      <button
        title={t('challenge.card.ongoing.exploration')}
        tabIndex={userChallenge.progress.explorationProgress === 5 ? -1 : 0}
        className={classNames('smallCard explorationCard', {
          ['finished']: userChallenge.progress.explorationProgress === 5,
        })}
        onClick={goExploration}
      >
        <StyledIcon
          className="cardIcon"
          icon={
            userChallenge.progress.explorationProgress === 5
              ? circleChecked
              : circleUnchecked
          }
          size={25}
        />
        {userChallenge.exploration.state ===
          UserExplorationState.NOTIFICATION && (
          <div className="notifChallenge">1</div>
        )}
        <div className="content">
          <span>{t('challenge.card.ongoing.exploration')}</span>
          <StarsContainer result={userChallenge.progress.explorationProgress} />
        </div>
      </button>
      <button
        title={t('challenge.card.ongoing.action')}
        tabIndex={userChallenge.progress.actionProgress === 5 ? -1 : 0}
        className={classNames('smallCard actionCard', {
          ['finished']: userChallenge.progress.actionProgress === 5,
        })}
        onClick={goAction}
      >
        <StyledIcon
          className="cardIcon"
          icon={
            userChallenge.progress.actionProgress === 5
              ? circleChecked
              : circleUnchecked
          }
          size={25}
        />
        {userChallenge.action.state === UserActionState.NOTIFICATION && (
          <div className="notifChallenge">1</div>
        )}
        <div className="content">
          <span>{t('challenge.card.ongoing.action')}</span>
          <StarsContainer result={userChallenge.progress.actionProgress} />
        </div>
      </button>
      {(userChallenge.progress.actionProgress +
        userChallenge.progress.explorationProgress +
        userChallenge.progress.quizProgress >=
        userChallenge.target &&
        userChallenge.duel.state === UserDuelState.UNLOCKED) ||
      userChallenge.duel.state === UserDuelState.NO_REF_PERIOD_VALID ? (
        <button className="smallCard goDuel" onClick={goDuel}>
          {isLoading ? (
            <div className="spinner-container">
              <Loader color="black" />
            </div>
          ) : (
            <>
              {t('challenge.card.ongoing.duel')}
              <StyledIcon
                className="challengeminIcon"
                icon={challengeIcon}
                size={60}
              />
            </>
          )}
        </button>
      ) : userChallenge.duel.state === UserDuelState.ONGOING && !isDone ? (
        <div className={'smallCard duelCard active'} onClick={goDuel}>
          <div className="finalDuel">
            <span>{t('challenge.card.ongoing.duel')}</span>
            <p className="starCount">
              <span className="blueNumber">{`${userChallenge.duel.userConsumption} €  `}</span>
              <span>{` / ${userChallenge.duel.threshold} €`}</span>
            </p>
          </div>
          <StyledIcon className="circleStar" icon={challengeIcon} size={60} />
        </div>
      ) : 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 className="notifChallenge">1</div>
        </div>
      ) : (
        <div className={'smallCard duelCard'}>
          <p className="starCount">
            <StyledIcon icon={circleStar} size={30} />
            <span className="blueNumber">{`${
              userChallenge.progress.quizProgress +
              userChallenge.progress.explorationProgress +
              userChallenge.progress.actionProgress
            }  `}</span>
            <span>{` / ${userChallenge.target}`}</span>
          </p>
          <StyledIcon className="duelLocked" icon={duelLocked} size={60} />
        </div>
      )}
      <ChallengeNoFluidModal
        open={!isOneFluidUp}
        handleCloseClick={toggleNoFluidModal}
      />
    </div>
  )
}

export default ChallengeCardOnGoing