FollowChallengeTimeline.tsx

import React, { useContext } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { UserChallenge } from 'services/dataChallengeContracts'
import { DateTime, Interval } from 'luxon'
import { FluidType } from 'enum/fluid.enum'
import ChallengeManager from 'services/challengeDataManagerService'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { Client } from 'cozy-client'

interface FollowChallengeTimelineViewProps {
  challenge: UserChallenge
  client: Client
}

const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({
  challenge,
  client,
}: FollowChallengeTimelineViewProps) => {
  const { fluidTypes } = useContext(AppContext)
  const challengeManager = new ChallengeManager(client)

  const viewingDate = () => {
    if (challenge && challenge.challengeType) {
      const startingDate = challenge.startingDate
      return startingDate.plus({
        days: challengeManager.getLagDays(fluidTypes),
      })
    } else {
      return DateTime.local()
    }
  }

  const getListOfDays = () => {
    if (challenge && challenge.challengeType) {
      const startingDate = DateTime.fromISO(challenge.startingDate.toString())
      const listOfChallengeDays = []
      let i = 0
      while (challenge.challengeType.duration.days > i) {
        listOfChallengeDays.push({
          letter: startingDate.plus({ days: i }).weekdayShort[0].toUpperCase(),
          date: startingDate.plus({ days: i }).day,
        })
        i++
      }
      return listOfChallengeDays
    } else {
      return []
    }
  }

  const getListOfPastDays = () => {
    if (Interval.fromDateTimes(viewingDate(), DateTime.local()).isValid) {
      if (challenge && challenge.challengeType) {
        return Interval.fromDateTimes(viewingDate(), DateTime.local()).count(
          'days'
        )
      } else {
        return 0
      }
    } else {
      return 0
    }
  }

  return (
    <React.Fragment>
      <div className="list-of-days-duration">
        {getListOfDays().map((day, index) => (
          <div key={index} className="day-solo">
            <div className="day-line-label">
              <div
                className={`date-dash ${
                  index < getListOfPastDays() ? 'past' : 'futur'
                }`}
              ></div>
              <div
                className={`date-label ${
                  index < getListOfPastDays() ? 'past' : 'futur'
                }`}
              ></div>
              <div
                className={`date-dash ${
                  index + 1 < getListOfPastDays() ? 'past' : 'futur'
                }`}
              ></div>
            </div>
            <div className="day-letter">{day.letter}</div>
            <div className="day-date">{day.date}</div>
          </div>
        ))}
      </div>
    </React.Fragment>
  )
}

export default translate()(FollowChallengeTimeline)