diff --git a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx index 1d2eb50563cbc725496e9f52c9e4f495d82a1b31..9dd90d335fda5b9adbf18bf4369d962595f0e860 100644 --- a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx +++ b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx @@ -98,10 +98,14 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({ } } - const generateDayDash = (index: number, dayCount: number) => { + const generateTimelinePart = ( + index: number, + dayCount: number, + className: string + ) => { return ( <div - className={`date-dash ${ + className={`${className} ${ (index === 0 && dayCount > 0) || (index === getListOfWeeks().length - 1 && dayCount < 0) ? 'none' @@ -117,17 +121,13 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({ return getListOfWeeks().map((day, index) => ( <div key={index} className="day-solo"> <div className="day-line-label"> - {generateDayDash(index, 3)} - {generateDayDash(index, 2)} - {generateDayDash(index, 1)} - <div - className={`date-label ${ - index * 7 < getListOfPastDays() ? 'past' : 'futur' - }`} - ></div> - {generateDayDash(index, -1)} - {generateDayDash(index, -2)} - {generateDayDash(index, -3)} + {generateTimelinePart(index, 3, 'date-dash')} + {generateTimelinePart(index, 2, 'date-dash')} + {generateTimelinePart(index, 1, 'date-dash')} + {generateTimelinePart(index, 0, 'date-label')} + {generateTimelinePart(index, -1, 'date-dash')} + {generateTimelinePart(index, -2, 'date-dash')} + {generateTimelinePart(index, -3, 'date-dash')} </div> <div className="day-letter">{day.letter}</div> <div className="day-date">{day.date}</div> @@ -139,21 +139,9 @@ const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({ 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> + {generateTimelinePart(index, 0, 'date-dash')} + {generateTimelinePart(index, 0, 'date-label')} + {generateTimelinePart(index + 1, 0, 'date-dash')} </div> <div className="day-letter">{day.letter}</div> <div className="day-date">{day.date}</div>