OngoingChallengeViewingDate.tsx

import React, { useState, useEffect, useContext } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { UserChallenge } from 'services/dataChallengeContracts'
import { DateTime } from 'luxon'
import ChallengeManager from 'services/challengeDataManagerService'
import { Client, withClient } from 'cozy-client'
import { AppContext } from 'components/Contexts/AppContextProvider'

interface OngoingChallengeViewingDateProps {
  challenge: UserChallenge
  client: Client
  t: Function
}

const OngoingChallengeViewingDate: React.FC<OngoingChallengeViewingDateProps> = ({
  challenge,
  client,
  t,
}: OngoingChallengeViewingDateProps) => {
  const challengeManager = new ChallengeManager(client)
  const { fluidTypes } = useContext(AppContext)
  const [firstDateWithData, setFirstDateWithData] = useState<DateTime | null>(
    null
  )
  const [lastDateWithData, setLastDateWithData] = useState<DateTime | null>(
    null
  )

  useEffect(() => {
    if (challenge) {
      const lag = challengeManager.getLagDays(fluidTypes)
      setFirstDateWithData(
        challenge.startingDate.plus({
          days: lag,
        })
      )
      setLastDateWithData(
        challenge.endingDate.plus({
          days: lag,
        })
      )
    }
  }, [])

  return (
    <React.Fragment>
      {firstDateWithData && firstDateWithData > DateTime.local() ? (
        <div className="view-start-date">
          {t('CHALLENGE.VIEW_START')}
          <span>{firstDateWithData.toLocaleString()}</span>
        </div>
      ) : (
        <div className="view-start-date">
          {t('CHALLENGE.VIEW_RESULT')}
          <span>{lastDateWithData && lastDateWithData.toLocaleString()}</span>
        </div>
      )}
    </React.Fragment>
  )
}

export default translate()(withClient(OngoingChallengeViewingDate))