From e6ef362c4b97189daeffe1ef5beafa66b555d12b Mon Sep 17 00:00:00 2001
From: Pius Osuji <piusosuji9@gmail.com>
Date: Fri, 4 Oct 2024 22:52:50 +0100
Subject: [PATCH 1/4] Refactor some files to i18n format instead of hardcoded
 string literals

---
 .../components/NoAssignmentMessage.jsx        |  32 +++--
 .../my_exercises/components/Header.jsx        |  31 ++--
 .../components/resources/resources.jsx        | 134 ++++++++++--------
 config/locales/en.yml                         |   9 ++
 4 files changed, 126 insertions(+), 80 deletions(-)

diff --git a/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx b/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx
index ea87701b40..b2117a4dc5 100644
--- a/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx
+++ b/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx
@@ -1,21 +1,35 @@
-import React from 'react';
+import React from "react";
 
 export default ({ course }) => {
-  const findingLink = course.type === 'FellowsCohort' ? '/training/professional-development/finding-your-article-professional' : '/training/students/finding-your-article';
-  const evaluatingLink = course.type === 'FellowsCohort' ? '/training/professional-development/evaluating-articles-professional' : '/training/students/evaluating-articles';
+  const findingLink =
+    course.type === "FellowsCohort"
+      ? "/training/professional-development/finding-your-article-professional"
+      : "/training/students/finding-your-article";
+  const evaluatingLink =
+    course.type === "FellowsCohort"
+      ? "/training/professional-development/evaluating-articles-professional"
+      : "/training/students/evaluating-articles";
 
   return (
     <div>
-      <p>You have not chosen an article to work on. When you have found an article to work on, use the button above to assign it.</p>
+      <p>{I18n.t("articles.not_choosen_article")}</p>
       <aside>
-        <a href="/training/students/keeping-track-of-your-work" target="_blank" className="button ghost-button">
-          How to use the Dashboard
+        <a
+          href="/training/students/keeping-track-of-your-work"
+          target="_blank"
+          className="button ghost-button"
+        >
+          {I18n.t("articles.use_dashboard")}
         </a>
         <a href={findingLink} target="_blank" className="button ghost-button">
-          How to find an article
+          {I18n.t("articles.how_to_find")}
         </a>
-        <a href={evaluatingLink} target="_blank" className="button ghost-button">
-          Evaluating articles and sources
+        <a
+          href={evaluatingLink}
+          target="_blank"
+          className="button ghost-button"
+        >
+          {I18n.t("articles.evaluate_and_source")}
         </a>
       </aside>
     </div>
diff --git a/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx b/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
index 0c2b2ad0a2..67c2c95cef 100644
--- a/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
+++ b/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
@@ -1,33 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { HashLink as Link } from 'react-router-hash-link';
+import React from "react";
+import PropTypes from "prop-types";
+import { HashLink as Link } from "react-router-hash-link";
 
 export const Header = ({ completed = false, course, remaining = [], text }) => (
   <header className="header">
-    <h3 className={completed ? 'completed' : ''}>
-      { text }
-      {
-        remaining.length
-        ? <small>{remaining.length} additional exercises remaining.</small>
-        : null
-      }
+    <h3 className={completed ? "completed" : ""}>
+      {text}
+      {remaining.length ? (
+        <small>
+          {remaining.length} {I18n.t("training.remaining_exercise")}
+        </small>
+      ) : null}
     </h3>
     <Link
       exact="true"
-      scroll={el => el.scrollIntoView({ block: 'center' })}
-      to={`/courses/${course.slug}/resources#exercises`} className="resources-link"
+      scroll={(el) => el.scrollIntoView({ block: "center" })}
+      to={`/courses/${course.slug}/resources#exercises`}
+      className="resources-link"
     >
-      View all exercises
+      {I18n.t("training.view_all_exercise")}
     </Link>
   </header>
 );
 
 Header.propTypes = {
   course: PropTypes.shape({
-    slug: PropTypes.string.isRequired
+    slug: PropTypes.string.isRequired,
   }).isRequired,
   remaining: PropTypes.array,
-  text: PropTypes.string.isRequired
+  text: PropTypes.string.isRequired,
 };
 
 export default Header;
diff --git a/app/assets/javascripts/components/resources/resources.jsx b/app/assets/javascripts/components/resources/resources.jsx
index 55f4275d7c..f72eca8896 100644
--- a/app/assets/javascripts/components/resources/resources.jsx
+++ b/app/assets/javascripts/components/resources/resources.jsx
@@ -1,24 +1,24 @@
-import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
 
-import { getWeeksArray } from '../../selectors';
-import Block from '../timeline/block';
-import TrainingModules from '../timeline/TrainingModules/TrainingModules';
-import Handouts from './handouts';
-import Templates from './templates';
-import Videos from './videos';
-import { BLOCK_KIND_RESOURCES } from '../../constants/timeline';
-import { getModulesAndBlocksFromWeeks } from '../util/helpers';
+import { getWeeksArray } from "../../selectors";
+import Block from "../timeline/block";
+import TrainingModules from "../timeline/TrainingModules/TrainingModules";
+import Handouts from "./handouts";
+import Templates from "./templates";
+import Videos from "./videos";
+import { BLOCK_KIND_RESOURCES } from "../../constants/timeline";
+import { getModulesAndBlocksFromWeeks } from "../util/helpers";
 
 const moduleByExercises = (modules) => {
   const orderedSteps = [
-    'Complete your Bibliography',
-    'Create in the sandbox',
-    'Expand your Draft',
-    'Move your Work',
-    'Other Assigned Training Modules',
-    'Discussions',
-    'Exercises',
+    "Complete your Bibliography",
+    "Create in the sandbox",
+    "Expand your Draft",
+    "Move your Work",
+    "Other Assigned Training Modules",
+    "Discussions",
+    "Exercises",
   ];
   const [
     COMPLETE_YOUR_BIBLIOGRAPHY,
@@ -27,28 +27,28 @@ const moduleByExercises = (modules) => {
     MOVE_YOUR_WORK,
     OTHER,
     DISCUSSIONS,
-    EXERCISES
+    EXERCISES,
   ] = orderedSteps;
   const mapping = {
-    'wikipedia-essentials': COMPLETE_YOUR_BIBLIOGRAPHY,
-    'evaluating-articles': COMPLETE_YOUR_BIBLIOGRAPHY,
-    'how-to-edit': CREATE_IN_THE_SANDBOX,
-    'drafting-in-sandbox': CREATE_IN_THE_SANDBOX,
-    'drafting-in-sandbox-group': CREATE_IN_THE_SANDBOX,
+    "wikipedia-essentials": COMPLETE_YOUR_BIBLIOGRAPHY,
+    "evaluating-articles": COMPLETE_YOUR_BIBLIOGRAPHY,
+    "how-to-edit": CREATE_IN_THE_SANDBOX,
+    "drafting-in-sandbox": CREATE_IN_THE_SANDBOX,
+    "drafting-in-sandbox-group": CREATE_IN_THE_SANDBOX,
     sources: CREATE_IN_THE_SANDBOX,
     plagiarism: EXPAND_YOUR_DRAFT,
-    'moving-to-mainspace': MOVE_YOUR_WORK,
-    'moving-to-mainspace-group': MOVE_YOUR_WORK,
-    'sources-and-plagiarism-discussion': DISCUSSIONS,
-    'content-gap-discussion': DISCUSSIONS,
-    'thinking-about-wikipedia-discussion': DISCUSSIONS,
-    'evaluate-wikipedia-exercise': EXERCISES,
-    'choose-topic-from-list-exercise': EXERCISES,
-    'add-to-article-exercise': EXERCISES,
-    'did-you-know-exercise': EXERCISES,
-    'continue-improving-exercise': EXERCISES,
-    'in-class-presentation-exercise': EXERCISES,
-    'reflective-essay-exercise': EXERCISES
+    "moving-to-mainspace": MOVE_YOUR_WORK,
+    "moving-to-mainspace-group": MOVE_YOUR_WORK,
+    "sources-and-plagiarism-discussion": DISCUSSIONS,
+    "content-gap-discussion": DISCUSSIONS,
+    "thinking-about-wikipedia-discussion": DISCUSSIONS,
+    "evaluate-wikipedia-exercise": EXERCISES,
+    "choose-topic-from-list-exercise": EXERCISES,
+    "add-to-article-exercise": EXERCISES,
+    "did-you-know-exercise": EXERCISES,
+    "continue-improving-exercise": EXERCISES,
+    "in-class-presentation-exercise": EXERCISES,
+    "reflective-essay-exercise": EXERCISES,
   };
 
   const categorized = modules.reduce((acc, block) => {
@@ -65,22 +65,34 @@ const moduleByExercises = (modules) => {
 const Resources = ({ weeks, current_user, course }) => {
   // setting page title
   useEffect(() => {
-    document.title = `${course.title} - ${I18n.t('resources.label')}`;
+    document.title = `${course.title} - ${I18n.t("resources.label")}`;
   }, []);
 
   const trainingLibrarySlug = course.training_library_slug;
   let instructorModulesLink;
   if (current_user.isInstructor && Features.wikiEd) {
-    instructorModulesLink = <a href={'/training/instructors'} className="button pull-right">Instructor orientation modules</a>;
+    instructorModulesLink = (
+      <a href={"/training/instructors"} className="button pull-right">
+        {I18n.t("training.orientation_modules")}
+      </a>
+    );
   }
 
   const { blocks, modules } = getModulesAndBlocksFromWeeks(weeks);
   let additionalResources;
-  const additionalResourcesBlocks = blocks.filter(block => block.kind === BLOCK_KIND_RESOURCES);
+  const additionalResourcesBlocks = blocks.filter(
+    (block) => block.kind === BLOCK_KIND_RESOURCES
+  );
   if (additionalResourcesBlocks) {
     additionalResources = (
       <div className="list-unstyled container mt2 mb2">
-        {additionalResourcesBlocks.map(block => <Block key={block.id} block={block} trainingLibrarySlug={trainingLibrarySlug} />)}
+        {additionalResourcesBlocks.map((block) => (
+          <Block
+            key={block.id}
+            block={block}
+            trainingLibrarySlug={trainingLibrarySlug}
+          />
+        ))}
       </div>
     );
   }
@@ -89,49 +101,59 @@ const Resources = ({ weeks, current_user, course }) => {
     const categorized = moduleByExercises(modules);
     assignedModules = categorized.map(([title, categorizedModules]) => {
       if (categorizedModules) {
-        return (<TrainingModules
-          block_modules={categorizedModules}
-          header={title}
-          isStudent={current_user.isStudent}
-          key={title}
-          trainingLibrarySlug={trainingLibrarySlug}
-        />);
+        return (
+          <TrainingModules
+            block_modules={categorizedModules}
+            header={title}
+            isStudent={current_user.isStudent}
+            key={title}
+            trainingLibrarySlug={trainingLibrarySlug}
+          />
+        );
       }
       return null;
-    }
-    );
+    });
   }
   let additionalModules;
   if (Features.wikiEd) {
     additionalModules = (
-      <a href={`/training/${trainingLibrarySlug}`} className="button pull-right ml1">Additional training modules</a>
+      <a
+        href={`/training/${trainingLibrarySlug}`}
+        className="button pull-right ml1"
+      >
+        {I18n.t("training.additional_training")}
+      </a>
     );
   } else {
     additionalModules = (
-      <a href={'/training'} className="button dark mb1">{I18n.t('training.training_library')}</a>
+      <a href={"/training"} className="button dark mb1">
+        {I18n.t("training.training_library")}
+      </a>
     );
   }
 
   return (
     <div id="resources" className="w75">
       <div className="section-header">
-        <h3>{I18n.t('resources.header')}</h3>
+        <h3>{I18n.t("resources.header")}</h3>
         <div id="training-modules" className="container">
           {assignedModules}
           {additionalModules}
           {instructorModulesLink}
         </div>
         {additionalResources}
-        { Features.wikiEd && <Videos /> }
-        { Features.wikiEd && <Templates /> }
-        { Features.wikiEd && <Handouts trainingLibrarySlug={trainingLibrarySlug} blocks={blocks} /> }
+        {Features.wikiEd && <Videos />}
+        {Features.wikiEd && <Templates />}
+        {Features.wikiEd && (
+          <Handouts trainingLibrarySlug={trainingLibrarySlug} blocks={blocks} />
+        )}
       </div>
     </div>
   );
 };
 
-const mapStateToProps = state => ({
-  weeks: getWeeksArray(state)
+const mapStateToProps = (state) => ({
+  weeks: getWeeksArray(state),
 });
 
 export default connect(mapStateToProps)(Resources);
diff --git a/config/locales/en.yml b/config/locales/en.yml
index a7e2a1fb3e..97928ac57f 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -247,6 +247,11 @@ en:
     tracked_articles: Tracked Articles
     view_articles: View Articles
     no_tracked_articles: This category has no tracked articles
+    not_choosen_article:  You have not chosen an article to work on. When you have found an
+        article to work on, use the button above to assign it.
+    use_dashboard: How to use the Dashboard
+    how_to_find: How to find an article
+    evaluate_and_source: Evaluating articles and sources
 
   items:
     items: Items
@@ -1384,6 +1389,8 @@ en:
     previous: < Previous
     table_of_contents: Table of Contents
     training_library: Training Library
+    additional_training: Additional training modules
+    orientation_modules:  Instructor orientation modules
     logged_out: "You are logged out. You will not receive credit for completing this module unless you log in."
     done: Done!
     invalid: Sorry that slide does not exist!
@@ -1402,6 +1409,8 @@ en:
     search_training_resources: Search for training resources
     no_training_resource_match_your_search: No training resource matches your search
     exercise_sandbox: Exercise Sandbox
+    remaining_exercise: additional exercises remaining.
+    view_all: View all exercises
 
   update_username:
     header: Update a changed username

From 5786f8da2ababa6a4773ea4dce8732c0dcf1b412 Mon Sep 17 00:00:00 2001
From: Pius Osuji <piusosuji9@gmail.com>
Date: Sat, 5 Oct 2024 12:41:01 +0100
Subject: [PATCH 2/4] Fix build

---
 .../components/NoAssignmentMessage.jsx        | 34 +++----
 .../my_exercises/components/Header.jsx        | 20 ++--
 .../components/resources/resources.jsx        | 92 +++++++++----------
 3 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx b/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx
index b2117a4dc5..298226a4d6 100644
--- a/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx
+++ b/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx
@@ -1,35 +1,35 @@
-import React from "react";
+import React from 'react';
 
 export default ({ course }) => {
   const findingLink =
-    course.type === "FellowsCohort"
-      ? "/training/professional-development/finding-your-article-professional"
-      : "/training/students/finding-your-article";
+    course.type === 'FellowsCohort'
+      ? '/training/professional-development/finding-your-article-professional'
+      : '/training/students/finding-your-article';
   const evaluatingLink =
-    course.type === "FellowsCohort"
-      ? "/training/professional-development/evaluating-articles-professional"
-      : "/training/students/evaluating-articles";
+    course.type === 'FellowsCohort'
+      ? '/training/professional-development/evaluating-articles-professional'
+      : '/training/students/evaluating-articles';
 
   return (
     <div>
-      <p>{I18n.t("articles.not_choosen_article")}</p>
+      <p>{I18n.t('articles.not_choosen_article')}</p>
       <aside>
         <a
-          href="/training/students/keeping-track-of-your-work"
-          target="_blank"
-          className="button ghost-button"
+          href='/training/students/keeping-track-of-your-work'
+          target='_blank'
+          className='button ghost-button'
         >
-          {I18n.t("articles.use_dashboard")}
+          {I18n.t('articles.use_dashboard')}
         </a>
-        <a href={findingLink} target="_blank" className="button ghost-button">
-          {I18n.t("articles.how_to_find")}
+        <a href={findingLink} target='_blank' className='button ghost-button'>
+          {I18n.t('articles.how_to_find')}
         </a>
         <a
           href={evaluatingLink}
-          target="_blank"
-          className="button ghost-button"
+          target='_blank'
+          className='button ghost-button'
         >
-          {I18n.t("articles.evaluate_and_source")}
+          {I18n.t('articles.evaluate_and_source')}
         </a>
       </aside>
     </div>
diff --git a/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx b/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
index 67c2c95cef..cebb9425b8 100644
--- a/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
+++ b/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
@@ -1,24 +1,24 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { HashLink as Link } from "react-router-hash-link";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HashLink as Link } from 'react-router-hash-link';
 
 export const Header = ({ completed = false, course, remaining = [], text }) => (
-  <header className="header">
-    <h3 className={completed ? "completed" : ""}>
+  <header className='header'>
+    <h3 className={completed ? 'completed' : ''}>
       {text}
       {remaining.length ? (
         <small>
-          {remaining.length} {I18n.t("training.remaining_exercise")}
+          {remaining.length} {I18n.t('training.remaining_exercise')}
         </small>
       ) : null}
     </h3>
     <Link
-      exact="true"
-      scroll={(el) => el.scrollIntoView({ block: "center" })}
+      exact='true'
+      scroll={(el) => el.scrollIntoView({ block: 'center' })}
       to={`/courses/${course.slug}/resources#exercises`}
-      className="resources-link"
+      className='resources-link'
     >
-      {I18n.t("training.view_all_exercise")}
+      {I18n.t('training.view_all_exercise')}
     </Link>
   </header>
 );
diff --git a/app/assets/javascripts/components/resources/resources.jsx b/app/assets/javascripts/components/resources/resources.jsx
index f72eca8896..f8c2bae6c4 100644
--- a/app/assets/javascripts/components/resources/resources.jsx
+++ b/app/assets/javascripts/components/resources/resources.jsx
@@ -1,24 +1,24 @@
-import React, { useEffect } from "react";
-import { connect } from "react-redux";
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
 
-import { getWeeksArray } from "../../selectors";
-import Block from "../timeline/block";
-import TrainingModules from "../timeline/TrainingModules/TrainingModules";
-import Handouts from "./handouts";
-import Templates from "./templates";
-import Videos from "./videos";
-import { BLOCK_KIND_RESOURCES } from "../../constants/timeline";
-import { getModulesAndBlocksFromWeeks } from "../util/helpers";
+import { getWeeksArray } from '../../selectors';
+import Block from '../timeline/block';
+import TrainingModules from '../timeline/TrainingModules/TrainingModules';
+import Handouts from './handouts';
+import Templates from './templates';
+import Videos from './videos';
+import { BLOCK_KIND_RESOURCES } from '../../constants/timeline';
+import { getModulesAndBlocksFromWeeks } from '../util/helpers';
 
 const moduleByExercises = (modules) => {
   const orderedSteps = [
-    "Complete your Bibliography",
-    "Create in the sandbox",
-    "Expand your Draft",
-    "Move your Work",
-    "Other Assigned Training Modules",
-    "Discussions",
-    "Exercises",
+    'Complete your Bibliography',
+    'Create in the sandbox',
+    'Expand your Draft',
+    'Move your Work',
+    'Other Assigned Training Modules',
+    'Discussions',
+    'Exercises',
   ];
   const [
     COMPLETE_YOUR_BIBLIOGRAPHY,
@@ -30,25 +30,25 @@ const moduleByExercises = (modules) => {
     EXERCISES,
   ] = orderedSteps;
   const mapping = {
-    "wikipedia-essentials": COMPLETE_YOUR_BIBLIOGRAPHY,
-    "evaluating-articles": COMPLETE_YOUR_BIBLIOGRAPHY,
-    "how-to-edit": CREATE_IN_THE_SANDBOX,
-    "drafting-in-sandbox": CREATE_IN_THE_SANDBOX,
-    "drafting-in-sandbox-group": CREATE_IN_THE_SANDBOX,
+    'wikipedia-essentials': COMPLETE_YOUR_BIBLIOGRAPHY,
+    'evaluating-articles': COMPLETE_YOUR_BIBLIOGRAPHY,
+    'how-to-edit': CREATE_IN_THE_SANDBOX,
+    'drafting-in-sandbox': CREATE_IN_THE_SANDBOX,
+    'drafting-in-sandbox-group': CREATE_IN_THE_SANDBOX,
     sources: CREATE_IN_THE_SANDBOX,
     plagiarism: EXPAND_YOUR_DRAFT,
-    "moving-to-mainspace": MOVE_YOUR_WORK,
-    "moving-to-mainspace-group": MOVE_YOUR_WORK,
-    "sources-and-plagiarism-discussion": DISCUSSIONS,
-    "content-gap-discussion": DISCUSSIONS,
-    "thinking-about-wikipedia-discussion": DISCUSSIONS,
-    "evaluate-wikipedia-exercise": EXERCISES,
-    "choose-topic-from-list-exercise": EXERCISES,
-    "add-to-article-exercise": EXERCISES,
-    "did-you-know-exercise": EXERCISES,
-    "continue-improving-exercise": EXERCISES,
-    "in-class-presentation-exercise": EXERCISES,
-    "reflective-essay-exercise": EXERCISES,
+    'moving-to-mainspace': MOVE_YOUR_WORK,
+    'moving-to-mainspace-group': MOVE_YOUR_WORK,
+    'sources-and-plagiarism-discussion': DISCUSSIONS,
+    'content-gap-discussion': DISCUSSIONS,
+    'thinking-about-wikipedia-discussion': DISCUSSIONS,
+    'evaluate-wikipedia-exercise': EXERCISES,
+    'choose-topic-from-list-exercise': EXERCISES,
+    'add-to-article-exercise': EXERCISES,
+    'did-you-know-exercise': EXERCISES,
+    'continue-improving-exercise': EXERCISES,
+    'in-class-presentation-exercise': EXERCISES,
+    'reflective-essay-exercise': EXERCISES,
   };
 
   const categorized = modules.reduce((acc, block) => {
@@ -65,15 +65,15 @@ const moduleByExercises = (modules) => {
 const Resources = ({ weeks, current_user, course }) => {
   // setting page title
   useEffect(() => {
-    document.title = `${course.title} - ${I18n.t("resources.label")}`;
+    document.title = `${course.title} - ${I18n.t('resources.label')}`;
   }, []);
 
   const trainingLibrarySlug = course.training_library_slug;
   let instructorModulesLink;
   if (current_user.isInstructor && Features.wikiEd) {
     instructorModulesLink = (
-      <a href={"/training/instructors"} className="button pull-right">
-        {I18n.t("training.orientation_modules")}
+      <a href={'/training/instructors'} className='button pull-right'>
+        {I18n.t('training.orientation_modules')}
       </a>
     );
   }
@@ -85,7 +85,7 @@ const Resources = ({ weeks, current_user, course }) => {
   );
   if (additionalResourcesBlocks) {
     additionalResources = (
-      <div className="list-unstyled container mt2 mb2">
+      <div className='list-unstyled container mt2 mb2'>
         {additionalResourcesBlocks.map((block) => (
           <Block
             key={block.id}
@@ -119,24 +119,24 @@ const Resources = ({ weeks, current_user, course }) => {
     additionalModules = (
       <a
         href={`/training/${trainingLibrarySlug}`}
-        className="button pull-right ml1"
+        className='button pull-right ml1'
       >
-        {I18n.t("training.additional_training")}
+        {I18n.t('training.additional_training')}
       </a>
     );
   } else {
     additionalModules = (
-      <a href={"/training"} className="button dark mb1">
-        {I18n.t("training.training_library")}
+      <a href={'/training'} className='button dark mb1'>
+        {I18n.t('training.training_library')}
       </a>
     );
   }
 
   return (
-    <div id="resources" className="w75">
-      <div className="section-header">
-        <h3>{I18n.t("resources.header")}</h3>
-        <div id="training-modules" className="container">
+    <div id='resources' className='w75'>
+      <div className='section-header'>
+        <h3>{I18n.t('resources.header')}</h3>
+        <div id='training-modules' className='container'>
           {assignedModules}
           {additionalModules}
           {instructorModulesLink}

From 1091cb45140fe347ccbd7238a432d44c6706e926 Mon Sep 17 00:00:00 2001
From: Pius Osuji <piusosuji9@gmail.com>
Date: Mon, 7 Oct 2024 18:48:30 +0100
Subject: [PATCH 3/4] Fix build

---
 .../components/NoAssignmentMessage.jsx        | 18 ++++++++---------
 .../my_exercises/components/Header.jsx        |  8 ++++----
 .../components/resources/resources.jsx        | 20 +++++++++----------
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx b/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx
index 298226a4d6..5cba1b0427 100644
--- a/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx
+++ b/app/assets/javascripts/components/overview/my_articles/components/NoAssignmentMessage.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 
 export default ({ course }) => {
-  const findingLink =
-    course.type === 'FellowsCohort'
+  const findingLink = course.type === 'FellowsCohort'
       ? '/training/professional-development/finding-your-article-professional'
       : '/training/students/finding-your-article';
-  const evaluatingLink =
-    course.type === 'FellowsCohort'
+  const evaluatingLink = course.type === 'FellowsCohort'
       ? '/training/professional-development/evaluating-articles-professional'
       : '/training/students/evaluating-articles';
 
@@ -15,19 +13,19 @@ export default ({ course }) => {
       <p>{I18n.t('articles.not_choosen_article')}</p>
       <aside>
         <a
-          href='/training/students/keeping-track-of-your-work'
-          target='_blank'
-          className='button ghost-button'
+          href="/training/students/keeping-track-of-your-work"
+          target="_blank"
+          className="button ghost-button"
         >
           {I18n.t('articles.use_dashboard')}
         </a>
-        <a href={findingLink} target='_blank' className='button ghost-button'>
+        <a href={findingLink} target="_blank" className="button ghost-button">
           {I18n.t('articles.how_to_find')}
         </a>
         <a
           href={evaluatingLink}
-          target='_blank'
-          className='button ghost-button'
+          target="_blank"
+          className="button ghost-button"
         >
           {I18n.t('articles.evaluate_and_source')}
         </a>
diff --git a/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx b/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
index cebb9425b8..738a519682 100644
--- a/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
+++ b/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { HashLink as Link } from 'react-router-hash-link';
 
 export const Header = ({ completed = false, course, remaining = [], text }) => (
-  <header className='header'>
+  <header className="header">
     <h3 className={completed ? 'completed' : ''}>
       {text}
       {remaining.length ? (
@@ -13,10 +13,10 @@ export const Header = ({ completed = false, course, remaining = [], text }) => (
       ) : null}
     </h3>
     <Link
-      exact='true'
-      scroll={(el) => el.scrollIntoView({ block: 'center' })}
+      exact="true"
+      scroll={el => el.scrollIntoView({ block: 'center' })}
       to={`/courses/${course.slug}/resources#exercises`}
-      className='resources-link'
+      className="resources-link"
     >
       {I18n.t('training.view_all_exercise')}
     </Link>
diff --git a/app/assets/javascripts/components/resources/resources.jsx b/app/assets/javascripts/components/resources/resources.jsx
index f8c2bae6c4..60a1e84eac 100644
--- a/app/assets/javascripts/components/resources/resources.jsx
+++ b/app/assets/javascripts/components/resources/resources.jsx
@@ -72,7 +72,7 @@ const Resources = ({ weeks, current_user, course }) => {
   let instructorModulesLink;
   if (current_user.isInstructor && Features.wikiEd) {
     instructorModulesLink = (
-      <a href={'/training/instructors'} className='button pull-right'>
+      <a href={'/training/instructors'} className="button pull-right">
         {I18n.t('training.orientation_modules')}
       </a>
     );
@@ -81,12 +81,12 @@ const Resources = ({ weeks, current_user, course }) => {
   const { blocks, modules } = getModulesAndBlocksFromWeeks(weeks);
   let additionalResources;
   const additionalResourcesBlocks = blocks.filter(
-    (block) => block.kind === BLOCK_KIND_RESOURCES
+    block => block.kind === BLOCK_KIND_RESOURCES
   );
   if (additionalResourcesBlocks) {
     additionalResources = (
-      <div className='list-unstyled container mt2 mb2'>
-        {additionalResourcesBlocks.map((block) => (
+      <div className="list-unstyled container mt2 mb2">
+        {additionalResourcesBlocks.map(block => (
           <Block
             key={block.id}
             block={block}
@@ -119,24 +119,24 @@ const Resources = ({ weeks, current_user, course }) => {
     additionalModules = (
       <a
         href={`/training/${trainingLibrarySlug}`}
-        className='button pull-right ml1'
+        className="button pull-right ml1"
       >
         {I18n.t('training.additional_training')}
       </a>
     );
   } else {
     additionalModules = (
-      <a href={'/training'} className='button dark mb1'>
+      <a href={'/training'} className="button dark mb1">
         {I18n.t('training.training_library')}
       </a>
     );
   }
 
   return (
-    <div id='resources' className='w75'>
-      <div className='section-header'>
+    <div id="resources" className="w75">
+      <div className="section-header">
         <h3>{I18n.t('resources.header')}</h3>
-        <div id='training-modules' className='container'>
+        <div id="training-modules" className="container">
           {assignedModules}
           {additionalModules}
           {instructorModulesLink}
@@ -152,7 +152,7 @@ const Resources = ({ weeks, current_user, course }) => {
   );
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   weeks: getWeeksArray(state),
 });
 

From d65f371c30f0002f599f788f291ca7883a7593a0 Mon Sep 17 00:00:00 2001
From: Pius Osuji <piusosuji9@gmail.com>
Date: Tue, 8 Oct 2024 22:52:12 +0100
Subject: [PATCH 4/4] include number in translation

---
 .../components/overview/my_exercises/components/Header.jsx      | 2 +-
 config/locales/en.yml                                           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx b/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
index 738a519682..6e17716df5 100644
--- a/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
+++ b/app/assets/javascripts/components/overview/my_exercises/components/Header.jsx
@@ -8,7 +8,7 @@ export const Header = ({ completed = false, course, remaining = [], text }) => (
       {text}
       {remaining.length ? (
         <small>
-          {remaining.length} {I18n.t('training.remaining_exercise')}
+          {I18n.t('training.remaining_exercise', { count: remaining.length })}
         </small>
       ) : null}
     </h3>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 97928ac57f..c722444456 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1409,7 +1409,7 @@ en:
     search_training_resources: Search for training resources
     no_training_resource_match_your_search: No training resource matches your search
     exercise_sandbox: Exercise Sandbox
-    remaining_exercise: additional exercises remaining.
+    remaining_exercise: "%{count} additional exercises remaining."
     view_all: View all exercises
 
   update_username: