From eba41d8d3d8167bd1c410a4624567fb0b4393f0c Mon Sep 17 00:00:00 2001
From: fillingtothemomo <rockingpenny4@gmail.com>
Date: Mon, 29 Jan 2024 01:04:58 +0530
Subject: [PATCH 1/2] refactors milestones to functional component

---
 .../components/overview/milestones.jsx        | 92 +++++++++----------
 1 file changed, 41 insertions(+), 51 deletions(-)

diff --git a/app/assets/javascripts/components/overview/milestones.jsx b/app/assets/javascripts/components/overview/milestones.jsx
index 3671441de2..1ae23b85b0 100644
--- a/app/assets/javascripts/components/overview/milestones.jsx
+++ b/app/assets/javascripts/components/overview/milestones.jsx
@@ -1,67 +1,57 @@
 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, weeks, 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,
+  weeks: PropTypes.array.isRequired,
+  allWeeks: PropTypes.array.isRequired,
+  course: PropTypes.object.isRequired
+};
 
 export default Milestones;

From 04b9ed01d8f21ff4a538df24e594c9a8d73cc270 Mon Sep 17 00:00:00 2001
From: fillingtothemomo <rockingpenny4@gmail.com>
Date: Thu, 1 Feb 2024 16:08:32 +0530
Subject: [PATCH 2/2] fixes issue

---
 app/assets/javascripts/components/overview/milestones.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/javascripts/components/overview/milestones.jsx b/app/assets/javascripts/components/overview/milestones.jsx
index 1ae23b85b0..4b562e00b9 100644
--- a/app/assets/javascripts/components/overview/milestones.jsx
+++ b/app/assets/javascripts/components/overview/milestones.jsx
@@ -5,7 +5,7 @@ import CourseDateUtils from '../../utils/course_date_utils';
 
 const md = require('../../utils/markdown_it.js').default();
 
-const Milestones = ({ timelineStart, weeks, allWeeks, course }) => {
+const Milestones = ({ timelineStart, allWeeks, course }) => {
   const currentWeek = CourseDateUtils.currentWeekOrder(timelineStart);
   const weekNumberOffset = CourseDateUtils.weeksBeforeTimeline(course);
 
@@ -49,7 +49,6 @@ const Milestones = ({ timelineStart, weeks, allWeeks, course }) => {
 
 Milestones.propTypes = {
   timelineStart: PropTypes.string.isRequired,
-  weeks: PropTypes.array.isRequired,
   allWeeks: PropTypes.array.isRequired,
   course: PropTypes.object.isRequired
 };