ChallengeCardContainer.tsx

import React, { useContext } from 'react'
import { withClient, Client } from 'cozy-client'
import { translate } from 'cozy-ui/react/I18n'
import ChallengeCard from 'components/ContentComponents/ChallengeCard/ChallengeCard'
import { AppContext } from 'components/Contexts/AppContextProvider'

interface ChallengeCardContainerProps {
  t: Function
  client: Client
}

const ChallengeCardContainer: React.FC<ChallengeCardContainerProps> = ({
  t,
}: ChallengeCardContainerProps) => {
  const { currentChallenge } = useContext(AppContext)

  return (
    <>
      <div className="ccc-root">
        {currentChallenge && currentChallenge.challengeType && (
          <div className="ccc-content">
            <div className="ccc-header text-14-normal-uppercase">
              {t('COMMON.CHALLENGE_CARD_LABEL')}
            </div>
            <ChallengeCard userChallenge={currentChallenge} />
          </div>
        )}
      </div>
    </>
  )
}

export default translate()(ChallengeCardContainer)