ChallengeCardUnlocked.tsx

import React, { useCallback, useEffect, useState } from 'react'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useDispatch, useSelector } from 'react-redux'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
import './challengeCardUnlocked.scss'
import { UserChallenge } from 'models'
import ChallengeService from 'services/challenge.service'
import Button from '@material-ui/core/Button'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
import { AppStore } from 'store'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import defaultIcon from 'assets/icons/visu/challenge/challengeLocked.svg'
import { importIconbyId } from 'utils/utils'

interface ChallengeCardUnlockedProps {
  userChallenge: UserChallenge
}
const ChallengeCardUnlocked: React.FC<ChallengeCardUnlockedProps> = ({
  userChallenge,
}: ChallengeCardUnlockedProps) => {
  const client: Client = useClient()
  const dispatch = useDispatch()
  const { t } = useI18n()

  const [openNoFluidModal, setopenNoFluidModal] = useState(false)
  const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)

  const [challengeIcon, setChallengeIcon] = useState(defaultIcon)

  const toggleNoFluidModal = useCallback(() => {
    setopenNoFluidModal(prev => !prev)
  }, [])

  const launchChallenge = useCallback(async () => {
    if (fluidTypes.length > 0) {
      const challengeService = new ChallengeService(client)
      const updatedChallenge = await challengeService.startUserChallenge(
        userChallenge
      )
      dispatch(updateUserChallengeList(updatedChallenge))
    } else {
      return toggleNoFluidModal()
    }
  }, [client, dispatch, userChallenge, fluidTypes, toggleNoFluidModal])

  useEffect(() => {
    if (userChallenge) {
      importIconbyId(userChallenge.id, 'challenge').then(icon => {
        icon && setChallengeIcon(icon)
      })
    }
  }, [userChallenge])

  return (
    <>
      <div className="cardContent cardUnlocked">
        <span className="challengeTitle">{userChallenge.title}</span>
        <StyledIcon className="challengeIcon" icon={challengeIcon} />
        <Button
          aria-label={t('challenge.accessibility.button_launch')}
          onClick={launchChallenge}
          classes={{
            root: 'btn-duel-active',
            label: 'text-16-bold',
          }}
        >
          {t('challenge.card_unlocked.button_launch')}
        </Button>
      </div>
      <ChallengeNoFluidModal
        open={openNoFluidModal}
        handleCloseClick={toggleNoFluidModal}
      />
    </>
  )
}

export default ChallengeCardUnlocked