diff --git a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx index 52599a0ead724b9bbb65ff0da757b5fcce0d11d4..1d2eb50563cbc725496e9f52c9e4f495d82a1b31 100644 --- a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx +++ b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx @@ -98,96 +98,36 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({ } } - 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 generateDayDash = (index: number, dayCount: number) => { + return ( + <div + className={`date-dash ${ + (index === 0 && dayCount > 0) || + (index === getListOfWeeks().length - 1 && dayCount < 0) + ? 'none' + : index * 7 < getListOfPastDays() + dayCount + ? 'past' + : 'futur' + }`} + ></div> + ) } - // 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> + {generateDayDash(index, 3)} + {generateDayDash(index, 2)} + {generateDayDash(index, 1)} <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' + index * 7 < getListOfPastDays() ? 'past' : 'futur' }`} ></div> + {generateDayDash(index, -1)} + {generateDayDash(index, -2)} + {generateDayDash(index, -3)} </div> <div className="day-letter">{day.letter}</div> <div className="day-date">{day.date}</div> diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss index 93e20d628101c6e05e1cc40112557d780d865b89..da695eff380a298ca0f2faad95dc47f2f88405f9 100644 --- a/src/styles/components/_challenges.scss +++ b/src/styles/components/_challenges.scss @@ -319,6 +319,9 @@ .futur { background-color: $grey-dark; } + .none { + opacity: 0; + } .date-label { width: 0.625rem; height: 0.625rem;