diff --git a/src/assets/png/badges/CHA00000003-0.png b/src/assets/png/badges/CHA00000003-0.png new file mode 100644 index 0000000000000000000000000000000000000000..bad09c3516c15277abd6b9adc44b4653ec40abb2 Binary files /dev/null and b/src/assets/png/badges/CHA00000003-0.png differ diff --git a/src/assets/png/badges/CHA00000003-1.png b/src/assets/png/badges/CHA00000003-1.png new file mode 100644 index 0000000000000000000000000000000000000000..e16bba433ca3ece0ba70d5f0435443e57bcba00b Binary files /dev/null and b/src/assets/png/badges/CHA00000003-1.png differ diff --git a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx index 306b1763f955b5b64f0fcb29e2a88f5303cef012..52599a0ead724b9bbb65ff0da757b5fcce0d11d4 100644 --- a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx +++ b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx @@ -60,63 +60,175 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({ } } + 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 && - challenge.challengeType.duration.days === 7 - ) { + if (challenge && challenge.challengeType) { return Interval.fromDateTimes(viewingDate(), DateTime.local()).count( 'days' ) - } else 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 { + 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 { - return 0 + 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"> - {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> - ))} + {challenge && + challenge.challengeType && + challenge.challengeType.duration.days === 7 + ? weekChallenge() + : monthChallenge()} </div> </React.Fragment> )