refactors milestones to functional component

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

@@ -1,67 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import { filter } from 'lodash-es';
-
 import CourseDateUtils from '../../utils/course_date_utils';
 
 const md = require('../../utils/markdown_it.js').default();
 
-const Milestones = createReactClass({
-  displayName: I18n.t('blocks.milestones.title'),
-
-  propTypes: {
-    timelineStart: PropTypes.string.isRequired,
-    weeks: PropTypes.array.isRequired,
-    allWeeks: PropTypes.array.isRequired,
-    course: PropTypes.object.isRequired
-  },
-
-  milestoneBlockType: 2,
+const Milestones = ({ timelineStart, allWeeks, course }) => {
+  const currentWeek = CourseDateUtils.currentWeekOrder(timelineStart);
+  const weekNumberOffset = CourseDateUtils.weeksBeforeTimeline(course);
 
-  weekIsCompleted(week, currentWeek) {
+  const weekIsCompleted = (week) => {
     return week.weekNumber < currentWeek;
-  },
-
-  render() {
-    const currentWeek = CourseDateUtils.currentWeekOrder(this.props.timelineStart);
-    const weekNumberOffset = CourseDateUtils.weeksBeforeTimeline(this.props.course);
-    const blocks = [];
-
-    this.props.allWeeks.map((week) => {
-      if (week.empty) return null;
-
-      const milestoneBlocks = filter(week.blocks, block => block.kind === this.milestoneBlockType);
-      return milestoneBlocks.map((block) => {
-        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>
-              <div className="markdown" dangerouslySetInnerHTML={{ __html: rawHtml }} />
-              <hr />
-            </div>
+  };
+
+  const blocks = allWeeks.flatMap((week) => {
+    if (week.empty) return [];
+    const milestoneBlocks = filter(week.blocks, block => block.kind === 2);
+    return milestoneBlocks.map((block) => {
+      let classNames = 'module__data';
+      if (weekIsCompleted(week)) { classNames += ' completed'; }
+      const rawHtml = md.render(block.content || '');
+      const completionNote = weekIsCompleted(week) ? '- Complete' : undefined;
+      return (
+        <div key={block.id} className="section-header">
+          <div className={classNames}>
+            <p>Week {week.weekNumber + weekNumberOffset} {completionNote}</p>
+            <div className="markdown" dangerouslySetInnerHTML={{ __html: rawHtml }} />
+            <hr />
           </div>
-        );
-      });
+        </div>
+      );
     });
+  });
 
-    if (!blocks.length) {
-      return null;
-    }
+  if (!blocks.length) {
+    return null;
+  }
 
-    return (
-      <div className="module milestones">
-        <div className="section-header">
-          <h3>{I18n.t('blocks.milestones.title')}</h3>
-        </div>
-        {blocks}
+  return (
+    <div className="module milestones">
+      <div className="section-header">
+        <h3>{I18n.t('blocks.milestones.title')}</h3>
       </div>
-    );
-  }
-});
+      {blocks}
+    </div>
+  );
+};
+
+Milestones.propTypes = {
+  timelineStart: PropTypes.string.isRequired,
+  allWeeks: PropTypes.array.isRequired,
+  course: PropTypes.object.isRequired
+};
 
 export default Milestones;