WIP: month challenge section by days

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>
   )