diff --git a/src/components/pages/Timeline/components/WeekHeading/index.tsx b/src/components/pages/Timeline/components/WeekHeading/index.tsx index 47d18c64d6eca4f3882ec549c859631a4de49f58..0f4e04d9dfa7ae3230753313ad011acb0338a1ac 100644 --- a/src/components/pages/Timeline/components/WeekHeading/index.tsx +++ b/src/components/pages/Timeline/components/WeekHeading/index.tsx @@ -17,46 +17,48 @@ const WeekHeading: React.FC<WeekHeadingProps> = ({ dateRangeEnd, activeDay, }) => { - const dateRangeStartMonth = new Intl.DateTimeFormat("en", { + return ( + <Card className={styles.weekCard}> + <Card.Header> + <div className={styles.weekHeading}>Week {weekNumber}</div> + <div className={styles.weekDateRange}> + {formatDate(dateRangeStart, dateRangeEnd)} + </div> + </Card.Header> + <Card.Body> + {days.map((day, i) => { + return ( + <div + key={day} + className={ + activeDay.getDate() === dateRangeStart.getDate() + i + ? styles.activeDay + : styles.dayIndicator + } + > + {day} + </div> + ); + })} + </Card.Body> + </Card> + ); +}; + +export default WeekHeading; + +function formatDate(dateRangeStart: Date, dateRangeEnd: Date) { + const startMonth = new Intl.DateTimeFormat("en", { month: "2-digit", }).format(dateRangeStart); - const dateRangeStartDay = new Intl.DateTimeFormat("en", { + const startDay = new Intl.DateTimeFormat("en", { day: "2-digit", }).format(dateRangeStart); - const dateRangeEndMonth = new Intl.DateTimeFormat("en", { + const endMonth = new Intl.DateTimeFormat("en", { month: "2-digit", }).format(dateRangeEnd); - const dateRangeEndDay = new Intl.DateTimeFormat("en", { + const endDay = new Intl.DateTimeFormat("en", { day: "2-digit", }).format(dateRangeEnd); - - return ( - <> - <Card className={styles.weekCard}> - <Card.Header> - <div className={styles.weekHeading}>Week {weekNumber}</div> - <div className={styles.weekDateRange}> - {dateRangeStartDay}/{dateRangeStartMonth} - {dateRangeEndDay}/ - {dateRangeEndMonth} - </div> - </Card.Header> - <Card.Body> - {days.map((day, i) => { - let isActive = - activeDay.getTime() === dateRangeStart.getTime() + i * 86400000; - return ( - <div - key={day} - className={isActive ? styles.activeDay : styles.dayIndicator} - > - {day} - </div> - ); - })} - </Card.Body> - </Card> - </> - ); -}; - -export default WeekHeading; + return `${startDay}/${startMonth} - ${endDay}/${endMonth}`; +} diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx index cebeb8a99d284e389aca16ba8e663a1c943a30af..6b91494d4c48356ea57ea69522b69a075a980066 100644 --- a/src/components/pages/Timeline/index.tsx +++ b/src/components/pages/Timeline/index.tsx @@ -33,7 +33,7 @@ class Timeline extends React.Component<TimelineProps, TimelineState> { this.props.initSideBar(); let moduleTracks: ModuleTracks = {}; modulesList.forEach(({ code }) => { - moduleTracks[code] = [[], []]; + moduleTracks[code] = [[], []]; }); this.setState({ moduleTracks: moduleTracks }); }