feat(milestones):add dates to milestones section

app/assets/javascripts/components/course/course.jsx

@@ -26,6 +26,7 @@ import CourseAlerts from './course_alerts';
 import { getStudentCount, getCurrentUser, getWeeksArray } from '../../selectors';
 import ActivityHandler from '../activity/activity_handler';
 import CourseApproval from './course_approval';
+import { getAllWeekDates } from '../../selectors/index';
 
 const Course = withRouter((props) => {
   useEffect(() => {
@@ -80,6 +81,7 @@ const Course = withRouter((props) => {
     course_id: courseSlug,
     current_user: userRoles,
     course,
+    allWeekDates: props.allWeekDates,
   };
 
   let courseApprovalForm;
@@ -170,7 +172,8 @@ const mapStateToProps = state => ({
   weeks: getWeeksArray(state),
   usersLoaded: state.users.isLoaded,
   studentCount: getStudentCount(state),
-  currentUser: getCurrentUser(state)
+  currentUser: getCurrentUser(state),
+  allWeekDates: getAllWeekDates(state)
 });
 
 const mapDispatchToProps = {

app/assets/javascripts/components/overview/milestones.jsx

@@ -4,6 +4,7 @@ import createReactClass from 'create-react-class';
 import { filter } from 'lodash-es';
 
 import CourseDateUtils from '../../utils/course_date_utils';
+import DateCalculator from '../../utils/date_calculator';
 
 const md = require('../../utils/markdown_it.js').default();
 
@@ -12,9 +13,11 @@ const Milestones = createReactClass({
 
   propTypes: {
     timelineStart: PropTypes.string.isRequired,
+    timelineEnd: PropTypes.string.isRequired,
     weeks: PropTypes.array.isRequired,
     allWeeks: PropTypes.array.isRequired,
-    course: PropTypes.object.isRequired
+    course: PropTypes.object.isRequired,
+    weekDates: PropTypes.array.isRequired
   },
 
   milestoneBlockType: 2,
@@ -28,19 +31,26 @@ const Milestones = createReactClass({
     const weekNumberOffset = CourseDateUtils.weeksBeforeTimeline(this.props.course);
     const blocks = [];
 
-    this.props.allWeeks.map((week) => {
+
+    this.props.allWeeks.map((week,navIndex) => {
       if (week.empty) return null;
-
       const milestoneBlocks = filter(week.blocks, block => block.kind === this.milestoneBlockType);
       return milestoneBlocks.map((block) => {
+        if (
+          !this.props.weekDates[navIndex]?.start || 
+          !this.props.weekDates[navIndex]?.end || 
+          this.props.weekDates[navIndex]?.start > this.props.weekDates[navIndex]?.end
+        ) {
+          return null;
+        }        
         let classNames = 'module__data';
         if (this.weekIsCompleted(week, currentWeek)) { classNames += ' completed'; }
         const rawHtml = md.render(block.content || '');
         const completionNote = this.weekIsCompleted(week, currentWeek) ? '- Complete' : undefined;
         return blocks.push(
           <div key={block.id} className="section-header">
             <div className={classNames}>
-              <p>Week {week.weekNumber + weekNumberOffset} {completionNote}</p>
+              <p>Week {week.weekNumber + weekNumberOffset} ({this.props.weekDates[navIndex]?.start} - {this.props.weekDates[navIndex]?.end}) {completionNote}</p>
               <div className="markdown" dangerouslySetInnerHTML={{ __html: rawHtml }} />
               <hr />
             </div>

app/assets/javascripts/components/overview/overview_handler.jsx

@@ -49,7 +49,8 @@ const Overview = createReactClass({
     activateValidations: PropTypes.func.isRequired,
     firstErrorMessage: PropTypes.string,
     isValid: PropTypes.bool.isRequired,
-    courseCreationNotice: PropTypes.string
+    courseCreationNotice: PropTypes.string,
+    allWeekDates: PropTypes.array,
   },
 
   componentDidMount() {
@@ -159,7 +160,7 @@ const Overview = createReactClass({
           refetchCourse={this.props.refetchCourse}
         />
         <AvailableActions course={course} current_user={this.props.current_user} updateCourse={this.props.updateCourse} courseCreationNotice={this.props.courseCreationNotice} />
-        <Milestones timelineStart={course.timeline_start} weeks={this.props.weeks} allWeeks={this.props.allWeeks} course={course} />
+        <Milestones timelineStart={course.timeline_start} timelineEnd={course.timeline_end} weeks={this.props.weeks} allWeeks={this.props.allWeeks} course={course} weekDates={this.props.allWeekDates}  />
       </div>
     ) : (
       <div className="sidebar" />

app/assets/javascripts/components/timeline/timeline.jsx

@@ -47,7 +47,8 @@ const Timeline = createReactClass({
     editableTitles: PropTypes.bool,
     enableReorderable: PropTypes.func,
     enableEditTitles: PropTypes.func,
-    current_user: PropTypes.object
+    current_user: PropTypes.object,
+    weekDates: PropTypes.array,
   },
 
   getInitialState() {
@@ -388,16 +389,24 @@ const Timeline = createReactClass({
         navClassName += ' is-current';
       }
 
-      const dateCalc = new DateCalculator(this.props.course.timeline_start, this.props.course.timeline_end, navIndex, { zeroIndexed: true });
       const navWeekKey = `week-${navIndex}`;
       const navWeekLink = `#week-${navIndex + 1 + weeksBeforeTimeline}`;
+      const startDate = this.props.weekDates[navIndex]?.start;
+      const endDate = this.props.weekDates[navIndex]?.end;
+
+      if (
+        !startDate || 
+        !endDate
+      ) {
+        return null;  
+      }
 
       // if using custom titles, show only titles, otherwise, show default titles and dates
       let navItem;
       if (usingCustomTitles) {
         let navTitle = '';
         if (weekInfo.emptyWeek) {
-          const datesStr = `${dateCalc.start()} - ${dateCalc.end()}`;
+          const datesStr = `${startDate} - ${endDate}`;
           navTitle = I18n.t('timeline.week_number', { number: datesStr });
         } else {
           navTitle = weekInfo.title ? weekInfo.title : I18n.t('timeline.week_number', { number: navIndex + 1 + weeksBeforeTimeline });
@@ -411,7 +420,7 @@ const Timeline = createReactClass({
         navItem = (
           <li className={navClassName} key={navWeekKey}>
             <a href={navWeekLink}>{I18n.t('timeline.week_number', { number: navIndex + 1 + weeksBeforeTimeline })}</a>
-            <span className="pull-right">{dateCalc.start()} - {dateCalc.end()}</span>
+            <span className="pull-right">{startDate} - {endDate}</span>
           </li>
         );
       }

app/assets/javascripts/components/timeline/timeline_handler.jsx

@@ -122,6 +122,7 @@ const TimelineHandler = (props) => {
         nameHasChanged={() => false}
         edit_permissions={props.editPermissions}
         current_user={props.current_user}
+        weekDates={props.allWeekDates}
       />
       {/* {grading} */}
     </div>
@@ -139,7 +140,8 @@ TimelineHandler.propTypes = {
   editableBlockIds: PropTypes.array,
   all_training_modules: PropTypes.array,
   fetchAllTrainingModules: PropTypes.func.isRequired,
-  editPermissions: PropTypes.bool.isRequired
+  editPermissions: PropTypes.bool.isRequired,
+  allWeekDates: PropTypes.array.isRequired
 };
 
 const mapStateToProps = state => ({

app/assets/javascripts/selectors/index.js

@@ -5,6 +5,7 @@ import { STUDENT_ROLE, INSTRUCTOR_ROLE, ONLINE_VOLUNTEER_ROLE, CAMPUS_VOLUNTEER_
 import UserUtils from '../utils/user_utils.js';
 import { PageAssessmentGrades } from '../utils/article_finder_language_mappings.js';
 import CourseDateUtils from '../utils/course_date_utils.js';
+import DateCalculator from '../utils/date_calculator';
 
 
 const getUsers = state => state.users.users;
@@ -357,3 +358,21 @@ export const getTicketsById = createSelector(
     return tickets.all.reduce((acc, ticket) => ({ ...acc, [ticket.id]: ticket }), {});
   }
 );
+
+
+export const getAllWeekDates = createSelector(
+  [getCourse, getWeeks], (course, weeks) => {
+    const weekDates = Object.keys(weeks).map((weekId, index) => {
+      const dateCalc=new DateCalculator(course.timeline_start, course.timeline_end,index,{
+        zeroIndexed:true
+      }
+      )
+      return {
+        weekId,
+        start: dateCalc.start(),
+        end: dateCalc.end()
+      };
+    });
+    return weekDates;
+  }
+);