4 weeks challenge with daily progress

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>

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;