From 12ed628b007af916c6da69820797ea3fda940c8f Mon Sep 17 00:00:00 2001
From: Romain CREY <ext.sopra.rcrey@grandlyon.com>
Date: Wed, 3 Jun 2020 14:23:38 +0200
Subject: [PATCH] change generate timeline part
---
.../Challenge/FollowChallengeTimeline.tsx | 44 +++++++------------
1 file changed, 16 insertions(+), 28 deletions(-)
diff --git a/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx b/src/components/ContentComponents/Challenge/FollowChallengeTimeline.tsx
index 1d2eb5056..9dd90d335 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>
--
GitLab