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
      if (challenge.challengeType.duration.days === 7) {
        while (challenge.challengeType.duration.days > i) {
          listOfChallengeDays.push({
            letter: startingDate
              .plus({ days: i })
              .weekdayShort[0].toUpperCase(),
            date: startingDate.plus({ days: i }).day,
          })
          i++
        }
      } else {
        while (challenge.challengeType.duration.days >= i) {
          listOfChallengeDays.push({
            letter: '',
            date: startingDate.plus({ days: i }).toFormat('dd/MM'),
          })
          i += 7
        }
      }
      return listOfChallengeDays
    } else {
      return []
    }
  }

  const getListOfWeeks = () => {
    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: '',
          date: startingDate.plus({ days: i }).toFormat('dd/MM'),
        })
        i += 7
      }
      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 {
      if (challenge) {
        return -Interval.fromDateTimes(DateTime.local(), viewingDate()).count(
          'days'
        )
      } else {
        return 0
      }
    }
  }

  const getListOfPastDaysStart = () => {
    if (
      Interval.fromDateTimes(
        challenge && challenge.startingDate,
        DateTime.local()
      ).isValid
    ) {
      if (challenge) {
        return Interval.fromDateTimes(
          challenge && challenge.startingDate,
          DateTime.local()
        ).count('days')
      } else {
        return 0
      }
    } else {
      if (challenge) {
        return -Interval.fromDateTimes(
          DateTime.local(),
          challenge && challenge.startingDate
        ).count('days')
      } else {
        return 0
      }
    }
  }

  // const getListOfPastWeeks = () => {
  //   if (Interval.fromDateTimes(viewingDate(), DateTime.local()).isValid) {
  //     if (
  //       challenge &&
  //       challenge.challengeType &&
  //       challenge.challengeType.duration.days === 28
  //     ) {
  //       console.log(
  //         Interval.fromDateTimes(viewingDate(), DateTime.local()).count('days')
  //       )
  //       return (
  //         Interval.fromDateTimes(viewingDate(), DateTime.local()).count(
  //           'days'
  //         ) / 7
  //       )
  //     } else {
  //       return 0
  //     }
  //   } else {
  //     return 0
  //   }
  // }

  const monthChallenge = () => {
    return getListOfWeeks().map((day, index) => (
      <div key={index} className="day-solo">
        {console.log(index * 7, 'DAYS', getListOfPastDays())}
        <div className="day-line-label">
          <div
            className={`date-dash ${
              index * 7 <= getListOfPastDays() + 3 ? 'past' : 'futur'
            }`}
          ></div>
          <div
            className={`date-dash ${
              index * 7 <= getListOfPastDays() + 2 ? 'past' : 'futur'
            }`}
          ></div>
          <div
            className={`date-dash ${
              index * 7 <= getListOfPastDays() + 1 ? 'past' : 'futur'
            }`}
          ></div>
          <div
            className={`date-label ${
              index * 7 <= getListOfPastDays() ? 'past' : 'futur'
            }`}
          ></div>
          <div
            className={`date-dash ${
              index * 7 <= getListOfPastDays() - 1 ? 'past' : 'futur'
            }`}
          ></div>
          <div
            className={`date-dash ${
              index * 7 <= getListOfPastDays() - 2 ? 'past' : 'futur'
            }`}
          ></div>
          <div
            className={`date-dash ${
              index * 7 <= getListOfPastDays() - 3 ? 'past' : 'futur'
            }`}
          ></div>
        </div>
        <div className="day-letter">{day.letter}</div>
        <div className="day-date">{day.date}</div>
      </div>
    ))
  }

  const weekChallenge = () => {
    return 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>
    ))
  }

  return (
    <React.Fragment>
      <div className="list-of-days-duration">
        {challenge &&
        challenge.challengeType &&
        challenge.challengeType.duration.days === 7
          ? weekChallenge()
          : monthChallenge()}
      </div>
    </React.Fragment>
  )
}

export default translate()(FollowChallengeTimeline)